> ## Documentation Index
> Fetch the complete documentation index at: https://mf2.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Design System

> Shared UI components built on shadcn/ui, Radix, and Tailwind CSS 4.

`@repo/design-system` provides 50+ accessible, themeable components built on [shadcn/ui](https://ui.shadcn.com), [Radix UI](https://www.radix-ui.com), and [Tailwind CSS 4](https://tailwindcss.com). All components support keyboard navigation and dark mode.

## Usage

Import components by path:

```tsx title="apps/app/components/settings.tsx" theme={null}
import { Button } from "@repo/design-system/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@repo/design-system/components/ui/card";
import { Input } from "@repo/design-system/components/ui/input";

export function SettingsForm() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Settings</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <Input placeholder="Display name" />
        <Button type="submit">Save changes</Button>
      </CardContent>
    </Card>
  );
}
```

## Theming

Components use CSS variables for theming. Wrap your app in `ThemeProvider` for dark mode:

```tsx title="apps/app/layout.tsx" theme={null}
import { ThemeProvider } from "@repo/design-system/components/theme-provider";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
      {children}
    </ThemeProvider>
  );
}
```

## Desktop

The desktop app (`apps/desktop`) imports from `@repo/design-system` directly. The same components that render in Next.js render in Electron's Vite-bundled renderer. No separate component library needed.

## Native (Mobile)

`@repo/design-system-native` provides React Native equivalents of the web components, built on [React Native Reusables](https://rnr-docs.vercel.app/) and [NativeWind](https://www.nativewind.dev/). They use the same design tokens (colors, radii, spacing) through CSS variables.

```tsx title="apps/mobile/app/index.tsx" theme={null}
import { Button } from "@repo/design-system-native/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@repo/design-system-native/components/ui/card";
import { Text } from "@repo/design-system-native/components/ui/text";
```

## Adding Components

Add new web components to the shared package (not to individual apps):

```bash theme={null}
bun run bump-ui                # Update all web components
bunx shadcn@latest add calendar -c packages/design-system
```

Add new native components:

```bash theme={null}
bun run bump-ui-native         # Update all native components
bunx --bun @react-native-reusables/cli@latest add button -c apps/mobile
```

## Learn More

* [shadcn/ui documentation](https://ui.shadcn.com)
* [Radix UI primitives](https://www.radix-ui.com/primitives)
* [React Native Reusables](https://rnr-docs.vercel.app/)
* [Tailwind CSS documentation](https://tailwindcss.com/docs)