# Cronus UI

> Cronus UI is a product UI system: 182 React components across 9 categories (263 live examples), 74 composed blocks (151 variants) across 20 families, and 20 OSS app templates. Themeable tokens, a runtime theming engine (Radix + CVA + Tailwind v4), a shadcn-style registry, and a compose path that turns validated blocks into apps — grow with add-page, then `upgrade --all`. Install from npm (`@cronus-ui/ui`) or copy source with `npx cronus-ui add <slug>`. Canonical start: `npx create-cronus-app my-app --template saas`. An MCP server (`npx -y cronus-ui-mcp` over stdio, or Streamable HTTP at https://aicronus.com/mcp) lets coding agents search the live registry — and, on stdio, install, compose, add pages, and theme.

Every page is also mirrored as plain markdown under https://aicronus.com/llms/. The whole corpus in one file: https://aicronus.com/llms-full.txt.

## Site

- [Home](https://aicronus.com/): Product overview and the compose loop.
- [Components](https://aicronus.com/components): 182 components across 9 categories.
- [Blocks](https://aicronus.com/blocks): 74 composed sections, 151 variants.
- [Templates](https://aicronus.com/templates): 20 OSS app templates for create-cronus-app.
- [Themes](https://aicronus.com/themes): Aurora, Neutral, Midnight, Sunset, Emerald — live token playground.
- [Create](https://aicronus.com/create): Visual preset builder; emits setup snippets.
- [Stack Builder](https://aicronus.com/stack): Pick web, data, auth, UI, AI, MCP, deploy; export a scaffold command.
- [Changelog](https://aicronus.com/changelog): Released, in-development, and planned changes.
- [Sponsor](https://aicronus.com/sponsor): Support the project.
- [Full catalog](https://aicronus.com/llms-full.txt): Every guide, component, and block doc inlined.
- [shadcn registry](https://aicronus.com/r/registry.json): Install with `npx shadcn@latest add https://aicronus.com/r/button.json`.

## Documentation

- [Introduction](https://aicronus.com/docs): Product UI system: compose a themed SaaS from validated blocks, dual distribution, live theme.
- [Getting started](https://aicronus.com/docs/getting-started): Zero to a composed SaaS: scaffold, provider, theme, add-page, upgrade, or init into an existing app.
- [Compare](https://aicronus.com/docs/compare): Cronus UI next to shadcn/ui, HeroUI, and Aceternity — distribution, theming, compose, and a11y gates.
- [Components](https://aicronus.com/components): Browse the production component catalog.
- [Blocks](https://aicronus.com/docs/blocks): Copy-paste composed sections, the families, and the add flow.
- [Installation](https://aicronus.com/docs/installation): Scaffold a SaaS, use Create, the CLI, or an existing app.
- [Theming](https://aicronus.com/docs/theming): Tokens, presets, runtime overrides, and dark mode.
- [Design](https://aicronus.com/docs/design): DESIGN.md — visual taste for agents: Aurora vs Neutral, looks, one primary CTA.
- [Styling](https://aicronus.com/docs/styling): Override, extend, and re-skin components with className, CVA, and data-slot.
- [CLI](https://aicronus.com/docs/cli): init, add, compose, add-page, diff, upgrade, theme, mcp init, ai.
- [MCP](https://aicronus.com/docs/mcp): Hosted Streamable HTTP at /mcp plus local stdio. Snippets for Claude, Cursor, VS Code, Codex, Grok, OpenCode, Zed, v0, Lovable, Bolt.
- [Stack Builder](https://aicronus.com/docs/stack-builder): Stack picker with a runnable default scaffold command, KICKOFF.md, and stack.json schema.
- [RTL](https://aicronus.com/docs/rtl): Direction, spacing, keyboard behavior, and locale checks.
- [Registry](https://aicronus.com/docs/registry): How registry items are generated, resolved, and copied.
- [Forms](https://aicronus.com/docs/forms): React Hook Form, Zod, accessible fields, and validation states.
- [Charts](https://aicronus.com/docs/charts): ChartContainer catalog: area, line, live, bar, donut, radar, gauge, composed, candle, funnel, scatter, sankey, P/L.
- [Recipes](https://aicronus.com/docs/recipes): Copy-paste patterns: validated forms, theme toggle, toasts, and more.
- [Accessibility](https://aicronus.com/docs/accessibility): Keyboard, focus, screen reader, contrast, and framework notes.
- [Frameworks](https://aicronus.com/docs/frameworks): Next.js, Vite, TanStack Start, React Router, Astro, and Laravel.
- [Changelog](https://aicronus.com/changelog): Released, in-development, and planned changes.

## Components (182)

182 installable components, 263 documented examples. Each line is a catalog page; the number in parentheses is how many live examples it ships. Install with `npx cronus-ui add <slug>`. Markdown API: https://aicronus.com/llms/components/<slug>.md.

### Buttons (9)

- [Button (4)](https://aicronus.com/components/button): Clickable action with variants, sizes and asChild.
- [Animated Button (1)](https://aicronus.com/components/animated-button): Motion-powered button with spring feedback.
- [Toggle (3)](https://aicronus.com/components/toggle): A two-state on/off button.
- [Toggle Group (2)](https://aicronus.com/components/toggle-group): A set of toggles, single or multiple.
- [Copy Button (2)](https://aicronus.com/components/copy-button): Copy text to the clipboard with success feedback.
- [Button Group (2)](https://aicronus.com/components/button-group): Attaches a row or column of buttons into one segmented unit.
- [Fab (2)](https://aicronus.com/components/fab): Floating action button with an optional speed-dial of actions.
- [Split Button (3)](https://aicronus.com/components/split-button): Primary action fused to a dropdown of secondary actions.
- [Mode Toggle (3)](https://aicronus.com/components/mode-toggle): Animated sun ⇄ moon light/dark toggle icon-button.

### Forms (30)

- [Input (3)](https://aicronus.com/components/input): Single-line text field with invalid state.
- [Input Group (2)](https://aicronus.com/components/input-group): A composable wrapper that fuses prefix/suffix addons to an Input into one bordered field.
- [Password Input (2)](https://aicronus.com/components/password-input): A password field with a show/hide toggle and an optional strength meter.
- [Textarea (2)](https://aicronus.com/components/textarea): Multi-line auto-sizing text field.
- [Label (1)](https://aicronus.com/components/label): Accessible label tied to a control.
- [Checkbox (2)](https://aicronus.com/components/checkbox): Binary choice with an indicator.
- [Animated Checkbox (2)](https://aicronus.com/components/animated-checkbox): Checkbox with a spring check mark and a strike-through label.
- [Radio Group (1)](https://aicronus.com/components/radio-group): Single choice among options.
- [Switch (1)](https://aicronus.com/components/switch): Toggle a setting on or off.
- [Select (1)](https://aicronus.com/components/select): Composable dropdown with groups.
- [Combobox (1)](https://aicronus.com/components/combobox): Searchable single-select with autocomplete.
- [Multi Select (2)](https://aicronus.com/components/multi-select): Pick multiple values shown as removable chips.
- [Tags Input (1)](https://aicronus.com/components/tags-input): Type and commit free-form tags as removable chips.
- [Slider (2)](https://aicronus.com/components/slider): Pick a value or a range.
- [Field (2)](https://aicronus.com/components/field): Label + description + error layout.
- [Form (1)](https://aicronus.com/components/form): react-hook-form + zod integration.
- [Input OTP (1)](https://aicronus.com/components/input-otp): One-time-code input with slots.
- [File Dropzone (1)](https://aicronus.com/components/file-dropzone): Drag-and-drop file upload area.
- [Number Input (2)](https://aicronus.com/components/number-input): Numeric field with steppers, clamping and keyboard control.
- [Autocomplete (2)](https://aicronus.com/components/autocomplete): Free-text input with sync or async suggestions.
- [Stepper (1)](https://aicronus.com/components/stepper): Multi-step wizard progress with optional clickable steps.
- [Rich Text Editor (1)](https://aicronus.com/components/rich-text-editor): Tiptap WYSIWYG editor with a formatting toolbar and HTML output.
- [Rating (2)](https://aicronus.com/components/rating): Star rating input — interactive or read-only, with optional half stars.
- [Color Picker (1)](https://aicronus.com/components/color-picker): OKLCH-native color input on a popover, with an area, hue slider and swatches.
- [Currency Input (3)](https://aicronus.com/components/currency-input): Money field with a currency selector and live thousand/decimal formatting.
- [Phone Input (3)](https://aicronus.com/components/phone-input): International phone field with a country selector, emitting E.164.
- [Credit Card Input (3)](https://aicronus.com/components/credit-card-input): Card number, expiry and CVC with brand detection and Luhn validation.
- [Floating Label Input (3)](https://aicronus.com/components/floating-label-input): Text field whose label floats above on focus or when filled.
- [Signature Pad (2)](https://aicronus.com/components/signature-pad): Canvas signature input with smoothed strokes, undo/clear, and data-URL output.
- [Chip (3)](https://aicronus.com/components/chip): Interactive filter/selection chip — toggleable, dismissible, with icon and avatar slots.

### Data Display (28)

- [Avatar (2)](https://aicronus.com/components/avatar): User image with a fallback.
- [Avatar Group (2)](https://aicronus.com/components/avatar-group): Overlapping avatar stack with a "+N" overflow chip.
- [Badge (2)](https://aicronus.com/components/badge): Small status / category label.
- [Card (1)](https://aicronus.com/components/card): Surface that groups related content.
- [Table (1)](https://aicronus.com/components/table): Styled semantic table primitives.
- [Data Table (10)](https://aicronus.com/components/data-table): TanStack table with sorting, search & faceted filters, pagination, row selection with bulk actions, column visibility, density, and loading/empty/error states.
- [Metric (1)](https://aicronus.com/components/metric): KPI value with trend delta.
- [Sparkline (2)](https://aicronus.com/components/sparkline): Tiny inline line, area, or bar trend chart for stat tiles.
- [Masonry (1)](https://aicronus.com/components/masonry): A responsive CSS multi-column masonry layout for cards and images.
- [Comparison Slider (1)](https://aicronus.com/components/comparison-slider): Drag a divider to reveal a before/after comparison of two layers.
- [Heatmap (1)](https://aicronus.com/components/heatmap): A calendar-style contribution heatmap that buckets daily activity into levels.
- [Kbd (1)](https://aicronus.com/components/kbd): Keyboard key hint.
- [Empty (1)](https://aicronus.com/components/empty): Empty-state placeholder.
- [Separator (1)](https://aicronus.com/components/separator): Visual divider between content.
- [Skeleton (1)](https://aicronus.com/components/skeleton): Loading placeholder shimmer.
- [Scroll Area (1)](https://aicronus.com/components/scroll-area): Custom-styled scroll container.
- [Code Block (2)](https://aicronus.com/components/code-block): Source snippet with header, line numbers and copy.
- [Code Tabs (2)](https://aicronus.com/components/code-tabs): Tabbed code snippets with per-tab copy and a localStorage-synced tab choice.
- [Collapsible (1)](https://aicronus.com/components/collapsible): Animated show/hide for a single section.
- [Aspect Ratio (2)](https://aicronus.com/components/aspect-ratio): Constrain content to a fixed width-to-height ratio.
- [Tree View (1)](https://aicronus.com/components/tree-view): Data-driven, accessible hierarchy with keyboard navigation.
- [Timeline (1)](https://aicronus.com/components/timeline): Vertical activity feed with dots, connectors, timestamps and descriptions.
- [Kanban (1)](https://aicronus.com/components/kanban): Drag-and-drop board with cards that reorder and move across columns.
- [Json Viewer (2)](https://aicronus.com/components/json-viewer): Collapsible JSON tree with type-colored values and per-row copy.
- [Status Dot (3)](https://aicronus.com/components/status-dot): Presence dot with pulse, optional label, and avatar-overlay anchoring.
- [Image Zoom (3)](https://aicronus.com/components/image-zoom): Inline hover/press zoom that magnifies product imagery and pans with the cursor.
- [Video Player (3)](https://aicronus.com/components/video-player): Native video wrapped in token-styled custom controls: seek, volume, playback speed, and fullscreen.
- [Description List (4)](https://aicronus.com/components/description-list): Semantic dl/dt/dd pairs in stacked, horizontal, or grid-card layouts for detail panes and order summaries.

### Feedback (7)

- [Alert (3)](https://aicronus.com/components/alert): Inline callout banner with semantic variants.
- [Banner (2)](https://aicronus.com/components/banner): Dismissible full-width announcement / promo bar with a CTA.
- [Spinner (1)](https://aicronus.com/components/spinner): Indeterminate loading indicator.
- [Progress (1)](https://aicronus.com/components/progress): Determinate progress bar.
- [Usage Meter (2)](https://aicronus.com/components/usage-meter): Linear or circular quota / billing usage indicator with severity tones.
- [Toast (1)](https://aicronus.com/components/sonner): Transient notifications via Sonner.
- [Alert Dialog (1)](https://aicronus.com/components/alert-dialog): Confirm a destructive action.

### Overlays (13)

- [Dialog (1)](https://aicronus.com/components/dialog): Modal dialog with header and footer.
- [Sheet (1)](https://aicronus.com/components/sheet): Side-anchored panel.
- [Drawer (1)](https://aicronus.com/components/drawer): Bottom drawer (vaul).
- [Popover (1)](https://aicronus.com/components/popover): Floating content anchored to a trigger.
- [Notification Center (1)](https://aicronus.com/components/notification-center): Bell-trigger inbox with unread badge and a scrollable list.
- [Hover Card (1)](https://aicronus.com/components/hover-card): Preview content on hover.
- [Tooltip (1)](https://aicronus.com/components/tooltip): Short hint on hover or focus.
- [Dropdown Menu (1)](https://aicronus.com/components/dropdown-menu): Actions menu with submenus.
- [Context Menu (1)](https://aicronus.com/components/context-menu): Right-click menu with items, checkboxes and submenus.
- [Command (1)](https://aicronus.com/components/command): ⌘K command palette (cmdk).
- [Lightbox (1)](https://aicronus.com/components/lightbox): Full-screen image gallery with thumbnails and keyboard navigation.
- [Confirmation Dialog (3)](https://aicronus.com/components/confirmation-dialog): Ergonomic AlertDialog wrapper for destructive actions with async confirm.
- [Invite Dialog (2)](https://aicronus.com/components/invite-dialog): Ergonomic Dialog for inviting a member by email and role.

### Navigation (12)

- [Tabs (1)](https://aicronus.com/components/tabs): Switch between panels.
- [Accordion (1)](https://aicronus.com/components/accordion): Collapsible content sections.
- [Breadcrumb (1)](https://aicronus.com/components/breadcrumb): Hierarchical page trail.
- [Pagination (1)](https://aicronus.com/components/pagination): Navigate between pages.
- [Navigation Menu (1)](https://aicronus.com/components/navigation-menu): Horizontal menu bar with disclosure panels.
- [Menubar (1)](https://aicronus.com/components/menubar): Desktop-style menu bar with File / Edit / View menus.
- [Sidebar (1)](https://aicronus.com/components/sidebar): Composable, collapsible app sidebar.
- [App Shell (1)](https://aicronus.com/components/app-shell): Sidebar + header + content layout in one step.
- [Workspace Switcher (2)](https://aicronus.com/components/workspace-switcher): Compact workspace/org switcher for app chrome.
- [Resizable (1)](https://aicronus.com/components/resizable): Draggable split panes for resizable layouts.
- [Toolbar (1)](https://aicronus.com/components/toolbar): An accessible button toolbar with roving focus and grouped controls.
- [Table Of Contents (1)](https://aicronus.com/components/table-of-contents): Scrollspy on-this-page nav with an animated active indicator.

### Date & Time (6)

- [Calendar (1)](https://aicronus.com/components/calendar): Date grid (react-day-picker).
- [Countdown (2)](https://aicronus.com/components/countdown): Ticking day/hour/minute/second tiles counting down to a target.
- [Date Picker (1)](https://aicronus.com/components/date-picker): Popover-based date selection.
- [Date Range Picker (2)](https://aicronus.com/components/date-range-picker): Start/end date selection with presets.
- [Scheduler (1)](https://aicronus.com/components/scheduler): Month-view event calendar that lays events onto day cells.
- [Time Picker (3)](https://aicronus.com/components/time-picker): Popover hour/minute (and optional second) selection, 12h or 24h.

### Charts (18)

- [Chart (2)](https://aicronus.com/components/chart): Low-level recharts primitive: ChartContainer, tooltip, cursor, legend.
- [Area Chart](https://aicronus.com/components/area-chart): Time series with a filled region. Default and Motion variants.
- [Line Chart](https://aicronus.com/components/line-chart): Multi-series line. Default and Motion variants.
- [Live Line Chart](https://aicronus.com/components/live-line-chart): Streaming line. Default and Motion variants.
- [Bar Chart (4)](https://aicronus.com/components/bar-chart): Grouped or stacked columns. Default and Motion variants.
- [Composed Chart](https://aicronus.com/components/composed-chart): Area, bar, and line on one axis. Default and Motion variants.
- [Candlestick Chart](https://aicronus.com/components/candlestick-chart): OHLC candles. Default and Motion variants.
- [Funnel Chart](https://aicronus.com/components/funnel-chart): Stage drop-off. Default and Motion variants.
- [Gauge Chart](https://aicronus.com/components/gauge-chart): Radial score. Default and Motion variants.
- [Pie Chart](https://aicronus.com/components/pie-chart): Full pie. Default and Motion variants.
- [Ring Chart](https://aicronus.com/components/ring-chart): Donut with a hub total. Default and Motion variants.
- [Radar Chart](https://aicronus.com/components/radar-chart): Polar comparison. Default and Motion variants.
- [Scatter Chart](https://aicronus.com/components/scatter-chart): Two-axis scatter. Default and Motion variants.
- [Sankey Chart](https://aicronus.com/components/sankey-chart): Flow between nodes. Default and Motion variants.
- [Profit Loss Chart](https://aicronus.com/components/profit-loss-chart): Series split at zero. Default and Motion variants.
- [Choropleth Chart](https://aicronus.com/components/choropleth-chart): Region intensity map. Default and Motion variants.
- [Sunburst Chart](https://aicronus.com/components/sunburst-chart): Hierarchical rings. Default and Motion variants.
- [Heatmap Chart](https://aicronus.com/components/heatmap-chart): Calendar heatmap. Default and Motion variants.

### Premium & Brand (59)

- [Glass Card (1)](https://aicronus.com/components/glass-card): Frosted-glass surface.
- [Gradient Border (2)](https://aicronus.com/components/gradient-border): Aurora gradient border.
- [Gradient Text (1)](https://aicronus.com/components/gradient-text): Gradient-clipped text.
- [Spotlight Card (1)](https://aicronus.com/components/spotlight-card): Cursor-following spotlight.
- [Scroll Progress (1)](https://aicronus.com/components/scroll-progress): A bar or ring that tracks how far a scroll container has been read.
- [Scroll Nav (1)](https://aicronus.com/components/scroll-nav): Sticky sidebar that highlights the section in view as you scroll.
- [Aurora Background (1)](https://aicronus.com/components/aurora-background): Animated aurora backdrop.
- [Logo Carousel (1)](https://aicronus.com/components/logo-carousel): Animated hero logo carousel with reduced-motion fallback.
- [Marquee (2)](https://aicronus.com/components/marquee): Seamless infinite scroller for logos, testimonials, or a ticker.
- [Morphing Popover (2)](https://aicronus.com/components/morphing-popover): Trigger that morphs into a non-modal dialog surface.
- [Shimmer (1)](https://aicronus.com/components/shimmer): Premium shimmer surface.
- [Reveal (1)](https://aicronus.com/components/reveal): Scroll-into-view reveal wrapper.
- [Animated Number (1)](https://aicronus.com/components/animated-number): Number that springs to its target — counts up or down.
- [Number Flow (2)](https://aicronus.com/components/number-flow): Formatted number whose digits roll to each new value.
- [Carousel (1)](https://aicronus.com/components/carousel): Scroll-snap slide gallery with prev/next, dots and keyboard nav.
- [Segmented Control (1)](https://aicronus.com/components/segmented-control): Single-select toggle row with a thumb that slides between options.
- [Text Effect (1)](https://aicronus.com/components/text-effect): Reveal text by staggering words or characters (fade / blur / slide).
- [Slide Up Text (4)](https://aicronus.com/components/slide-up-text): Text that slides up from below, staggered by word, character, or line.
- [Images Badge (1)](https://aicronus.com/components/images-badge): A folder badge that fans preview images on hover.
- [3 D Globe (1)](https://aicronus.com/components/globe-3d): A textured 3D globe with avatar pins, orbit, and auto-rotate.
- [Frame (2)](https://aicronus.com/components/frame): Browser/window chrome that frames a screenshot or product mockup.
- [Dock (1)](https://aicronus.com/components/dock): A macOS-style icon dock that magnifies items as the pointer nears.
- [Border Beam (3)](https://aicronus.com/components/border-beam): An animated light beam that travels around an element's border.
- [Flip Card (3)](https://aicronus.com/components/flip-card): A 3D card that flips between a front and a back face.
- [Tilt Card (3)](https://aicronus.com/components/tilt-card): A card that tilts in 3D toward the pointer, with an optional glare.
- [Magnetic (3)](https://aicronus.com/components/magnetic): Wrapper whose content is gently pulled toward the cursor.
- [Orbit (2)](https://aicronus.com/components/orbit): Icons or avatars revolving around a nucleus on pure-CSS rings.
- [Terminal (2)](https://aicronus.com/components/terminal): Animated terminal window that types a scripted shell session.
- [Ripple (1)](https://aicronus.com/components/ripple): Concentric rings that expand from the centre of a surface.
- [Meteors (1)](https://aicronus.com/components/meteors): A field of shooting-star trails drifting across a surface.
- [Dot Pattern (1)](https://aicronus.com/components/dot-pattern): A faint SVG dotted field behind content.
- [Grid Pattern (1)](https://aicronus.com/components/grid-pattern): A faint SVG grid behind content.
- [Retro Grid (1)](https://aicronus.com/components/retro-grid): A receding perspective grid floor.
- [Noise (1)](https://aicronus.com/components/noise): A still film-grain overlay.
- [Light Rays (1)](https://aicronus.com/components/light-rays): Volumetric light shafts fanning across a surface.
- [Progressive Blur (1)](https://aicronus.com/components/progressive-blur): A stacked backdrop-blur that fades content out toward an edge.
- [Flickering Grid (1)](https://aicronus.com/components/flickering-grid): A grid of cells that independently flicker.
- [Star Border (1)](https://aicronus.com/components/star-border): Two sparkle heads chasing each other around a border.
- [Shiny Text (1)](https://aicronus.com/components/shiny-text): A metallic sheen that sweeps across live text.
- [Highlighter (1)](https://aicronus.com/components/highlighter): A marker stroke that draws in behind a phrase.
- [Spinning Text (1)](https://aicronus.com/components/spinning-text): A phrase laid out around a slowly rotating circle.
- [Sparkles Text (1)](https://aicronus.com/components/sparkles-text): Twinkling sparkles around a phrase.
- [Typing Text (1)](https://aicronus.com/components/typing-text): A typewriter that types one or more phrases with a blinking caret.
- [Word Rotate (1)](https://aicronus.com/components/word-rotate): Cycles through a list of words with a vertical swap.
- [Scramble Text (1)](https://aicronus.com/components/scramble-text): Resolves a phrase by cycling random glyphs until it locks in.
- [Glare Hover (1)](https://aicronus.com/components/glare-hover): A diagonal glare that tracks the pointer across a surface.
- [Click Spark (1)](https://aicronus.com/components/click-spark): Emits a burst of sparks from the pointer on click.
- [Animated List (1)](https://aicronus.com/components/animated-list): Staggers list items in with a short rise and fade.
- [Card Stack (1)](https://aicronus.com/components/card-stack): A fanned stack of cards that cycles on click or keyboard.
- [Pill Nav (1)](https://aicronus.com/components/pill-nav): A compact nav row whose active item is marked by a sliding pill.
- [Expandable Tabs (1)](https://aicronus.com/components/expandable-tabs): Icon tabs where the active item expands to reveal its label.
- [Explore Nav (1)](https://aicronus.com/components/explore-nav): Product navbar that morphs from a compact bar into a family carousel.
- [Bouncy Accordion (1)](https://aicronus.com/components/bouncy-accordion): Stacked accordion that springs open with a gap and rounded card.
- [Token Swap (1)](https://aicronus.com/components/token-swap): Aave-style swap: animated amount, USD conversion, Max and Clear.
- [Receive Button (1)](https://aicronus.com/components/receive-button): Family Receive pill that morphs into a confirmation card.
- [Family Wallet (1)](https://aicronus.com/components/family-wallet): Family sign-in drawer: socials, email/phone/passkey, OTP, waiting orb, wallets.
- [Dynamic Island (1)](https://aicronus.com/components/dynamic-island): A compact live-activity pill that morphs between views.
- [Confetti (1)](https://aicronus.com/components/confetti): Canvas confetti that bursts from the pointer.
- [Particles (1)](https://aicronus.com/components/particles): A calm 2D particle field that drifts behind content.

## Blocks (74)

74 composed sections, 151 variants across 20 families. Install the default with `npx cronus-ui add <slug>`; a non-default look is `npx cronus-ui add <slug>--<variant>` or `add-page --blocks <slug>=<variant>`. Markdown API: https://aicronus.com/llms/blocks/<slug>.md.

### Auth (5)

- [Login (4)](https://aicronus.com/blocks/login): A centered authentication card with email + social login. Variants: `classic`, `split`, `social-first`, `minimal`.
- [Sign Up (4)](https://aicronus.com/blocks/signup): A create-account card with email, password, terms, and social sign-up. Variants: `classic`, `split`, `split-proof`, `with-plan`.
- [Forgot Password (4)](https://aicronus.com/blocks/forgot-password): A password reset flow with an email request, a sent confirmation, and a new-password form. Variants: `request`, `split`, `sent`, `reset`.
- [Two-Factor Code (2)](https://aicronus.com/blocks/otp): A two-factor authentication card with a six-digit one-time code entry. Variants: `classic`, `split`.
- [Magic Link (3)](https://aicronus.com/blocks/magic-link): A passwordless email link flow with a request and a sent confirmation. Variants: `request`, `split`, `sent`.

### Account (4)

- [Account security (2)](https://aicronus.com/blocks/account-security): Two-factor authentication setup and password management with a danger zone. Variants: `two-factor`, `password`.
- [Sessions (3)](https://aicronus.com/blocks/sessions): Active device sessions with per-session and bulk revoke, plus an empty sessions list. Variants: `list`, `empty`, `table`.
- [API keys (3)](https://aicronus.com/blocks/api-keys): API key management with masked secrets, scopes, a scoped create flow, and an empty keys list. Variants: `list`, `empty`, `create`.
- [Notification preferences (2)](https://aicronus.com/blocks/notification-preferences): Per-channel notification controls as a matrix or grouped toggle list. Variants: `matrix`, `simple`.

### Marketing (11)

- [Hero (4)](https://aicronus.com/blocks/hero): A centered marketing hero with eyebrow, headline, copy and CTAs. Variants: `centered`, `split`, `compact`, `atmosphere`.
- [Pricing (3)](https://aicronus.com/blocks/pricing): A three-tier pricing grid with a highlighted plan. Variants: `tiers`, `toggle`, `usage`.
- [Feature Matrix (1)](https://aicronus.com/blocks/feature-matrix): A plan-comparison matrix with grouped feature rows, per-plan checks and limits, and an elevated popular column that stacks into cards on mobile.
- [Feature Grid (2)](https://aicronus.com/blocks/feature-grid): A responsive grid of product features with icons. Variants: `cards`, `bento`.
- [Call to Action (3)](https://aicronus.com/blocks/cta): A bold gradient call-to-action banner. Variants: `classic`, `banner`, `split-visual`.
- [Testimonials (2)](https://aicronus.com/blocks/testimonials): Social proof with avatar trust line and a wall of customer testimonials. Variants: `marquee`, `grid`.
- [FAQ (2)](https://aicronus.com/blocks/faq): An accessible accordion of frequently asked questions. Variants: `accordion`, `split`.
- [Footer (3)](https://aicronus.com/blocks/footer): A full site footer with brand block, link columns, and a newsletter sign-up. Variants: `classic`, `mega`, `minimal`.
- [Navbar (3)](https://aicronus.com/blocks/navbar): A contained, rounded marketing navigation bar with brand mark and CTAs. Variants: `classic`, `centered`, `with-announcement`.
- [Changelog (1)](https://aicronus.com/blocks/changelog): A product release feed on a vertical timeline with version badges, dates, and typed Feature/Fix/Perf change rows.
- [Waitlist Hero (1)](https://aicronus.com/blocks/waitlist): A waitlist capture hero with an early-access pill, a gradient headline, an inline email form that swaps to a joined state, and avatar social proof.

### Content (4)

- [Blog (2)](https://aicronus.com/blocks/blog): Blog index layouts: a featured hero post with a responsive post grid, and an editorial list with larger typography. Variants: `grid`, `list`.
- [Blog post (2)](https://aicronus.com/blocks/blog-post): Article detail layouts with token-styled prose (headings, blockquote, inline code), author card, hero art, and a share row. Variants: `article`, `with-sidebar`.
- [Logo cloud (2)](https://aicronus.com/blocks/logo-cloud): Customer trust sections built from wordmark-style text logos in text-fg-tertiary — a quiet grid and a dual counter-scrolling marquee. Variants: `grid`, `marquee`.
- [About (2)](https://aicronus.com/blocks/about): Company about sections: mission story with stats, founder quote, and milestone timeline; plus a values card grid with a token-built culture collage. Variants: `story`, `values`.

### Application (3)

- [Stats Cards (4)](https://aicronus.com/blocks/stats): A dashboard row of KPI metric cards with trends. Variants: `kpi-grid`, `empty`, `compact-summary`, `pipeline-funnel`.
- [Settings Panel (2)](https://aicronus.com/blocks/settings): Account and workspace settings — profile and preferences, or name, slug, defaults, and a danger zone. Variants: `account`, `workspace`.
- [Team Members (2)](https://aicronus.com/blocks/team): A team list with avatars, roles and a menu. Variants: `list`, `empty`.

### Onboarding (3)

- [Welcome (2)](https://aicronus.com/blocks/welcome): A get-started welcome panel with quick-start actions. Variants: `start`, `complete`.
- [Setup Wizard (2)](https://aicronus.com/blocks/setup-wizard): A multi-step setup flow with a stepper and a form panel. Variants: `workspace`, `done`.
- [Setup Checklist (2)](https://aicronus.com/blocks/setup-checklist): A setup-progress checklist with a progress bar and per-item actions. Variants: `progress`, `complete`.

### Social (3)

- [Post Card (1)](https://aicronus.com/blocks/post-card): A social post with author, content, and engagement actions.
- [Comment Thread (1)](https://aicronus.com/blocks/comment-thread): A threaded comment list with a composer and a nested reply.
- [Profile Card (1)](https://aicronus.com/blocks/profile-card): A user profile card with a cover, stats, and a follow action.

### Dashboard (1)

- [Dashboard (2)](https://aicronus.com/blocks/dashboard): A full application shell with sidebar nav, KPI cards, a chart, and a table. Variants: `analytics`, `admin-overview`.

### Admin (4)

- [User management (3)](https://aicronus.com/blocks/user-management): Team member administration for a B2B SaaS workspace — a searchable directory table with role filter, status badges, per-user action menus and pagination, plus an empty directory and a card-grid variant for small teams. Variants: `table`, `empty`, `cards`.
- [Analytics (4)](https://aicronus.com/blocks/analytics): Admin analytics surfaces — KPI metrics with sparklines, a 30-day traffic trend and top pages/referrers breakdowns with progress bars, plus a cohort-retention engagement variant built from token-colored heat cells. Variants: `overview`, `period`, `empty`, `engagement`.
- [Kanban board (3)](https://aicronus.com/blocks/kanban-board): A sprint board with four columns of labeled cards — Badge labels, assignee avatar stacks, due dates and comment counts — plus an empty board and a dense compact variant with per-column WIP limits and at-limit indicators. Variants: `default`, `empty`, `compact`.
- [Audit log (3)](https://aicronus.com/blocks/audit-log): A security audit trail — a grouped-by-day timeline feed with actor avatars, emphasized actor/object names and severity badges, plus an empty log and a filterable table variant with event-type badges, actors, IPs and expandable detail hints. Variants: `timeline`, `empty`, `table`.

### Billing (5)

- [Billing (3)](https://aicronus.com/blocks/billing): Subscription management, usage meters, invoices, and a plan selector. Variants: `subscription`, `empty`, `plans`.
- [Manage Subscription (1)](https://aicronus.com/blocks/manage-subscription): A current-subscription card with a renewal banner, usage meters, payment method, and plan actions.
- [Payment Method (2)](https://aicronus.com/blocks/payment-method): Choose a saved card from a radio list or add a new card with a full card-entry form. Variants: `select`, `add-card`.
- [Usage Dashboard (3)](https://aicronus.com/blocks/usage-dashboard): A usage analytics panel with metric cards, trend sparklines, quota meters, and a top-resources table. Variants: `overview`, `period`, `empty`.
- [Cancel Flow (1)](https://aicronus.com/blocks/cancel-flow): A cancellation survey with reason options and a retention offer to keep the subscription.

### Commerce (4)

- [Checkout (3)](https://aicronus.com/blocks/checkout): A product checkout with an order summary and a card payment form. Variants: `classic`, `one-page`, `multi-step`.
- [Payouts (1)](https://aicronus.com/blocks/payouts): A creator payout dashboard with balance cards and a settlement history table.
- [Product Grid (4)](https://aicronus.com/blocks/product-grid): A digital-products storefront grid of product cards with prices and buy buttons, an empty catalog, a filter sidebar, or an editorial showcase. Variants: `classic`, `empty`, `with-filters`, `showcase`.
- [Invoice (2)](https://aicronus.com/blocks/invoice): An invoice receipt with line items, totals, status, and a download action. Variants: `classic`, `receipt`.

### Store (5)

- [Product detail (3)](https://aicronus.com/blocks/product-detail): Full product page section with gallery art, rating, variant selectors, quantity stepper, add-to-cart CTA and detail accordions. Variants: `standard`, `gallery`, `minimal`.
- [Cart (3)](https://aicronus.com/blocks/cart): Shopping cart surfaces: a full cart page with editable line items and order summary, an empty cart, and a static slide-over drawer composition. Variants: `page`, `empty`, `drawer`.
- [Order tracking (3)](https://aicronus.com/blocks/order-tracking): Shipment status card with a vertical timeline, ETA banner and courier info across in-transit, delivered and delayed states. Variants: `in-transit`, `delivered`, `delayed`.
- [Order history (3)](https://aicronus.com/blocks/order-history): Customer purchase history as a dense table with row actions, an empty orders table, or stacked order cards with thumbnails and reorder. Variants: `table`, `empty`, `cards`.
- [Reviews (3)](https://aicronus.com/blocks/reviews): Customer reviews: aggregate rating with distribution bars plus top reviews, an empty reviews state, or a dense compact grid of short reviews. Variants: `summary`, `empty`, `compact`.

### Page sections (4)

- [Page Header (2)](https://aicronus.com/blocks/page-header): A page header with breadcrumbs, title, status, actions, and optional tabs. Variants: `with-actions`, `with-tabs`.
- [Filter Bar (1)](https://aicronus.com/blocks/filter-bar): A search and filter toolbar with chips and a result count.
- [Empty State (2)](https://aicronus.com/blocks/empty-state): Empty and error states with illustrations, guidance, and recovery actions. Variants: `empty`, `error`.
- [Status Page (1)](https://aicronus.com/blocks/status-page): A service-status section with an operational banner, per-service 45-day uptime bars, and an incident-history link.

### AI & Chat (3)

- [Chat Thread (1)](https://aicronus.com/blocks/chat-thread): An assistant conversation card with user and AI bubbles, a typing indicator, and a message composer.
- [Prompt Box (1)](https://aicronus.com/blocks/prompt-box): A standalone AI composer with suggestion chips, a model picker, and attach and send actions.
- [AI Response (1)](https://aicronus.com/blocks/ai-response): An assistant answer card with formatted content, cited sources, and feedback and regenerate actions.

### Notifications (3)

- [Notification Panel (1)](https://aicronus.com/blocks/notification-panel): A dropdown notifications list with avatars, unread markers, and a mark-all-read action.
- [Activity Feed (1)](https://aicronus.com/blocks/activity-feed): A vertical timeline of recent events with toned icons, timestamps, and detail.
- [Toast Stack (1)](https://aicronus.com/blocks/toast-stack): A stack of success, error, warning, and info toasts with icons and dismiss actions.

### Email (3)

- [Welcome Email (1)](https://aicronus.com/blocks/email-welcome): A branded welcome email with a get-started CTA and onboarding quick links.
- [Receipt Email (1)](https://aicronus.com/blocks/email-receipt): A branded purchase receipt email with an itemized table, totals, and an invoice action.
- [Verify Email (1)](https://aicronus.com/blocks/email-verify): An email-confirmation message with a verify button and a fallback one-time code.

### States (4)

- [Not Found (1)](https://aicronus.com/blocks/not-found): A centered 404 page with a search field and back-to-home and support actions.
- [Error State (1)](https://aicronus.com/blocks/error-state): A full-page error state with an error code, a retry action, and a support link.
- [Success State (1)](https://aicronus.com/blocks/success-state): A centered confirmation state with a success icon and follow-up actions.
- [Maintenance (1)](https://aicronus.com/blocks/maintenance): A scheduled-maintenance page with an estimated downtime and a notify-me email capture.

### Feedback (3)

- [NPS Survey (1)](https://aicronus.com/blocks/nps-survey): An NPS card with a 0–10 score scale and an open-ended reason field.
- [Feedback Form (1)](https://aicronus.com/blocks/feedback-form): A feedback card with a star rating, category chips, and an optional details field.
- [Contact Form (1)](https://aicronus.com/blocks/contact-form): A two-column contact section pairing contact methods with a name, email, and message form.

### Integrations (1)

- [Integrations Grid (1)](https://aicronus.com/blocks/integrations): A marketing integrations section with an eyebrow header and a responsive grid of connectable service tiles.

### App Shell (1)

- [App Shell (1)](https://aicronus.com/blocks/app-shell-chrome): A sidebar + header application shell that wraps page content — the chrome the (app) route group uses for dashboard pages.

## Templates (20)

OSS app templates for `npx create-cronus-app my-app --template <slug>`. Gold path is **saas** and **admin**.

- [SaaS](https://aicronus.com/templates/saas): Gold path: split auth plus forgot-password, Items and Team in a sidebar shell. Catalog demo pages (analytics, billing, settings, welcome, setup wizard, checklist) ship as files, not in the nav — composed from validated blocks, ready to re-theme. `npx create-cronus-app my-app --template saas`.
- [Admin](https://aicronus.com/templates/admin): Gold path: split login/signup, password reset, Items in a sidebar shell. Catalog demo pages (users, analytics, board, audit) ship as files, not in the nav — composed from validated blocks. `npx create-cronus-app my-app --template admin`.
- [Docs](https://aicronus.com/templates/docs): A documentation site: changelog home, guides-style blog, an article, FAQ and about — composed from validated content blocks, not a marketing landing. `npx create-cronus-app my-app --template docs`.
- [Store](https://aicronus.com/templates/store): A navigable shop: home, catalog, product, cart, checkout, auth, and account — the same blocks as the gallery, wired into real routes. `npx create-cronus-app my-app --template store`.
- [Landing](https://aicronus.com/templates/landing): A composed marketing page: hero, features, pricing, testimonials, FAQ, and CTA — one command, then edit the installed blocks. `npx create-cronus-app my-app --template landing`.
- [Studio](https://aicronus.com/templates/landing-studio): Dark atmospheric hero, logo marquee, bento features, stats, pricing, and a split product CTA. `npx create-cronus-app my-app --template landing-studio`.
- [Ops](https://aicronus.com/templates/landing-ops): Split hero with a quality panel, logo cloud, feature grid, integrations, and a banner CTA. `npx create-cronus-app my-app --template landing-ops`.
- [Secure](https://aicronus.com/templates/landing-secure): Compact registry hero, metrics, proof, usage-based pricing, split FAQ, and CTA. `npx create-cronus-app my-app --template landing-secure`.
- [Care](https://aicronus.com/templates/landing-care): Waitlist capture hero, bento features, testimonials, contained CTA. Emerald light. `npx create-cronus-app my-app --template landing-care`.
- [Shop](https://aicronus.com/templates/landing-shop): Compact hero, editorial product showcase, banner CTA. Sunset light. `npx create-cronus-app my-app --template landing-shop`.
- [Docs product](https://aicronus.com/templates/landing-docs): Compact hero, logo cloud, features, integrations, CTA. `npx create-cronus-app my-app --template landing-docs`.
- [Premium SaaS](https://aicronus.com/templates/landing-premium): Split hero, logos, features, monthly/annual pricing, testimonials, FAQ, CTA. Aurora light. `npx create-cronus-app my-app --template landing-premium`.
- [Agents](https://aicronus.com/templates/landing-agents): Split hero, marquee logos, bento, stats, proof, pricing, FAQ, banner CTA. Emerald light. `npx create-cronus-app my-app --template landing-agents`.
- [Coverage](https://aicronus.com/templates/landing-coverage): Centered hero, stats, testimonial grid, FAQ, CTA. Sunset light. `npx create-cronus-app my-app --template landing-coverage`.
- [Broadcast](https://aicronus.com/templates/landing-broadcast): Atmospheric hero, marquee logos, features, testimonials, pricing. Aurora dark. `npx create-cronus-app my-app --template landing-broadcast`.
- [Agency](https://aicronus.com/templates/landing-agency): Split hero, logos, about story, services, stats, testimonials, CTA. Midnight dark. `npx create-cronus-app my-app --template landing-agency`.
- [Glass](https://aicronus.com/templates/landing-glass): Atmospheric hero, bento features, split FAQ, split-visual CTA. Midnight dark. `npx create-cronus-app my-app --template landing-glass`.
- [Default](https://aicronus.com/templates/default): The smallest useful app: one page wired with the theme provider, anti-flash script, and a sample of metrics, a table, and cards to build from. `npx create-cronus-app my-app`.
- [Dashboard](https://aicronus.com/templates/dashboard): A real application skeleton: an icon-collapsible sidebar shell with route-aware nav, a KPI + chart + data-table overview, and a settings page of forms. `npx create-cronus-app my-app --template dashboard`.
- [Marketing](https://aicronus.com/templates/marketing): A complete landing page from the bundled marketing template: hero, feature grid, pricing, testimonials, FAQ, and a waitlist capture. `npx create-cronus-app my-app --template marketing`.

## Packages

- [@cronus-ui/tokens](https://www.npmjs.com/package/@cronus-ui/tokens): Cronus design tokens — source of truth (TS) + CSS variable bridge + Tailwind v4 preset.
- [@cronus-ui/theme](https://www.npmjs.com/package/@cronus-ui/theme): Cronus runtime theming engine — CronusUIProvider + useTheme (CSS-var only, no re-render).
- [@cronus-ui/ui](https://www.npmjs.com/package/@cronus-ui/ui): Cronus UI — themeable, accessible React components (Radix + CVA + Tailwind v4).
- [@cronus-ui/stack](https://www.npmjs.com/package/@cronus-ui/stack): Cronus Stack Builder core — catalog, resolver, CLI flags, KICKOFF.md and stack.json artifacts.
- [@cronus-ui/ai-kit](https://www.npmjs.com/package/@cronus-ui/ai-kit): The Cronus UI AI Kit — an engineering doctrine, skills, and per-assistant config, scaffolded into your project.
- [cronus-ui](https://www.npmjs.com/package/cronus-ui): cronus-ui — add Cronus UI components to your project, shadcn-style (copy-paste registry).
- [create-cronus-app](https://www.npmjs.com/package/create-cronus-app): Scaffold a Next.js + Cronus UI app: npx create-cronus-app my-app --template saas.
- [create-cronus-stack](https://www.npmjs.com/package/create-cronus-stack): Scaffold a Cronus stack from the Cronus Stack Builder contract: app files, stack.json, KICKOFF.md, and optional AI Kit.
- [cronus-ui-mcp](https://www.npmjs.com/package/cronus-ui-mcp): Model Context Protocol server for Cronus UI — lets MCP-compatible AI agents discover and fetch Cronus UI components and blocks from the registry.

## MCP

Cronus ships an MCP server so coding agents search the live registry instead of guessing APIs. Two transports:

- Hosted Streamable HTTP (read-only catalog): [`https://aicronus.com/mcp`](https://aicronus.com/mcp).
- Local stdio (read + write): [`cronus-ui-mcp`](https://www.npmjs.com/package/cronus-ui-mcp) (`npx -y cronus-ui-mcp`).
- Setup: [https://aicronus.com/docs/mcp](https://aicronus.com/docs/mcp). Official registry: `io.github.pedrogbraz/cronus-ui`.
- Project files: `npx cronus-ui mcp init` writes Claude Code, Cursor, VS Code (`servers`), Codex, Grok, OpenCode, Gemini, and Zed configs. `create-cronus-app` and `cronus-ui ai` emit the same files.
- Greenfield is not an MCP tool: scaffold with `npx create-cronus-app my-app --template saas`, then point the stdio server at that project.

Read-only tools: `list_components`, `list_blocks`, `list_catalog`, `match_catalog`, `search_registry`, `get_component`, `get_install_command`, `get_design_context`.

Write tools (stdio only; spawn the pinned `cronus-ui` CLI inside an inited project): `compose_app`, `add_page`, `set_theme`, `install_component`, `upgrade_components`, `apply_theme`.

### Hosted HTTP

#### URL

```bash
https://aicronus.com/mcp
```

#### Claude Code

```bash
claude mcp add --transport http cronus-ui https://aicronus.com/mcp
```

#### Cursor / Windsurf

```json
{
  "mcpServers": {
    "cronus-ui": {
      "url": "https://aicronus.com/mcp"
    }
  }
}
```

#### VS Code / Copilot

```json
{
  "servers": {
    "cronus-ui": {
      "type": "http",
      "url": "https://aicronus.com/mcp"
    }
  }
}
```

#### Codex

```toml
[mcp_servers.cronus-ui]
url = "https://aicronus.com/mcp"
```

#### Grok CLI

```bash
grok mcp add --transport http cronus-ui https://aicronus.com/mcp
```

#### OpenCode

```json
{
  "mcp": {
    "cronus-ui": {
      "type": "remote",
      "url": "https://aicronus.com/mcp",
      "enabled": true
    }
  }
}
```

### Local stdio

#### Claude Code

```bash
claude mcp add cronus-ui -- npx -y cronus-ui-mcp
```

#### Cursor / Windsurf

```json
{
  "mcpServers": {
    "cronus-ui": {
      "command": "npx",
      "args": ["-y", "cronus-ui-mcp"]
    }
  }
}
```

#### VS Code / Copilot

```json
{
  "servers": {
    "cronus-ui": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "cronus-ui-mcp"]
    }
  }
}
```

#### Codex

```toml
[mcp_servers.cronus-ui]
command = "npx"
args = ["-y", "cronus-ui-mcp"]
```

#### Grok CLI

```bash
grok mcp add cronus-ui -- npx -y cronus-ui-mcp
```

#### OpenCode

```json
{
  "mcp": {
    "cronus-ui": {
      "type": "local",
      "command": ["npx", "-y", "cronus-ui-mcp"],
      "enabled": true
    }
  }
}
```

#### Zed

```json
{
  "context_servers": {
    "cronus-ui": {
      "command": "npx",
      "args": ["-y", "cronus-ui-mcp"]
    }
  }
}
```

#### Antigravity

```json
{
  "mcpServers": {
    "cronus-ui": {
      "command": "npx",
      "args": ["-y", "cronus-ui-mcp"]
    }
  }
}
```

## License

MIT. Components, blocks, OSS templates, the registry, CLI, and MCP server are free for personal and commercial use.

## Optional

- [llms-full.txt](https://aicronus.com/llms-full.txt): every guide and component doc inlined in one file.
- [DESIGN.md](https://aicronus.com/llms/docs/design.md): visual taste (Aurora/Neutral, looks, one primary CTA). Compact: https://aicronus.com/llms/design.compact.md.
- [Component markdown](https://aicronus.com/llms/components/button.md): per-component API, examples, and install command.
- [Block markdown](https://aicronus.com/llms/blocks/login.md): per-block variants and the source the CLI installs.