@tidal-ds/react

React component library for the Tidal design system — shadcn-style primitives styled with a unified token set, sourced from Figma.

npm install @tidal-ds/react @tidal-ds/tokens
# or: pnpm add @tidal-ds/react @tidal-ds/tokens

Setup

1. Import the CSS variables once at the top of your app:

   import "@tidal-ds/tokens/css";

2. Wire the Tailwind preset so bg-primary, text-foreground, rounded-md, etc. resolve to the Tidal tokens:

   // tailwind.config.ts
   import preset from "@tidal-ds/tokens/tailwind";
   
   export default {
     presets: [preset],
     content: ["./app/**/*.{ts,tsx}", "./node_modules/@tidal-ds/react/dist/**/*.js"],
   };

3. Use the components — everything is exported from the package root:

   import { Button, Input, Tabs, TabsList, TabsTrigger, TabsContent } from "@tidal-ds/react";
   
   export function Example() {
     return (
       <Tabs defaultValue="account">
         <TabsList>
           <TabsTrigger value="account">Account</TabsTrigger>
           <TabsTrigger value="password">Password</TabsTrigger>
         </TabsList>
         <TabsContent value="account">…</TabsContent>
       </Tabs>
     );
   }

Components

45+ primitives including Accordion, Alert, AlertDialog, Avatar, Badge, Breadcrumb, Button, Calendar, Card, Carousel, Chart, Checkbox, Collapsible, Combobox, Command, Dialog, DropdownMenu, Field, IconButton, Input, InputOTP, Label, Menubar, MenuItem, MultiCombobox, NavigationMenu, PageTabBar, Pagination, Popover, Progress, RadioGroup, ScrollArea, ScrollFade, Select, Separator, Sheet, Sidebar, Skeleton, Slider, Switch, Table, Tabs, Textarea, Toast, Toggle, ToggleGroup, Tooltip.

Full docs and live examples: tidal-design-system-docs.vercel.app

Peer dependencies

• react ≥ 18
• react-dom ≥ 18

License

MIT © Liquid AI