Quick Start

This guide walks you from a fresh React project to a working UI with Clidey Design.

Build with Claude or Codex#

Describe your app and give your coding agent the complete UX context. The prompt below includes the URL for the site you are viewing.

YOUR IDEA → YOUR APP

One prompt. The whole design system.

Copy this into Claude Code or Codex, then describe what you want to build.

Read the complete build context

Read https://clidey.github.io/ux/llms.txt and build the following app using Clidey UX:

[Describe your app.]

Use a local coding agent for this localhost preview. For remote agents, use the published site URL once the documentation is deployed. See MCP and AI workflows for the complete workflow and optional MCP connection.

Or set it up yourself#

Create a React project

Use Vite to scaffold a new project (or skip if you already have one):

Bash

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install

Install Clidey Design

Bash

npm install @clidey/ux

Import the stylesheet

Open src/main.tsx and add the CSS import at the top:

TSX

import '@clidey/ux/styles.css';

Add ThemeProvider

Wrap your app with ThemeProvider in src/main.tsx:

TSX

import React from 'react';
import ReactDOM from 'react-dom/client';
import { ThemeProvider } from '@clidey/ux';
import '@clidey/ux/styles.css';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <ThemeProvider defaultTheme="system">
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

Use your first components

Replace src/App.tsx with:

TSX

import {
  Button,
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  Badge,
  Input,
} from '@clidey/ux';

export default function App() {
  return (
    <div className="min-h-screen p-8">
      <Card className="max-w-md mx-auto">
        <CardHeader>
          <CardTitle>Welcome to Clidey Design</CardTitle>
          <CardDescription>
            A beautiful component library built on Radix UI.
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex gap-2">
            <Badge>Default</Badge>
            <Badge variant="secondary">Secondary</Badge>
            <Badge variant="destructive">Destructive</Badge>
          </div>
          <Input placeholder="Type something..." />
          <div className="flex gap-2">
            <Button>Get Started</Button>
            <Button variant="outline">Learn More</Button>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}

Run the dev server

Bash

npm run dev

Open http://localhost:5173 in your browser.

Check

You should see a styled card with badges, an input field, and buttons — all in your system's preferred theme.

Adding dark mode toggle#

Add a theme toggle button to let users switch between light and dark mode:

TSX

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

export default function App() {
  return (
    <div className="min-h-screen p-8">
      <div className="flex justify-end mb-4">
        <ModeToggle />
      </div>

      {/* your content */}

      <Toaster />
    </div>
  );
}

Common patterns#

Form with validation feedback

TSX

import { Input, Label, Button, Alert, AlertTitle, AlertDescription } from '@clidey/ux';
import { useState } from 'react';

function LoginForm() {
  const [error, setError] = useState('');

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setError('Invalid credentials. Please try again.');
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-4 max-w-sm">
      {error && (
        <Alert variant="destructive">
          <AlertTitle>Authentication failed</AlertTitle>
          <AlertDescription>{error}</AlertDescription>
        </Alert>
      )}
      <div className="space-y-1">
        <Label htmlFor="email">Email</Label>
        <Input id="email" type="email" placeholder="you@example.com" />
      </div>
      <div className="space-y-1">
        <Label htmlFor="password">Password</Label>
        <Input id="password" type="password" showPasswordToggle />
      </div>
      <Button type="submit" className="w-full">Sign in</Button>
    </form>
  );
}

Toast notifications

TSX

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

function Demo() {
  return (
    <>
      <Button onClick={() => toast.success('Saved successfully!')}>
        Save changes
      </Button>
      <Toaster />
    </>
  );
}

Confirmation dialog

TSX

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

function DeleteConfirm() {
  return (
    <AlertDialog>
      <AlertDialogTrigger>
        <Button variant="destructive">Delete account</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Delete your account?</AlertDialogTitle>
          <AlertDialogDescription>
            Your account and all associated data will be permanently deleted.
            This cannot be undone.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Keep account</AlertDialogCancel>
          <AlertDialogAction>Delete account</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

Next steps#

Browse components

Explore the full component library with usage examples and prop references.

Theming

Customize colors and dark mode behavior for your brand.

Was this page helpful?