@design-system/react

React component library based on Radix UI primitives with Tailwind CSS styling.

Installation

npm install @design-system/react

Peer Dependencies

This package requires the following peer dependencies:

npm install react react-dom

Usage

import { Button, Card, Input } from '@design-system/react';

function App() {
  return (
    <Card>
      <Input placeholder="Enter text..." />
      <Button>Submit</Button>
    </Card>
  );
}

Components

This library includes 47+ components:

Layout

• Card, Separator, Resizable, ScrollArea

Form

• Button, Input, Textarea, Select, Checkbox, Radio, Switch, Slider, Label, Form

Navigation

• Tabs, Accordion, Breadcrumb, NavigationMenu, Menubar, Sidebar

Overlay

• Dialog, AlertDialog, Sheet, Drawer, Popover, HoverCard, ContextMenu, DropdownMenu

Feedback

• Toast, Alert, Progress, Skeleton

Display

• Avatar, Badge, Table, Calendar, Carousel, Chart

Interactive

• Command, Toggle, ToggleGroup, Collapsible, AspectRatio, InputOTP

Styling

These components are designed to work with Tailwind CSS. Make sure you have Tailwind CSS configured in your project.

You may also want to use @design-system/tokens for consistent design tokens:

npm install @design-system/tokens

TypeScript

All components are fully typed with TypeScript.

License

MIT