Component catalog

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

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.

shadcn table in a card with toolbar: search, faceted filter, actions slot, sortable columns, row selection and pagination. Badge columns are server-safe; `cell` renderers need a client page.

Temporary page an agent installs in a consumer project to render candidate variants of the user's own component side by side, with their theme and content: <DesignLab title> + <LabOption id label notes chosen>. Lands at app/design-lab/page.tsx + components/design-lab.tsx; the user says which option they want, the agent applies it and removes both files.

Dashboard KPI tiles: label, big value, delta chip (invertible for churn/latency) and an SVG sparkline in --chart-1.

Big-number proof row ('99.99% uptime') with hairline dividers or cards. 2-4 stats.

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/brutalist-mono/DESIGN.md first.

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.

'New feature →' pill above a hero headline (compound badge). Token-based.

Shiki code block with tabs, line numbers, highlight/diff/focus transformers and copy. Theme-aware chrome; diff colours are semantic emerald/rose. Heavy: shiki + react-icons.

Figma-style colour picker (saturation/hue/alpha/eyedropper/format). Surfaces use tokens; the colour gradients are intrinsic.

GitHub-style contribution heatmap; levels use fill-muted-foreground/N, so it inherits the theme.

File dropzone (react-dropzone) with empty/content states. Token-based; pairs with stock shadcn forms.

TipTap rich-text editor with slash commands, bubble menu, tables. Token-based UI but ~18 tiptap/lowlight deps — only when you truly need rich text.

Full Gantt chart (draggable features, sidebar groups, markers). Fully token-based. Deps: dnd-kit, jotai, date-fns, lodash.throttle, @uidotdev/usehooks.

Composable drag-and-drop kanban (dnd-kit + tunnel-rat). Token-based; you bring the data model.

Tabbed install-command snippet with copy (npm/pnpm/bun). Ideal for dev-tool landing pages.

Tag picker built from badge + command + popover.

media-chrome video player styled with Tailwind. Colourless controls inherit theme.

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.

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.

Command palette (command + dialog) with search — pair with comp-25 as the trigger and bind ⌘K yourself.

Avatar upload with crop dialog + zoom slider. Uses Origin's cropper primitive and use-file-upload hook.

Scramble → reveal text on hover or in view (motion). Dev-tool/brutalist brands.

Typewriter with cursor, multiple strings, delete/retype (GSAP). Inherits colour.

Two-column login with full-height cover image.

Centered card login on a muted background. Writes app/login/page.tsx + components/login-form.tsx.

Login form + image split in one card — more brand presence than login-03.

Three small AI waiting indicators (dots, sweep bar, 3×3 pixel grid) sharing one cycle length so they can be mixed on a page, with an optional elapsed-seconds counter, aria-live and an sr-only label. Drawn in currentColor — set the text colour and it follows the theme. Lighter than canvas orbs for inline 'working…' states; use oc/agent-status for the primary agent indicator.

Syntax-highlighted block with tabs (react-syntax-highlighter).

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

Button with loading → success states built in.

Mac-style terminal with typewriter — dev-tool landing pages.

Mount <Agentation /> only in development (see skills/setup-project). Free for internal use; commercial license only if you redistribute it in a product.

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.

Row-level diff table for agent-proposed data changes. 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).

A compact waiting indicator with multiple visual treatments. Start here for free loading UI; inspect the demo and choose a variant that fits the surrounding content.

QR code (qrcode lib) that reads --foreground/--background at runtime — but only parses oklch() values; our DESIGN.md themes emit hex, so it silently falls back to near-black/white. Pass foreground/background props. Server variant included.

Our default agent-activity indicator; wrapped by @oc/agent-status. Canvas 2D, no WebGL. Also: thinking-orbs-native (RN) and SwiftUI.

Logo marquee with fade edges and hover-pause; supports node or image logos. fadeOutColor defaults to #0b0b0b/#fff — set it to your background.

Design-tool slider with drag and arrow-key input. Hosted demo maps its value to a tile’s corner radius and rotation so the effect is immediately visible.

Free tier: search + limited daily installs. Install a found item with: npx shadcn@latest add "https://21st.dev/r/<author>/<slug>?api_key=$API_KEY_21ST".

A grid of cells that ripple when clicked.

Animated text component with colorful curved lines rendered on canvas, clipped to the text shape.

A cool card with amazing hover effect, reveals encrypted text and a mixed gradient.

A layout effect that animates the grid item on click, powered by framer motion layout

Mouse-driven parallax effect, perfect for hero sections. Images blur fade in and move at different depths.

Tabs to switch content, click on a tab to check background animation.

Import BTree from "anatomy-figures/b-tree" (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 BinarySearch from "anatomy-figures/binary-search" (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.