Component catalog

♥ Free recreation of the Aceternity multi-level features block Owen loves — default pick for feature walkthroughs on landing pages.

♥ The user explicitly asked to keep Kinetic Field in the homepage examples. Retain its pointer-responsive particle forms and controls.

Inline or avatar-size agent activity indicator: libraries.dev thinking-orbs + shimmering verb + detail line.

Product app frame on the shadcn sidebar: brand header, grouped nav with badges, user dropdown, icon-collapse (Cmd/Ctrl+B) and mobile sheet; header bar with breadcrumbs + action slot; content slot.

AI conversation view: user bubbles, assistant turns with markdown-ish text + code blocks, tool-call chips, copy/vote/regenerate actions, @oc/agent-status while pending. Auto-sticks to bottom.

Closing call-to-action panel. `primary` = full --primary fill with inverted buttons (works on acid-yellow, rust, indigo); `card` = quiet bordered card with a glow.

Theme-aware bento grid for feature sections. Tiles span 1, 2 or a full row; hover glow uses --primary.

Two-column hero: headline, copy, actions and proof bullets on the left; framed product media on the right (themed mock by default). `reverse` flips sides.

Centered marketing hero with an original static CSS light treatment using the active theme tokens. No animation or proprietary code.

Sticky marketing navbar: brand, centred links, ghost + primary actions; collapses into a right-side sheet menu below md.

Chat input: auto-growing textarea, file attachment chips, model picker, web-search toggle, send/stop; Enter sends, Shift+Enter newline; optional suggestion chips.

Starter page → app/chat/page.tsx. Use existing compatible tokens, or install a theme only when requested; it pulls in 4 @oc blocks. Preview: /templates/template-ai-chat.

Starter page → app/page.tsx. Use existing compatible tokens, or install a theme only when requested; it pulls in 10 @oc blocks. Preview: /templates/template-landing.

Starter page → app/dashboard/page.tsx. Use existing compatible tokens, or install a theme only when requested; it pulls in 3 @oc blocks. Preview: /templates/template-saas-dashboard.

Writes DESIGN.md to the project root + theme tokens + fonts. Read design-systems/linear-dark/DESIGN.md first.

♥ The user singled out the dither chart as an interesting component to feature on the homepage. Use the real pixelated data visualization with selectable chart styles and clearly labeled sample data. — Pixelated Canvas charts with line, donut, bar and other data shapes. Good for distinctive dashboards and product illustrations; keep its data text alternative, label demo data and provide controls outside the canvas. Hosted local demo preserves the upstream component and install command.

♥ The user wants more interesting live homepage examples and shared this surface effect. Show it over a scrollable UI with readable controls outside the blur; it is a static surface effect, not a loading animation. — Layered CSS backdrop blur for fading scroll-container edges and decorative surfaces. It is not a loader or a continuous animation. Keep text, focus targets and controls outside the strongest blur; the decorative overlay must not intercept interaction. Hosted demo includes a real scroll container and blur controls.

Feature-announcement/onboarding modal with media steps, 'don't show again' and responsive dialog↔drawer. Tokens throughout (black only on the media frame). Pulls 6 shadcn primitives.

Compound multi-step onboarding (StepIndicator, ChoiceGroup, FeatureCarousel, TipsList; controllable state). Fully token-based — the safest Cult UI pick for app UI.

Small rolling-digit number (motion). Inherits colour.

Notifications/events appearing one by one — great 'activity feed' hero visual. Unstyled; you style the items with bg-card etc. Imports motion/react.

Light/dark toggle with a View Transitions clip-path reveal. Colourless (icons use currentColor). Uncontrolled it toggles <html class=dark> + localStorage itself; with next-themes pass theme/onThemeChange instead.

Blur + fade-in on mount or in view; the go-to entrance wrapper for sections and image grids (stagger with `delay`). Colourless. Respect prefers-reduced-motion yourself.

Pill button whose label slides out for an arrow + primary fill on hover. Uses bg-primary/text-primary-foreground — one of the few fully token-based Magic UI pieces.

The cleanest infinite marquee for logo clouds / testimonial rows: pure CSS animation, no colours of its own, pauseOnHover + vertical + reverse props. Duplicates children (`repeat`), so keep items light.

Animated terminal with typing + sequenced lines for CLI/dev-tool heroes. bg-background/border-border (only the traffic-light dots are literal colours). Imports motion/react even though the registry lists no deps.

Per-word/char/line text entrance with ~10 presets (blurIn, slideUp, scaleUp…). Inherits colour — good default for hero headlines over Aceternity's text effects.

Sliding highlight behind the hovered/active item (tabs, nav, segmented controls). You pass the bg class (e.g. bg-muted), so it follows the theme.

Stagger a group of children with presets (fade, blur, slide, zoom…). Colourless; good for feature lists and logo rows.

Animate children when they enter the viewport — thin, reusable wrapper. Colourless.

Infinite marquee with speedOnHover and vertical mode; alternative to magicui/marquee using motion + react-use-measure.

Card that morphs into a dialog (shared layout) — the signature motion-primitives piece for galleries/case studies. Only the backdrop has colour (white/black 40%); you style the card with tokens.

Layered backdrop-filter blur gradient for edges of scroll areas/images. Colourless; backdrop-filter costs GPU — keep blurLayers low.

Odometer-style rolling digits (spring). Inherits colour; pair with in-view for stats.

Most flexible text entrance primitive (per char/word/line, presets + custom variants, trigger prop). Unstyled — inherits theme. Install via @motion-primitives or `npx motion-primitives add`.

Animated content swap between tab panels/steps (AnimatePresence wrapper). Colourless.

Words blur-in one by one (motion). Inherits colour; lighter than SplitText (no GSAP).

Paragraph that un-blurs and fades in word by word as you scroll — manifesto/about sections. GSAP ScrollTrigger.

Photo + quote testimonials with stacked image transition. Good single-testimonial spotlight.

Soft aurora wash for AI/consumer heroes (pairs with soft-glass). Uses its own CSS vars — tune colours to your primary.

Simple bento layout. Colours are hard-coded neutral-200/white/black — prefer @oc/feature-bento for theme-aware tiles, or swap classes to bg-card/border.

Gibberish → text reveal. Technical/dev-tool and brutalist brands.

Drag-and-drop upload with grid background and micro-interactions.

Navbar that shrinks into a pill on scroll — the standard 'modern landing page' nav.

Sticky visual + scrolling text sections for feature walkthroughs.

Word-by-word fade-in for one hero line or an AI answer. Don't use on long paragraphs.

Import BoxModel from "anatomy-figures/box-model" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

Import Debounce from "anatomy-figures/debounce" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

Import HashMap from "anatomy-figures/hash-map" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

Import LruCache from "anatomy-figures/lru-cache" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

Import MessageQueue from "anatomy-figures/message-queue" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

Import RateLimiter from "anatomy-figures/rate-limiter" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

Import Watch from "anatomy-figures/watch" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

Human-in-the-loop 'agent wants to do X — approve?' card. Requires the Beautiful UI foundation.css, which redefines --accent (collides with shadcn).

Tabbed chat panel with reasoning replies + composer. Requires the Beautiful UI foundation.css, which redefines --accent (collides with shadcn).

Lightweight flow diagram for agent plans/pipelines. Requires the Beautiful UI foundation.css, which redefines --accent (collides with shadcn).

Bottom prompt bar with attachments/actions. Requires the Beautiful UI foundation.css, which redefines --accent (collides with shadcn).

Token-by-token streaming text with caret. Requires the Beautiful UI foundation.css, which redefines --accent (collides with shadcn).

Agent task list rows with status. Requires the Beautiful UI foundation.css, which redefines --accent (collides with shadcn).

Compact chips for tool calls an agent made. Requires the Beautiful UI foundation.css, which redefines --accent (collides with shadcn).