@coston/ui

React UI components built on Radix UI and Tailwind CSS.

Install

npm install @coston/ui @coston/design-tokens

Peer dependencies: react, react-dom

Setup

1. CSS

Add to your root CSS file, after @import "tailwindcss":

@import 'tailwindcss';
@import '@coston/design-tokens/tailwind.css';
@import '@coston/ui/source.css';

2. Use components

Every component is a named export from its own entry point:

import { Button } from '@coston/ui/button';
import { Card, CardHeader, CardTitle, CardContent } from '@coston/ui/card';
import { Input } from '@coston/ui/input';

export function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Example</CardTitle>
      </CardHeader>
      <CardContent className="flex gap-2">
        <Input placeholder="Enter text" />
        <Button>Submit</Button>
      </CardContent>
    </Card>
  );
}

LLM Usage Instructions

Correct import pattern

// Each component is a named export from a separate entry point
import { Button } from '@coston/ui/button';
import { Card, CardHeader, CardTitle, CardContent } from '@coston/ui/card';
import { cn } from '@coston/ui/lib/utils';
import { useIsMobile } from '@coston/ui/hooks/use-mobile';

Required CSS setup

Components render unstyled without the CSS imports. The setup in your root CSS is mandatory:

@import 'tailwindcss';
@import '@coston/design-tokens/tailwind.css';
@import '@coston/ui/source.css';

Do NOT

• Do not import from the package root: import { Button } from '@coston/ui' — there is no root export
• Do not use default imports: import Button from '@coston/ui/button' — all exports are named
• Do not skip the CSS setup — components will render without styles
• Do not import @coston/ui/source.css without also importing @coston/design-tokens/tailwind.css — components depend on the design token CSS variables

Optional peer dependencies

Some components require additional packages:

| Component | Package | | --------- | ------------------------------ | | Chart | recharts | | Carousel | embla-carousel-react | | Sonner | sonner | | Drawer | vaul | | Command | cmdk | | Resizable | react-resizable-panels | | Calendar | react-day-picker, date-fns |

Install only what you use.

Components

| Component | Import | | --------------- | ---------------------------- | | Accordion | @coston/ui/accordion | | Alert | @coston/ui/alert | | Alert Dialog | @coston/ui/alert-dialog | | Aspect Ratio | @coston/ui/aspect-ratio | | Avatar | @coston/ui/avatar | | Badge | @coston/ui/badge | | Breadcrumb | @coston/ui/breadcrumb | | Button | @coston/ui/button | | Calendar | @coston/ui/calendar | | Card | @coston/ui/card | | Carousel | @coston/ui/carousel | | Chart | @coston/ui/chart | | Checkbox | @coston/ui/checkbox | | Collapsible | @coston/ui/collapsible | | Command | @coston/ui/command | | Context Menu | @coston/ui/context-menu | | Dialog | @coston/ui/dialog | | Drawer | @coston/ui/drawer | | Dropdown Menu | @coston/ui/dropdown-menu | | Hover Card | @coston/ui/hover-card | | Input | @coston/ui/input | | Label | @coston/ui/label | | Menubar | @coston/ui/menubar | | Navigation Menu | @coston/ui/navigation-menu | | Pagination | @coston/ui/pagination | | Popover | @coston/ui/popover | | Progress | @coston/ui/progress | | Radio Group | @coston/ui/radio-group | | Resizable | @coston/ui/resizable | | Scroll Area | @coston/ui/scroll-area | | Select | @coston/ui/select | | Separator | @coston/ui/separator | | Sheet | @coston/ui/sheet | | Sidebar | @coston/ui/sidebar | | Skeleton | @coston/ui/skeleton | | Slider | @coston/ui/slider | | Sonner | @coston/ui/sonner | | Switch | @coston/ui/switch | | Table | @coston/ui/table | | Tabs | @coston/ui/tabs | | Textarea | @coston/ui/textarea | | Toggle | @coston/ui/toggle | | Toggle Group | @coston/ui/toggle-group | | Tooltip | @coston/ui/tooltip |

Utilities

| Export | Import | | --------------- | ----------------------------- | | cn() | @coston/ui/lib/utils | | useIsMobile() | @coston/ui/hooks/use-mobile |

License

MIT