@clidey/ux

Clidey Design
A production-ready React component library built on Radix UI and Tailwind CSS v4.
37+ accessible, composable, dark-mode-ready components — drop in and ship.

Why Clidey Design?

Building a consistent, accessible UI from scratch takes weeks. Clidey Design gives you a complete set of polished components so you can focus on your product, not your design system.

• Accessible by default — every component is built on Radix UI primitives. Keyboard navigation, focus management, and ARIA attributes are handled for you.
• Dark mode included — wrap your app with ThemeProvider and all components adapt automatically. System preference detection and localStorage persistence built in.
• Fully typed — complete TypeScript definitions with strict mode. Autocomplete for every prop, variant, and event handler.
• Composable API — sub-component patterns give you full control over layout and markup without fighting against an opinionated structure.
• Tailwind CSS v4 — styled with utility classes you already know. Override anything with className.
• Zero configuration — one import, one stylesheet, done.

Installation

npm install @clidey/ux
# or
pnpm add @clidey/ux
# or
yarn add @clidey/ux

Import the stylesheet once at your app entry point:

// main.tsx / _app.tsx
import '@clidey/ux/styles.css';

Wrap with ThemeProvider to enable dark mode:

import { ThemeProvider } from '@clidey/ux';

export default function App() {
  return (
    <ThemeProvider defaultTheme="system">
      {/* your app */}
    </ThemeProvider>
  );
}

That's it. No extra configuration, no Tailwind setup required in your project.

Quick start

import {
  Button,
  Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter,
  Badge,
  Input,
  Label,
} from '@clidey/ux';
import '@clidey/ux/styles.css';

export default function Example() {
  return (
    <Card className="max-w-sm">
      <CardHeader>
        <CardTitle>Create account</CardTitle>
        <CardDescription>Get started in seconds. No credit card required.</CardDescription>
      </CardHeader>
      <CardContent className="space-y-3">
        <div className="space-y-1">
          <Label htmlFor="email">Email</Label>
          <Input id="email" type="email" placeholder="[email protected]" />
        </div>
        <div className="space-y-1">
          <Label htmlFor="password">Password</Label>
          <Input id="password" type="password" showPasswordToggle />
        </div>
      </CardContent>
      <CardFooter className="flex items-center justify-between">
        <Badge variant="outline">Free plan</Badge>
        <Button>Create account</Button>
      </CardFooter>
    </Card>
  );
}

Components

Actions

Inputs

Display

Navigation

Overlays

Menus

Layout

Data & Visualization

Utilities

Theme

Usage examples

Catalog icons

import { IconSearch, IconSearchAlt, CatalogIcon } from '@clidey/ux';

<IconSearch className="size-4" />
<IconSearchAlt size={20} />
<CatalogIcon name="source" size={16} />

Catalog icons inherit the current text color and accept SVG props and refs. Add aria-label when an icon needs its own accessible name.

Triggers and asChild

Wrap interactive children in DropdownMenuTrigger, TooltipTrigger, PopoverTrigger, DialogTrigger and friends without asChild; the trigger renders as the child when it is slot-safe (Button, Badge, SidebarMenuButton, intrinsic button/a/span/div, ...) and as its own button otherwise. Pass asChild only for non-ux elements that forward refs. See docs/triggers-and-aschild.md for the rule, the safe/unsafe table and the traps.

<DropdownMenuTrigger>
  <Button variant="ghost" size="icon"><MoreHorizontal /></Button>
</DropdownMenuTrigger>

Confirmation dialog

import {
  AlertDialog, AlertDialogTrigger, AlertDialogContent,
  AlertDialogHeader, AlertDialogTitle, AlertDialogDescription,
  AlertDialogFooter, AlertDialogCancel, AlertDialogAction,
  Button,
} from '@clidey/ux';

<AlertDialog>
  <AlertDialogTrigger>
    <Button variant="destructive">Delete account</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone. Your data will be permanently deleted.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Delete account</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Toast notifications

import { Toaster, toast } from '@clidey/ux';

// In your root layout
<Toaster />

// Anywhere in your app
toast.success('Saved successfully!');
toast.error('Something went wrong.');
toast.promise(saveData(), {
  loading: 'Saving...',
  success: 'Done!',
  error: 'Failed to save.',
});

Command palette (⌘K)

import {
  CommandDialog, CommandInput, CommandList,
  CommandEmpty, CommandGroup, CommandItem,
} from '@clidey/ux';

<CommandDialog open={open} onOpenChange={setOpen}>
  <CommandInput placeholder="Search commands..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Navigation">
      <CommandItem onSelect={() => navigate('/dashboard')}>Dashboard</CommandItem>
      <CommandItem onSelect={() => navigate('/settings')}>Settings</CommandItem>
    </CommandGroup>
  </CommandList>
</CommandDialog>

Large dataset table with virtualization

import {
  TableProvider, Table, TableHeader, TableHeadRow,
  TableHead, VirtualizedTableBody, TableRow, TableCell,
} from '@clidey/ux';

<TableProvider columnCount={3}>
  <Table>
    <TableHeader>
      <TableHeadRow>
        <TableHead>ID</TableHead>
        <TableHead>Name</TableHead>
        <TableHead>Status</TableHead>
      </TableHeadRow>
    </TableHeader>
    <VirtualizedTableBody rowCount={10000} rowHeight={48} height={400}>
      {({ index, style }) => (
        <TableRow style={style}>
          <TableCell>{rows[index].id}</TableCell>
          <TableCell>{rows[index].name}</TableCell>
          <TableCell>{rows[index].status}</TableCell>
        </TableRow>
      )}
    </VirtualizedTableBody>
  </Table>
</TableProvider>

Theming

All visual tokens are exposed as CSS custom properties. Override them in your own stylesheet after importing @clidey/ux/styles.css:

:root {
  --primary: 250 84% 54%;          /* your brand color */
  --radius: 0.375rem;              /* border radius */
}

Dark mode is automatic — ThemeProvider applies a dark class to <html> and all components respond to it via Tailwind's dark: modifier.

Next.js

// app/providers.tsx
'use client';
import { ThemeProvider } from '@clidey/ux';

export function Providers({ children }: { children: React.ReactNode }) {
  return <ThemeProvider defaultTheme="system">{children}</ThemeProvider>;
}

// app/layout.tsx
import '@clidey/ux/styles.css';
import { Providers } from './providers';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

Peer dependencies

All other dependencies (Radix UI, Lucide, Recharts, Sonner, Vaul, cmdk) are bundled — no extra installs needed.

Contributing

Contributions, bug reports, and feature requests are welcome. Please open an issue or pull request on GitHub.

Not found page

Use the animated 404 view in your application's fallback route:

import { NotFoundPage } from '@clidey/ux';

<NotFoundPage homeHref="/" homeLabel="Back to home" />

Customize the copy with title, description, and eyebrow. Use onHome for router navigation or action for a custom action. Playback supports loop, once, and off through defaultMotion or controlled motion / onMotionChange props. Reduced motion preferences automatically show a still pose. Optional playback controls are enabled with showMotionControls.

License

Licensed under the Apache License 2.0.

Clidey Design icons

The full Clidey Design icon collection is available as raw SVG assets without loading it through the main UI entry. Import a single icon URL in a Vite app:

import searchUrl from "@clidey/ux/icons/svg/search.svg?url";

<img src={searchUrl} alt="" />

For a dynamic icon picker, import the icons URL map from @clidey/ux/icons. See icons/README.md for usage examples.