Skip to main content
@repo/design-system provides 50+ accessible, themeable components built on shadcn/ui, Radix UI, and Tailwind CSS 4. All components support keyboard navigation and dark mode.

​
Usage

Import components by path:
apps/app/components/settings.tsx
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:
apps/app/layout.tsx
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 and NativeWind. They use the same design tokens (colors, radii, spacing) through CSS variables.
apps/mobile/app/index.tsx
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): 
bun run bump-ui                # Update all web components
bunx shadcn@latest add calendar -c packages/design-system
Add new native components: 
bun run bump-ui-native         # Update all native components
bunx --bun @react-native-reusables/cli@latest add button -c apps/mobile

​
Learn More