# Dreams UI Registry > Dreams UI is Somnia's design system, distributed as a public shadcn-style component registry. Components are copied into your repo as source via the shadcn CLI - there is no versioned npm package. ## Setup Verified against shadcn CLI 4.x. Run every command non-interactively (the flags below skip prompts that otherwise hang an agent or CI run). 1. You need a Next.js (App Router) app with Tailwind CSS v4. Other frameworks are unsupported. Create one with: npx create-next-app@latest my-app (accept the TypeScript + Tailwind + App Router defaults). 2. Initialise shadcn with the Radix base - it is the configuration these components are built and tested against. Do not use `-b base` or `-b aria`. npx shadcn@latest init -b radix -p nova --no-monorepo -y 3. Register the registry in components.json: "registries": { "@dreams-ui": "https://ui.somnia.network/r/{name}.json" } 4. Install items one at a time, and pass `-y -o` so the CLI never stops on a confirmation prompt (without `-o` it blocks on the utils.ts overwrite): npx shadcn@latest add @dreams-ui/ -y -o Install per item rather than in one batch - a single failed item aborts a whole batch. Transitive dependencies (components, hooks, lib, theme) resolve automatically. 5. Add `@import "./dreams-ui-theme.css";` to your global stylesheet once - the CLI writes the file but cannot merge the import. 6. Wrap your root layout in the theme provider: {children}. The theme keeps pages on the dark surface on its own - no extra utility classes needed. ## Agent skill Install the Dreams UI skill into your repo for detailed usage rules, gotchas, and the full catalog: npx shadcn add @dreams-ui/skill This writes .claude/skills/dreams-ui/SKILL.md. The same content is served at https://ui.somnia.network/r/skill.md. ## Project conventions Building a whole project (not just installing components)? Read https://ui.somnia.network/company-claude.md - project structure, code style, and Dreams UI usage rules for AI agents. ## Storybook Interactive component previews live at https://storybook.somnia.network - each component's stories are also embedded on its https://ui.somnia.network/components/ page. ## UI components - [accordion](https://ui.somnia.network/r/accordion.json): Expandable accordion built on Radix Accordion. - [alert](https://ui.somnia.network/r/alert.json): Callout alert with severity variants, icon, title, and description. - [badge](https://ui.somnia.network/r/badge.json): Small label badge with color variants and optional icons. - [blobs](https://ui.somnia.network/r/blobs.json): Animated gradient blob background (simplex-noise driven). - [border-trail](https://ui.somnia.network/r/border-trail.json): Animated light-trail border effect for highlighting a container. - [breadcrumb](https://ui.somnia.network/r/breadcrumb.json): Breadcrumb navigation trail. - [button](https://ui.somnia.network/r/button.json): Action button with variants (primary/secondary/ghost/brand/semantic), sizes, icons, and asChild polymorphism. - [card](https://ui.somnia.network/r/card.json): Surface card with header, title, description, content, and footer parts. - [carousel](https://ui.somnia.network/r/carousel.json): Swipeable carousel built on Embla with prev/next controls. - [charts](https://ui.somnia.network/r/charts.json): Recharts wrapper themed with Dreams UI tokens (container, tooltip, legend). - [checkbox](https://ui.somnia.network/r/checkbox.json): Checkbox with label and error state, built on Radix Checkbox. - [code-block](https://ui.somnia.network/r/code-block.json): Syntax-highlighted code block (Shiki) with copy button and optional window bar. - [collapsible](https://ui.somnia.network/r/collapsible.json): Collapsible content region built on Radix Collapsible. - [container](https://ui.somnia.network/r/container.json): Layout container with max-width, centering, and horizontal padding. - [copyable-address](https://ui.somnia.network/r/copyable-address.json): Blockchain address display with truncation and copy-to-clipboard. - [divider](https://ui.somnia.network/r/divider.json): Horizontal rule divider. - [dropzone](https://ui.somnia.network/r/dropzone.json): Drag-and-drop file upload area built on react-dropzone. - [empty-state](https://ui.somnia.network/r/empty-state.json): Empty-state placeholder with icon, message, and optional action. - [external-entity-link-interceptor](https://ui.somnia.network/r/external-entity-link-interceptor.json): Intercepts clicks on external-domain links and shows a confirmation modal before navigating. - [field](https://ui.somnia.network/r/field.json): Form field layout primitives (label + control + helper text rows). - [file-input](https://ui.somnia.network/r/file-input.json): File input field with label and helper text. - [footer](https://ui.somnia.network/r/footer.json): Site footer with brand logo, link columns, and social accounts. - [helper-text](https://ui.somnia.network/r/helper-text.json): Form helper/error text shown below inputs. - [hero-animated-text](https://ui.somnia.network/r/hero-animated-text.json): Hero heading with staggered per-word text animation. - [infinite-slider](https://ui.somnia.network/r/infinite-slider.json): Infinitely looping horizontal marquee slider for logos or cards. - [info-icon](https://ui.somnia.network/r/info-icon.json): Info icon that shows a tooltip on hover. - [input](https://ui.somnia.network/r/input.json): Text input with error state and helper text. - [label](https://ui.somnia.network/r/label.json): Form label rendered through Typography with disabled-state styling. - [loader](https://ui.somnia.network/r/loader.json): Loading spinner. - [modal](https://ui.somnia.network/r/modal.json): Dialog modal built on Radix Dialog with header, footer, title, and description parts. - [navigation](https://ui.somnia.network/r/navigation.json): Responsive site navigation bar with links, mobile menu, and social accounts. - [not-found-page](https://ui.somnia.network/r/not-found-page.json): Ready-made 404 page section for Next.js not-found routes. - [pagination](https://ui.somnia.network/r/pagination.json): Page navigation with numbered pages and prev/next controls. - [progress](https://ui.somnia.network/r/progress.json): Progress bar. - [qr-code](https://ui.somnia.network/r/qr-code.json): QR code renderer. - [scroll-area](https://ui.somnia.network/r/scroll-area.json): Custom-styled scrollable area built on Radix ScrollArea. - [segmented-control](https://ui.somnia.network/r/segmented-control.json): Segmented button group for switching between options. - [select](https://ui.somnia.network/r/select.json): Select dropdown built on Radix Select with label and helper text. - [separator](https://ui.somnia.network/r/separator.json): Separator line with optional label text. - [skeleton](https://ui.somnia.network/r/skeleton.json): Skeleton loading placeholder. - [somnia-rank](https://ui.somnia.network/r/somnia-rank.json): Somnia rank medal graphics (bronze, silver, gold). - [sponsored-badge](https://ui.somnia.network/r/sponsored-badge.json): Gradient 'Sponsored' badge. - [status-badge](https://ui.somnia.network/r/status-badge.json): Live / ending-soon / ended status badge. - [switch](https://ui.somnia.network/r/switch.json): Toggle switch with label, built on Radix Switch. - [table](https://ui.somnia.network/r/table.json): Styled table parts (header, body, row, cell) using Typography. - [tabs](https://ui.somnia.network/r/tabs.json): Tabs built on Radix Tabs with default and line variants. - [textarea](https://ui.somnia.network/r/textarea.json): Multiline text input with error state and helper text. - [toast](https://ui.somnia.network/r/toast.json): Toast notifications via Sonner (Toaster plus toast helpers). - [tooltip](https://ui.somnia.network/r/tooltip.json): Tooltip built on Radix Tooltip. - [typography](https://ui.somnia.network/r/typography.json): Text component enforcing the design system type scale (display, heading, label, paragraph variants). Use instead of raw p/span/h* tags. ## Blocks - [blob-hero](https://ui.somnia.network/r/blob-hero.json): Hero section with animated blob background. - [faq](https://ui.somnia.network/r/faq.json): FAQ section rendering question/answer items in an accordion. - [info-card](https://ui.somnia.network/r/info-card.json): Content card with icon, title, and description. - [profile-card](https://ui.somnia.network/r/profile-card.json): User profile card with avatar, bio, wallet address, and social handles. - [statistic-card](https://ui.somnia.network/r/statistic-card.json): Statistic display card with icon, value, and label. - [title](https://ui.somnia.network/r/title.json): Section title block with optional icon and description. ## Lib and icons - [cache-local-storage](https://ui.somnia.network/r/cache-local-storage.json): localStorage cache helpers with TTL expiry. - [color-utils](https://ui.somnia.network/r/color-utils.json): Resolves a CSS variable or color value to its computed RGB/hex value. - [constants-social-accounts](https://ui.somnia.network/r/constants-social-accounts.json): Default Somnia social account links. - [cookies](https://ui.somnia.network/r/cookies.json): Cookie expiration in days (default: 30). Use -1 for infinite (10 years). - [icons-core](https://ui.somnia.network/r/icons-core.json): Hugeicons free icon set re-export (stroke-rounded). - [icons-icon](https://ui.somnia.network/r/icons-icon.json): Icon wrapper component (re-exports HugeiconsIcon) used by all icon-bearing components. - [types-social-accounts](https://ui.somnia.network/r/types-social-accounts.json): Types for social account links. - [utils](https://ui.somnia.network/r/utils.json): cn() class-merge helper and shared formatting utilities. ## Logos, assets, and providers - [dreamdex-logomark](https://ui.somnia.network/r/dreamdex-logomark.json): DreamDEX logomark SVG. - [dreamdex-wordmark](https://ui.somnia.network/r/dreamdex-wordmark.json): DreamDEX wordmark SVG. - [frax-icon](https://ui.somnia.network/r/frax-icon.json): Frax brand icon SVG. - [hacken-badge](https://ui.somnia.network/r/hacken-badge.json): Hacken audit badge SVG. - [logo-full](https://ui.somnia.network/r/logo-full.json): Full brand logo (logomark plus wordmark) with brand switching. - [logo-icon](https://ui.somnia.network/r/logo-icon.json): Brand logomark with brand switching (somnia, dreamdex, prophecy). - [logo-text](https://ui.somnia.network/r/logo-text.json): Brand wordmark with brand switching. - [prophecy-logomark](https://ui.somnia.network/r/prophecy-logomark.json): Prophecy logomark SVG. - [prophecy-wordmark](https://ui.somnia.network/r/prophecy-wordmark.json): Prophecy wordmark SVG. - [somnia-logomark](https://ui.somnia.network/r/somnia-logomark.json): Somnia logomark SVG. - [somnia-theme-provider](https://ui.somnia.network/r/somnia-theme-provider.json): Renders the themed element with the design system font. Use inside in the root layout. - [somnia-wordmark](https://ui.somnia.network/r/somnia-wordmark.json): Somnia wordmark SVG. ## Hooks - [use-breakpoint](https://ui.somnia.network/r/use-breakpoint.json): Hook to get Tailwind breakpoint values. - [use-cookie](https://ui.somnia.network/r/use-cookie.json): Hook that provides easy-to-use cookie operations in client components. - [use-copy](https://ui.somnia.network/r/use-copy.json): Hook for copying text to clipboard with success/error states. - [use-debounce](https://ui.somnia.network/r/use-debounce.json): Debounce a value - returns it only after it stops changing for the given delay. - [use-measure](https://ui.somnia.network/r/use-measure.json): Hook for measuring element dimensions using ResizeObserver. - [use-scrollable-area](https://ui.somnia.network/r/use-scrollable-area.json): Track whether an element overflows and enable drag-to-scroll behavior. - [use-window-size](https://ui.somnia.network/r/use-window-size.json): Track the current window dimensions (updates on resize).