\n
Help text
\n
\n```\n\n### Override Your Brand\n\n```css\n:root {\n --primary: 210 80% 50%; /* your brand color (HSL) */\n --gradient-from: 210 80% 50%;\n --gradient-to: 170 80% 50%;\n --radius: 0.5rem; /* sharper corners */\n --font-sans: \"Geist\", sans-serif;\n}\n```\n\n---\n\n## Quick Reference — All Exports\n\n**Sub-path imports (recommended)** — each import pulls only that component's code:\n\n```ts\n// Auth\nimport { AuthCard } from \"@speakai/ui/auth-card\";\nimport { SSOButton, SSOButtons } from \"@speakai/ui/sso-button\";\nimport { PasswordInput } from \"@speakai/ui/password-input\";\nimport { OTPInput } from \"@speakai/ui/otp-input\";\nimport { AuthDivider } from \"@speakai/ui/auth-divider\";\n\n// Forms\nimport { Button } from \"@speakai/ui/button\";\nimport { Input, SearchInput, Select, Textarea } from \"@speakai/ui/input\";\nimport { Switch } from \"@speakai/ui/switch\";\nimport { Checkbox } from \"@speakai/ui/checkbox\";\nimport { RadioGroup } from \"@speakai/ui/radio-group\";\nimport { ColorPicker } from \"@speakai/ui/color-picker\";\nimport { ImageUploader } from \"@speakai/ui/image-uploader\";\nimport { FileDropzone } from \"@speakai/ui/file-dropzone\";\nimport { Chips } from \"@speakai/ui/chips\";\nimport { Slider } from \"@speakai/ui/slider\";\n\n// Layout\nimport { Card } from \"@speakai/ui/card\";\nimport { Sidebar, SidebarProvider, SidebarLayout, SidebarUser } from \"@speakai/ui/sidebar\";\nimport { SidePanel } from \"@speakai/ui/side-panel\";\nimport { PageHeader, SectionHeader } from \"@speakai/ui/page-header\";\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from \"@speakai/ui/tabs\";\nimport { Accordion, AccordionItem } from \"@speakai/ui/accordion\";\nimport { Stepper } from \"@speakai/ui/stepper\";\n\n// Data Display\nimport { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableSortHead, TableActions, TableActionButton, TableEmpty, TablePagination, TableSkeleton } from \"@speakai/ui/table\";\nimport { StatCard, StatCardGrid } from \"@speakai/ui/stat-card\";\nimport { Badge, StatusBadge } from \"@speakai/ui/badge\";\nimport { InfoCard } from \"@speakai/ui/info-card\";\nimport { Breadcrumb } from \"@speakai/ui/breadcrumb\";\n\n// Feedback\nimport { ToastProvider, useToast } from \"@speakai/ui/toast\";\nimport { Dialog, DialogHeader, DialogBody, DialogFooter, DialogCloseButton } from \"@speakai/ui/dialog\";\nimport { ConfirmDialog } from \"@speakai/ui/confirm-dialog\";\nimport { BottomSheet } from \"@speakai/ui/bottom-sheet\";\nimport { EmptyState } from \"@speakai/ui/empty-state\";\nimport { ErrorState } from \"@speakai/ui/error-state\";\n\n// Skeleton\nimport { Skeleton, SkeletonText, PageHeaderSkeleton, StatCardSkeleton, StatCardsSkeletonGrid, PageSkeleton, CardSkeleton, GridSkeleton, FormSkeleton } from \"@speakai/ui/skeleton\";\n\n// Selectors\nimport { LanguageSelector } from \"@speakai/ui/language-selector\";\nimport { PhoneInput } from \"@speakai/ui/phone-input\";\nimport { DatePicker } from \"@speakai/ui/date-picker\";\nimport { TimePicker } from \"@speakai/ui/time-picker\";\n\n// Utilities\nimport { Tooltip } from \"@speakai/ui/tooltip\";\nimport { Popover } from \"@speakai/ui/popover\";\nimport { DropdownMenu, DropdownMenuItem, DropdownMenuDivider, DropdownMenuHeader, MoreButton } from \"@speakai/ui/dropdown-menu\";\nimport { Avatar } from \"@speakai/ui/avatar\";\nimport { Progress } from \"@speakai/ui/progress\";\nimport { ThemeToggle, ThemeSelector } from \"@speakai/ui/theme-toggle\";\nimport { cn } from \"@speakai/ui/cn\";\n\n// Media (separate entry — avoids prosemirror dependency)\nimport { MediaPlayer, useMediaSync } from \"@speakai/ui/media\";\n```\n\n
\nBarrel import (legacy — pulls entire bundle)
\n\n```ts\nimport {\n Button, Card, Badge, Input, Table, Dialog, // ... all 75+ exports\n} from \"@speakai/ui\";\n```\n\n \n\n---\n\n## Component Reference\n\nAll components support the `className` prop for Tailwind overrides unless noted. All accept `ref` via `forwardRef`.\n\n---\n\n### Auth Components\n\n#### `AuthCard`\n\nCentered card layout for login, register, and verify pages.\n\n```tsx\n
} title=\"Welcome back\" subtitle=\"Sign in to continue\">\n
\n
\n\n```\n\n| Prop | Type | Default | Required |\n|------|------|---------|----------|\n| `title` | `string` | — | Yes |\n| `subtitle` | `string` | — | No |\n| `logo` | `ReactNode` | — | No |\n| `children` | `ReactNode` | — | No |\n| `className` | `string` | — | No |\n\n---\n\n#### `SSOButton`\n\nSingle SSO provider button with built-in icon.\n\n```tsx\n
\n```\n\n| Prop | Type | Default | Required |\n|------|------|---------|----------|\n| `provider` | `\"google\" \\| \"apple\" \\| \"microsoft\"` | — | Yes |\n| `action` | `\"login\" \\| \"register\"` | `\"login\"` | No |\n| `isLoading` | `boolean` | `false` | No |\n| `disabled` | `boolean` | — | No |\n\n---\n\n#### `SSOButtons`\n\nRenders all three SSO buttons (Google, Apple, Microsoft) with a shared click handler.\n\n```tsx\n
handleSSO(p)} />\n```\n\n| Prop | Type | Default | Required |\n|------|------|---------|----------|\n| `action` | `\"login\" \\| \"register\"` | `\"login\"` | No |\n| `onProviderClick` | `(provider: \"google\" \\| \"apple\" \\| \"microsoft\") => void` | — | No |\n| `isLoading` | `boolean` | `false` | No |\n| `disabled` | `boolean` | — | No |\n| `className` | `string` | — | No |\n\n---\n\n#### `PasswordInput`\n\nInput with show/hide password toggle.\n\n```tsx\n\n```\n\n| Prop | Type | Default | Required |\n|------|------|---------|----------|\n| `error` | `boolean \\| string` | — | No |\n| `label` | `string` | — | No |\n| `disabled` | `boolean` | — | No |\n\nAccepts all native `` props.\n\n---\n\n#### `OTPInput`\n\nMulti-digit code input with auto-focus advance and paste support.\n\n```tsx\n\n\n```\n\n| Prop | Type | Default | Required |\n|------|------|---------|----------|\n| `value` | `string` | — | Yes |\n| `onChange` | `(value: string) => void` | — | Yes |\n| `length` | `number` | `6` | No |\n| `error` | `boolean \\| string` | — | No |\n| `disabled` | `boolean` | `false` | No |\n| `autoFocus` | `boolean` | `false` | No |\n\n---\n\n#### `AuthDivider`\n\nHorizontal rule with centered label for separating auth options.\n\n```tsx\n {/* renders \"or\" */}\n\n```\n\n| Prop | Type | Default | Required |\n|------|------|---------|----------|\n| `text` | `string` | `\"or\"` | No |\n| `className` | `string` | — | No |\n\n---\n\n### Form Components\n\n#### `Button`\n\nPrimary action element. Extend all native `