Get started
Register the @dreams-ui registry
Add this to your project's components.json (create one first with npx shadcn init if you don't have one). Use the new-york or default style - dreams-ui components use Radix's asChild polymorphism, and the newer base-*/radix-* styles rewrite that into an incompatible render prop during install.
{
"registries": {
"@dreams-ui": "https://ui.somnia.network/r/{name}.json"
}
}Install a component
Every component is namespaced under @dreams-ui/. Transitive dependencies (other components, hooks, the theme) are resolved automatically.
npx shadcn add @dreams-ui/buttonImport the theme
The first install writes app/dreams-ui-theme.css to your project. Add one import line to your own global stylesheet - the CLI can't merge it into an existing file automatically.
@import "./dreams-ui-theme.css";Working with AI agents
An agent-readable index of this registry lives at /llms.txt. For coding agents, install the Dreams UI skill - it documents usage rules, gotchas, and the full catalog, and lands in .claude/skills/dreams-ui/ where agent harnesses auto-discover it. For whole-project conventions (structure, code style), agents should also read /company-claude.md:
npx shadcn add @dreams-ui/skillComponents (56)
Expandable accordion built on Radix Accordion.
Callout alert with severity variants, icon, title, and description.
Small label badge with color variants and optional icons.
Hero section with animated blob background.
Animated gradient blob background (simplex-noise driven).
Animated light-trail border effect for highlighting a container.
Breadcrumb navigation trail.
Action button with variants (primary/secondary/ghost/brand/semantic), sizes, icons, and asChild polymorphism.
Surface card with header, title, description, content, and footer parts.
Swipeable carousel built on Embla with prev/next controls.
Recharts wrapper themed with Dreams UI tokens (container, tooltip, legend).
Checkbox with label and error state, built on Radix Checkbox.
Syntax-highlighted code block (Shiki) with copy button and optional window bar.
Collapsible content region built on Radix Collapsible.
Layout container with max-width, centering, and horizontal padding.
Blockchain address display with truncation and copy-to-clipboard.
Horizontal rule divider.
Drag-and-drop file upload area built on react-dropzone.
Empty-state placeholder with icon, message, and optional action.
Intercepts clicks on external-domain links and shows a confirmation modal before navigating.
FAQ section rendering question/answer items in an accordion.
Form field layout primitives (label + control + helper text rows).
File input field with label and helper text.
Site footer with brand logo, link columns, and social accounts.
Form helper/error text shown below inputs.
Hero heading with staggered per-word text animation.
Infinitely looping horizontal marquee slider for logos or cards.
Content card with icon, title, and description.
Info icon that shows a tooltip on hover.
Text input with error state and helper text.
Form label rendered through Typography with disabled-state styling.
Loading spinner.
Dialog modal built on Radix Dialog with header, footer, title, and description parts.
Responsive site navigation bar with links, mobile menu, and social accounts.
Ready-made 404 page section for Next.js not-found routes.
Page navigation with numbered pages and prev/next controls.
User profile card with avatar, bio, wallet address, and social handles.
Progress bar.
QR code renderer.
Custom-styled scrollable area built on Radix ScrollArea.
Segmented button group for switching between options.
Select dropdown built on Radix Select with label and helper text.
Separator line with optional label text.
Skeleton loading placeholder.
Somnia rank medal graphics (bronze, silver, gold).
Gradient 'Sponsored' badge.
Statistic display card with icon, value, and label.
Live / ending-soon / ended status badge.
Toggle switch with label, built on Radix Switch.
Styled table parts (header, body, row, cell) using Typography.
Tabs built on Radix Tabs with default and line variants.
Multiline text input with error state and helper text.
Section title block with optional icon and description.
Toast notifications via Sonner (Toaster plus toast helpers).
Tooltip built on Radix Tooltip.
Text component enforcing the design system type scale (display, heading, label, paragraph variants). Use instead of raw p/span/h* tags.