# uilab

> Full visual-vocabulary catalog for AI agents.

## Endpoints

- Full catalog (JSON): https://ui-lab-ten.vercel.app/catalog.json
- Full catalog with inlined prompts/tokens (text/plain): https://ui-lab-ten.vercel.app/llms-full.txt
- Component registry (JSON): https://ui-lab-ten.vercel.app/r/registry.json

## Components

- [Tilt Card](https://ui-lab-ten.vercel.app/components/motion/tilt-card) — 3D perspective tilt on hover with cursor-tracked glare. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/tilt-card.json
- [Button](https://ui-lab-ten.vercel.app/components/motion/button) — Spring-pressed Button plus StatefulButton (idle → loading → success / error) and MagneticButton. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/button.json
- [Marquee](https://ui-lab-ten.vercel.app/components/motion/marquee) — Infinite horizontal or vertical scroll with pause-on-hover. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/marquee.json
- [Tabs](https://ui-lab-ten.vercel.app/components/motion/tabs) — Pill, segment or underline tabs with a spring layoutId indicator. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/tabs.json
- [Switch](https://ui-lab-ten.vercel.app/components/motion/switch) — Toggle with a spring-driven thumb and press feedback. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/switch.json
- [Input](https://ui-lab-ten.vercel.app/components/motion/input) — Text input with label, left/right icons, error shake and success check draw. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/input.json
- [Select](https://ui-lab-ten.vercel.app/components/motion/select) — Composable select primitives whose panel bouncily unfolds out of the trigger and separates, plus a Morph variant where the trigger grows into the panel via shared layout. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/select.json
- [Checkbox](https://ui-lab-ten.vercel.app/components/motion/checkbox) — Form choice control with a draw-on checkmark, spring press feedback and indeterminate state support. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/checkbox.json
- [Radio Group](https://ui-lab-ten.vercel.app/components/motion/radio) — Single-select choice control with a gliding layoutId indicator dot and spring press feedback. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/radio.json
- [Bottom Sheet](https://ui-lab-ten.vercel.app/components/motion/bottom-sheet) — Vaul-inspired draggable bottom sheet with snap points, inertia and glass surface. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/bottom-sheet.json
- [Shared Layout Background](https://ui-lab-ten.vercel.app/components/motion/shared-layout-bg) — A pill that glides between hovered items via motion's shared layout, with blur enter/exit. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/shared-layout-bg.json
- [Preview Rail](https://ui-lab-ten.vercel.app/components/motion/preview-rail) — Codex app-inspired navigation rail with compact ticks that form a hover pyramid and reveal a floating destination preview. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/preview-rail.json
- [Dock](https://ui-lab-ten.vercel.app/components/motion/dock) — macOS-style dock with grouped actions and a gliding active pill. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/dock.json
- [Tooltip](https://ui-lab-ten.vercel.app/components/motion/tooltip) — Hover or focus tooltip with blur enter/exit and spring spawn, plus a Morph variant where one shared bubble glides and resizes between neighboring triggers. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/tooltip.json
- [Popover](https://ui-lab-ten.vercel.app/components/motion/popover) — Gooey popover whose panel oozes out of the trigger through an SVG goo filter — a liquid neck that stretches and pinches — with crisp content fading in on top, plus a Morph variant that clip-morphs open from the trigger corner. Click or hover trigger, controlled or uncontrolled. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/popover.json
- [Morphing Modal](https://ui-lab-ten.vercel.app/components/motion/morphing-modal) — Family-app-style modal. A single panel that morphs its height as you navigate between inner views, with blur cross-fade on content. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/morphing-modal.json
- [Text Animation](https://ui-lab-ten.vercel.app/components/motion/text-animation) — Animated text primitives for reveal sequences, shimmer loading states and letter-cascade swaps. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/text-animation.json
- [Number Animation](https://ui-lab-ten.vercel.app/components/motion/number) — Animated number primitives for count-up values and rolling digit tickers. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/number.json
- [Animated Badge](https://ui-lab-ten.vercel.app/components/motion/animated-badge) — Status badge with animated state icons, pulse feedback and compact size variants. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/animated-badge.json
- [Action Swap](https://ui-lab-ten.vercel.app/components/motion/action-swap) — CTA button and slot primitives for swapping text and icons with blur motion. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/action-swap.json
- [Animated Toast Stack](https://ui-lab-ten.vercel.app/components/motion/animated-toast-stack) — Stacked toasts with status morphs, swipe dismissal, actions and layout-aware motion. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/animated-toast-stack.json
- [Theme Toggle](https://ui-lab-ten.vercel.app/components/motion/theme-toggle) — Theme toggle button with a full-page rectangle clip-path reveal via the View Transition API. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/theme-toggle.json
- [Bouncy Accordion](https://ui-lab-ten.vercel.app/components/motion/bouncy-accordion) — Single-open accordion with weighted spring layout, icon rows and reduced-motion-safe content reveals. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/bouncy-accordion.json
- [Drawer](https://ui-lab-ten.vercel.app/components/motion/drawer) — Side panel that slides in from the left or right with a spring, backdrop blur, body scroll lock and esc-to-close. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/drawer.json
- [Scroll Animation](https://ui-lab-ten.vercel.app/components/motion/scroll-animation) — Scroll-driven motion: a Lenis smooth-scroll provider and a reading-progress indicator that reads from it. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/scroll-animation.json
- [Range Slider](https://ui-lab-ten.vercel.app/components/motion/range-slider) — Range slider with tick dots and a bouncy vertical-bar thumb that glides between snapped steps; drag and keyboard control, reduced-motion safe. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/range-slider.json
- [Wheel Picker](https://ui-lab-ten.vercel.app/components/motion/wheel-picker) — iOS-style picker wheel: a 3D drum on native momentum scroll that snaps to the nearest notch, with wheel, drag and keyboard control. Composes side by side for date and time pickers, reduced-motion safe. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/wheel-picker.json
- [Table](https://ui-lab-ten.vercel.app/components/motion/table) — Virtualized data table that stays smooth at 10k+ rows, with sortable headers, row selection, column resize and reorder, and a sticky header. Minimal, reduced-motion-safe motion. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/table.json
- [Shader Background](https://ui-lab-ten.vercel.app/components/motion/shader-background) — Canvas shader backgrounds (mesh gradient, grain, warp, waves, voronoi, dot orbit and more) with a single typed variant prop. Reduced-motion freezes animated variants. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/shader-background.json
- [Cylinder Carousel](https://ui-lab-ten.vercel.app/components/motion/cylinder-carousel) — A carousel whose items line the inside of a cylinder, receding into the center and growing toward the edges. Drag, scroll or arrow-key to roll it, with a springy glide and snap. Reduced-motion drops the glide. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/cylinder-carousel.json
- [Loader](https://ui-lab-ten.vercel.app/components/motion/loader) — Loading indicator with seventeen variants: spinner, dots, bars, dot-matrix, dither, morph, comet, scramble, metaballs, newton, helix, percent, and five terminal-style ascii spinners. Scales from one size prop, uses currentColor, and reduced-motion swaps every transform for a calm opacity pulse. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/loader.json
- [Text Scramble](https://ui-lab-ten.vercel.app/components/motion/text-scramble) — Scrambled glyphs resolve left-to-right into the real text — on view, on hover, or whenever the text prop changes. Width stays stable mid-scramble; reduced-motion shows the final text instantly. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/text-scramble.json
- [WebGL Background](https://ui-lab-ten.vercel.app/components/motion/webgl-background) — Fragment-shader hero backgrounds (aurora, silk, plasma, light rays, pixel blast with click ripples, dither) behind a single typed variant prop. Reduced-motion renders one static frame; no WebGL falls back to a matching CSS gradient. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/webgl-background.json
- [Halftone Image](https://ui-lab-ten.vercel.app/components/motion/halftone-image) — Renders any bitmap as a printed halftone screen on canvas: tone drives dot size on a grid you can rotate (45° reads as print), with circle or square dots and adjustable pitch. Pass a second plate and the grey screen crossfades to colour on hover, each dot inked with the tone beneath it. Transparent between dots, so it composes over any surface. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/halftone-image.json
- [Star Border](https://ui-lab-ten.vercel.app/components/motion/star-border) — A slow light orbits the border of a CTA button or card — a pure-CSS conic-gradient wrapper with color, speed and thickness props. Reduced-motion freezes it into a static ring. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/star-border.json
- [Bounce Cards](https://ui-lab-ten.vercel.app/components/motion/bounce-cards) — A stacked deck of cards fans open with a staggered spring bounce when it enters the view. Spacing, rotation and stagger are tunable; reduced-motion keeps the fanned layout and only fades in. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/bounce-cards.json
- [Glare Hover](https://ui-lab-ten.vercel.app/components/motion/glare-hover) — A diagonal band of light sweeps across a card or button on hover. Color, angle and duration props; touch devices skip it, reduced-motion swaps the sweep for a soft opacity highlight. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/glare-hover.json
- [Skeleton](https://ui-lab-ten.vercel.app/components/motion/skeleton) — Loading placeholder block with a soft shimmer sweep — shape it entirely with className, compose avatars, text bars and image blocks. Reduced-motion swaps the sweep for a calm opacity pulse. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/skeleton.json
- [Scroll Hint](https://ui-lab-ten.vercel.app/components/motion/scroll-hint) — A hero-section scroll-down indicator in two shapes: a mouse outline with a dropping dot, or a pair of pulsing chevrons. currentColor sizing, optional label, reduced-motion shows the static glyph. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/scroll-hint.json
- [Animated Icon](https://ui-lab-ten.vercel.app/components/motion/animated-icon) — Hover-played icon micro-interactions in one component — draw, wiggle, spin, bounce, pop, pulse, nudge — driven by a single variant prop. Built on motion + lucide, reduced-motion safe. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/animated-icon.json
- [Dropdown Menu](https://ui-lab-ten.vercel.app/components/motion/dropdown-menu) — Composable animated dropdown menu: a corner-origin spring entrance with viewport collision flip, one shared focus surface that glides between rows for both pointer and keyboard, grouped labels, two-line items with icons and shortcuts, checkbox items, a hover/arrow-key submenu, and full roving-focus keyboard navigation. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/dropdown-menu.json
- [Expanding Card](https://ui-lab-ten.vercel.app/components/motion/expanding-card) — App Store-style card expansion: the card itself morphs into a centered modal over a heavily blurred backdrop via a shared layoutId FLIP — expanded content fades in once the surface lands, and the card shrinks back on close. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/expanding-card.json
- [Recording Card](https://ui-lab-ten.vercel.app/components/blocks/recording-card) — Presents any content as a screen recording: wallpaper and scrim behind a window mock, a webcam bubble that doubles as the play control, a running timer with a blinking record dot, and a “tap for sound” pill that slides back behind the bubble once playing. Sized entirely in container-query units, so one card scales from grid thumbnail to full-width hero with no breakpoints — plus an optional aspect-locked theatre view. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/recording-card.json
- [Login Card](https://ui-lab-ten.vercel.app/components/blocks/login-card) — Chinese product sign-in modal: a blue gradient header with floating bokeh, a WeChat QR-scan column beside phone quick-login (country-code dropdown, code field with a 60s resend countdown), an agreement checkbox that shakes on invalid submit, and an ICP footer. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/login-card.json
- [Thread List](https://ui-lab-ten.vercel.app/components/blocks/thread-list) — Sidebar conversation list: section headers with action slots, 30px rows with unread dots and time metas that swap to hover actions, and an active pill that glides between rows via shared layout. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/thread-list.json
- [Artifact Panel](https://ui-lab-ten.vercel.app/components/blocks/artifact-panel) — Side-pane canvas for AI-generated artifacts: hairline panel shell, header with action cluster, preview/code view toggle with cross-fade, and a version navigator with restore. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/artifact-panel.json
- [Agent Inbox](https://ui-lab-ten.vercel.app/components/blocks/agent-inbox) — Human-in-the-loop approval queue: risk-tiered request items with expiry and detail expand, approve/deny flows that settle in place, and an action receipt card with scope, diff stats and undo. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/agent-inbox.json
- [Agent Trace](https://ui-lab-ten.vercel.app/components/blocks/agent-trace) — Activity rail for agent runs: kind-styled step nodes on a hairline rail, live steps with pulse ring and cadenced shimmer, raw-output expand, parallel tool groups, and nested sub-agent mini traces. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/agent-trace.json
- [Streaming JSON](https://ui-lab-ten.vercel.app/components/blocks/streaming-json) — Tolerant syntax-colored rendering for partial JSON as it streams in: an incremental tokenizer that survives unclosed strings, fade-in for freshly arrived spans, a streaming caret, and a function-call wrapper. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/streaming-json.json
- [Citations](https://ui-lab-ten.vercel.app/components/blocks/citations) — Inline citation chips with a hover source-preview popover, plus source cards and a staggered source list for the answer footer. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/citations.json
- [Voice Orb](https://ui-lab-ten.vercel.app/components/blocks/voice-orb) — Immersive voice-mode orb: one continuous gradient sphere whose breathing, hue drift, echo rings and thinking sheen follow idle / listening / thinking / speaking states. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/voice-orb.json
- [Activity Stats](https://ui-lab-ten.vercel.app/components/blocks/activity-stats) — Usage-summary widgets: a connected stats bar for headline metrics, a GitHub-style contribution heatmap with a color-mix intensity scale and column-cascade entrance, and a text period switch. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/activity-stats.json
- [Settings Panel](https://ui-lab-ten.vercel.app/components/blocks/settings-panel) — Preference-form building blocks: a titled settings group with hairline-divided rows, a hex color field with auto-contrasting text, a text field, a preset-picker button and a ghost header action. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/settings-panel.json
- [Agent Thread](https://ui-lab-ten.vercel.app/components/blocks/agent-thread) — AI agent conversation stream: user message pills, turn headers, markdown typography, thinking & tool-call status rows, approval card, streaming caret, file & diff artifact cards with expand animation, command rows, and hover-revealed turn actions. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/agent-thread.json
- [Agent Composer](https://ui-lab-ten.vercel.app/components/blocks/agent-composer) — AI agent chat composer with context chips, access chip, model picker with a segmented reasoning-effort slider, and a morphing send/stop button, plus an add menu and a voice dictation bar. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/agent-composer.json
- [Agent Workbench](https://ui-lab-ten.vercel.app/components/blocks/agent-workbench) — Responsive agent app shell: a resizable three-pane desktop layout, tablet side overlays, and mobile single-surface navigation, with spring transitions and a full-width 46px toolbar overlay. Includes a pinned summary card overlay. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/agent-workbench.json
- [Availability Scheduler](https://ui-lab-ten.vercel.app/components/blocks/availability-scheduler) — Weekly availability editor where each day springs between available and unavailable, time ranges add and remove with blur-slide motion, times pick from a scrollable dropdown, and a copy menu clones hours to other days. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/availability-scheduler.json
- [Multi-chain Swap](https://ui-lab-ten.vercel.app/components/blocks/swap) — Cross-chain swap widget with chain + token selectors, morphing views, animated flip and quote. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/swap.json
- [Dynamic Island](https://ui-lab-ten.vercel.app/components/blocks/dynamic-island) — iOS-style island pill that morphs between live activity views with bouncy shell resize and blur crossfades. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/dynamic-island.json
- [Command Palette](https://ui-lab-ten.vercel.app/components/blocks/command-palette) — ⌘K palette with fuzzy filter, spring-animated active row and glass surface. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/command-palette.json
- [Expandable Action Bar](https://ui-lab-ten.vercel.app/components/blocks/expandable-action-bar) — Compact icon actions that expand into labeled controls on hover or focus with shared layout motion. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/expandable-action-bar.json
- [Overflow Actions](https://ui-lab-ten.vercel.app/components/blocks/overflow-actions) — Connected pill rail for primary actions that springs open to reveal extra controls. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/overflow-actions.json
- [Expandable Tabs](https://ui-lab-ten.vercel.app/components/blocks/expandable-tabs) — Icon tab bar where the active tab expands to a labelled pill, with a panel above that morphs height and slides content direction-aware on switch. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/expandable-tabs.json
- [Swipeable List](https://ui-lab-ten.vercel.app/components/blocks/swipeable-list) — Mobile-style list rows that swipe left or right to reveal contextual action buttons. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/swipeable-list.json
- [File Upload](https://ui-lab-ten.vercel.app/components/blocks/file-upload) — Drag-and-drop upload queue with progress rows, retry/remove actions and reduced-motion-safe state changes. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/file-upload.json
- [Prediction Market](https://ui-lab-ten.vercel.app/components/blocks/prediction-market) — Prediction market trade ticket with buy/sell modes, outcome prices, rolling amount entry, quick add chips and trade states. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/prediction-market.json
- [Wallet Card](https://ui-lab-ten.vercel.app/components/blocks/wallet-card) — Wallet overview card with an account switcher and search that morph open from their triggers, a cascading balance with a live change pill and privacy toggle, copy-address, and Send / Deposit / Swap / Buy actions. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/wallet-card.json
- [OTP Input](https://ui-lab-ten.vercel.app/components/blocks/otp-input) — One-time-code input with a gliding focus ring, digits that roll in per slot, error shake and a success check draw. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/otp-input.json
- [Bloom Menu](https://ui-lab-ten.vercel.app/components/blocks/bloom-menu) — A button that morphs open into a menu and blooms iris-out from the center, the grid revealing in every direction with radially staggered items. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/bloom-menu.json
- [Feedback Widget](https://ui-lab-ten.vercel.app/components/blocks/feedback-widget) — Corner trigger that morphs open into a feedback popup with message entry and animated sending, success and retry states. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/feedback-widget.json
- [404 / Not Found](https://ui-lab-ten.vercel.app/components/blocks/not-found) — Animated 404 pages in five styles: glitch scramble, magnetic digits, cursor spotlight, a fanning card stack and a typed terminal. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/not-found.json
- [Step Form](https://ui-lab-ten.vercel.app/components/blocks/step-form) — Focused one-question-at-a-time multi-step form: segmented progress with a mono counter, directional slide transitions with container height morph, text and choice steps, shake-on-invalid validation with reserved error space, Enter-to-advance, and a drawn-check success state. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/step-form.json
- [Empty State](https://ui-lab-ten.vercel.app/components/blocks/empty-state) — Animated empty-state blocks with hand-drawn line-art illustrations, concise copy and a primary action — an inbox-zero envelope, a hover-to-open archive cabinet, and a scanning search lens. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/empty-state.json
- [Prompt Bar](https://ui-lab-ten.vercel.app/components/blocks/prompt-bar) — Compact credits-aware AI prompt bar: a dismissible credits banner, queued messages you can steer, edit or drop while streaming, slash-commands that morph into a removable skill chip, demo attachments, a web-search toggle pill, a model menu, and a morphing send-to-stop button. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/prompt-bar.json
- [Prompt Input](https://ui-lab-ten.vercel.app/components/blocks/prompt-input) — An auto-growing agent composer with prompt actions, model selection, keyboard submission, and animated send and stop states. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/prompt-input.json
- [Todo List](https://ui-lab-ten.vercel.app/components/blocks/todo-list) — A collapsible agent task plan with morphing status marks, a completion count, compact metadata, and smooth list updates. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/todo-list.json
- [Code Block](https://ui-lab-ten.vercel.app/components/blocks/code-block) — A syntax-highlighted code surface with stable streaming updates, line numbers, focused lines, smooth following, and copy feedback. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/code-block.json
- [Approval Card](https://ui-lab-ten.vercel.app/components/blocks/approval-card) — A human-in-the-loop decision surface for approvals, single or multiple-choice questions, custom responses, and multi-step review flows. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/approval-card.json
- [File Diff](https://ui-lab-ten.vercel.app/components/blocks/file-diff) — A syntax-highlighted file change disclosure with progressive rows, line numbers, live change counts, smooth following, and completion collapse. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/file-diff.json
- [Tool Result](https://ui-lab-ten.vercel.app/components/blocks/tool-result) — A lightweight execution disclosure for syntax-highlighted terminal output and request responses that collapses into a compact completed state. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/tool-result.json
- [Streaming Response](https://ui-lab-ten.vercel.app/components/blocks/streaming-response) — A stable response surface with completion actions, rendered content, and an expandable source summary. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/streaming-response.json
- [Image Generation](https://ui-lab-ten.vercel.app/components/blocks/image-generation) — A stable generated-image surface that moves from queued work through progressive refinement to a completed result without layout shift. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/image-generation.json
- [Tool Approval](https://ui-lab-ten.vercel.app/components/blocks/tool-approval) — A human-in-the-loop permission card for reviewing tool details, allowing once, remembering access, or denying execution. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/tool-approval.json
- [Agent Activity](https://ui-lab-ten.vercel.app/components/blocks/agent-activity) — One adaptive activity stream for reasoning, searches, tool calls, structured execution traces, or a chronological mix. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/agent-activity.json

## Atom Tokens

- [Motion tokens](https://ui-lab-ten.vercel.app/atoms?cat=motion) — Bézier curves, springs, and durations for consistent motion. · via catalog.json
- [Shape tokens](https://ui-lab-ten.vercel.app/atoms?cat=shape) — A radius scale, elevation shadows, and z-index layers for consistent surfaces. · via catalog.json
- [Typography tokens](https://ui-lab-ten.vercel.app/atoms?cat=typography) — Font pairings and a type scale for consistent text. · via catalog.json
- [Spacing tokens](https://ui-lab-ten.vercel.app/atoms?cat=spacing) — A spacing scale, density presets, and responsive breakpoints for a consistent layout rhythm. · via catalog.json
- [Line tokens](https://ui-lab-ten.vercel.app/atoms?cat=lines) — Hairlines, borders, and outlines for consistent dividers. · via catalog.json
- [Background tokens](https://ui-lab-ten.vercel.app/atoms?cat=backgrounds) — Static CSS background recipes for texture, plus fade masks that keep a texture from reading as wallpaper. · via catalog.json

## Icon Styles

- [Outline](https://ui-lab-ten.vercel.app/atoms?cat=icons#outline) — The default for tool interfaces. · copy prompt
- [Bold Outline](https://ui-lab-ten.vercel.app/atoms?cat=icons#bold-outline) — Lively, youthful interfaces that need more visual weight. · copy prompt
- [Rounded](https://ui-lab-ten.vercel.app/atoms?cat=icons#rounded) — Friendly, consumer-facing products. · copy prompt
- [Filled](https://ui-lab-ten.vercel.app/atoms?cat=icons#filled) — High-recognition states such as mobile tab bars. · copy prompt
- [Duotone](https://ui-lab-ten.vercel.app/atoms?cat=icons#duotone) — Brand-forward interfaces that can support a stronger icon voice. · copy prompt
- [Pixel](https://ui-lab-ten.vercel.app/atoms?cat=icons#pixel) — Retro-computing aesthetics and deliberately game-like products. · copy prompt

## Icon Motions

- [Draw-on](https://ui-lab-ten.vercel.app/atoms?cat=icons#draw) — Entrance flourish for a confirm or success icon; the stroke draws itself in. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/animated-icon.json
- [Wiggle](https://ui-lab-ten.vercel.app/atoms?cat=icons#wiggle) — Notification and alert icons; a quick side-to-side wiggle draws the eye. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/animated-icon.json
- [Spin](https://ui-lab-ten.vercel.app/atoms?cat=icons#spin) — Settings, sync, and refresh icons; a full 360° rotation signals process. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/animated-icon.json
- [Bounce](https://ui-lab-ten.vercel.app/atoms?cat=icons#bounce) — Download and scroll-down cues; a springy vertical bounce implies action. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/animated-icon.json
- [Pop](https://ui-lab-ten.vercel.app/atoms?cat=icons#pop) — Add and create actions; a quick scale pop gives tactile feedback. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/animated-icon.json
- [Pulse](https://ui-lab-ten.vercel.app/atoms?cat=icons#pulse) — Like and live-status icons; a continuous gentle pulse while hovered. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/animated-icon.json
- [Nudge](https://ui-lab-ten.vercel.app/atoms?cat=icons#nudge) — 'Next', 'send', and link icons; a small directional nudge hints at travel. install: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/animated-icon.json

## Styles

- [Glassmorphism](https://ui-lab-ten.vercel.app/styles?style=glassmorphism) — Frosted translucent cards floating over colorful glows, like a pane of misted glass. · copy prompt
- [Neumorphism](https://ui-lab-ten.vercel.app/styles?style=neumorphism) — A single soft gray-blue surface where every card and button seems pressed or embossed by light and shadow alone, no outlines anywhere. · copy prompt
- [Claymorphism](https://ui-lab-ten.vercel.app/styles?style=claymorphism) — Cards look pinched out of soft purple clay, plump and rounded with a light gleam caught in every fold. · copy prompt
- [Liquid Glass](https://ui-lab-ten.vercel.app/styles?style=liquid-glass) — Bright, dewy glass panels that glow with saturated light instead of hiding in a dark aurora — Apple's newest surface language. · copy prompt
- [Neubrutalism](https://ui-lab-ten.vercel.app/styles?style=neubrutalism) — Thick black borders, hard offset shadows and clashing candy colors — deliberately unpolished, loudly alive. · copy prompt
- [Brutalism](https://ui-lab-ten.vercel.app/styles?style=brutalism) — Back to the web's rawest state — pure black, pure white, Times New Roman, none of neubrutalism's candy colors or hard shadows. This is 'raw' in the literal sense. · copy prompt
- [Maximalism](https://ui-lab-ten.vercel.app/styles?style=maximalism) — A violet gradient backdrop, lemon-yellow cards and colorful hard shadows — the exact opposite of 'less is more': more is more. · copy prompt
- [Swiss Style](https://ui-lab-ten.vercel.app/styles?style=swiss) — Black on white plus one red: huge type, a strict grid and whitespace do all the talking. · copy prompt
- [Minimalism](https://ui-lab-ten.vercel.app/styles?style=minimalism) — A softer, more universal minimalism than Swiss style — no strict grid or red accent, just generous whitespace and restrained grayscale that hands focus back to the content. · copy prompt
- [Editorial](https://ui-lab-ten.vercel.app/styles?style=editorial) — A warm paper-toned background with serif display headlines and a wine-red accent — the feel of flipping through a well-made indie magazine. · copy prompt
- [Japanese Minimalism](https://ui-lab-ten.vercel.app/styles?style=japanese-minimal) — Warm off-white paper tones with ink-gray text and vermillion used only in tiny doses — restraint so deliberate that the whitespace itself becomes the message. · copy prompt
- [Y2K](https://ui-lab-ten.vercel.app/styles?style=y2k) — Brushed-chrome gradients, candy-pink badges and glossy capsule buttons — the millennium's idea of the future. · copy prompt
- [Vaporwave](https://ui-lab-ten.vercel.app/styles?style=vaporwave) — Deep-purple dusk, a neon grid horizon and pink-on-cyan glow — an 80s arcade sunset frozen in CSS. · copy prompt
- [Pixel Art](https://ui-lab-ten.vercel.app/styles?style=pixel-art) — Chunky black outlines, monospace type and zero-blur hard shadows — a sprite sheet rendered as a webpage. · copy prompt
- [Frutiger Aero](https://ui-lab-ten.vercel.app/styles?style=frutiger-aero) — Sky-blue-to-grass gradients, dewy glass cards and a grass-green glow — 2000s optimism rendered in Aero glass. · copy prompt
- [Memphis](https://ui-lab-ten.vercel.app/styles?style=memphis) — 80s Italian toy-shop energy — primary-color geometry, hard candy shadows and a radius clash between rounded cards and pill buttons. · copy prompt
- [Bauhaus](https://ui-lab-ten.vercel.app/styles?style=bauhaus) — Primary-color-and-black geometric composition — square corners, zero ornament, the functionalist restraint of the 1920s design school. · copy prompt
- [Art Deco](https://ui-lab-ten.vercel.app/styles?style=art-deco) — Black-and-gold symmetrical luxury with hairline gold linework, reviving the ceremonial glamour of the 1920s Jazz Age. · copy prompt
- [Retro Terminal](https://ui-lab-ten.vercel.app/styles?style=retro-terminal) — Glowing green phosphor text on a black CRT screen with flickering scanlines — a terminal window straight out of the Matrix. · copy prompt
- [Dark Tech](https://ui-lab-ten.vercel.app/styles?style=dark-tech) — A restrained dark SaaS surface with soft glass cards and a single electric-violet accent — precise, quiet, unmistakably Linear-style. · copy prompt
- [Cyberpunk](https://ui-lab-ten.vercel.app/styles?style=cyberpunk) — Neon cyan and magenta slicing through a near-black grid — sharp corners, glowing edges, a night-city interface with an attitude. · copy prompt
- [Aurora Gradient](https://ui-lab-ten.vercel.app/styles?style=aurora) — Diffuse multi-hue gradient light pooling behind frosted glass cards — soft, borderless, like an aurora seen through a window. · copy prompt
- [Sci-Fi HUD](https://ui-lab-ten.vercel.app/styles?style=sci-fi-hud) — A cockpit-style heads-up display in monospace type and cyan hairlines — data-dense, diegetic, straight out of a spacecraft interface. · copy prompt
- [Bento Grid](https://ui-lab-ten.vercel.app/styles?style=bento-grid) — Uneven cards packed edge-to-edge like compartments in a bento box, each cell sized to say exactly one thing. · copy prompt
- [Organic Shapes](https://ui-lab-ten.vercel.app/styles?style=organic-shapes) — Soft rounded blobs and warm earth tones — every corner curves, nothing points. · copy prompt
- [Hand-drawn](https://ui-lab-ten.vercel.app/styles?style=hand-drawn) — Wobbly pencil-drawn borders and comic lettering on notebook paper — like a sketch that escaped into a browser. · copy prompt
- [Dopamine Colors](https://ui-lab-ten.vercel.app/styles?style=dopamine-colors) — Candy-saturated color blocks and oversized rounded shapes turned up to maximum joy. · copy prompt
- [Material Design 3](https://ui-lab-ten.vercel.app/styles?style=material-design) — Google's tonal surfaces and pill-shaped controls — elevation and color roles do the structural work. · copy prompt
- [Flat Design 2.0](https://ui-lab-ten.vercel.app/styles?style=flat-design) — Solid color blocks and zero shadow — every surface stays perfectly flat on the page. · copy prompt

## Palettes

- [Morandi](https://ui-lab-ten.vercel.app/palettes?palette=morandi) — Grays that remember being colors — dusty green, muted rose and warm greige, all hushed to a whisper. · via catalog.json
- [Cream](https://ui-lab-ten.vercel.app/palettes?palette=cream) — Butter and clotted cream stacked fresh from the oven — warm, sweet without tipping into cloying. · via catalog.json
- [Macaron](https://ui-lab-ten.vercel.app/palettes?palette=macaron) — Frosted pastries lined up in a dessert window — light, girlish, with pink and mint as the signature duo. · via catalog.json
- [Sage](https://ui-lab-ten.vercel.app/palettes?palette=sage) — A row of matte glass bottles on an organic skincare counter — botanical, quiet, restrained. · via catalog.json
- [Dopamine](https://ui-lab-ten.vercel.app/palettes?palette=dopamine) — Hot rose crashing into tangerine — like biting into a fruit candy that glows from the inside. · via catalog.json
- [Neon](https://ui-lab-ten.vercel.app/palettes?palette=neon) — Electric cyan and magenta bursting off a deep indigo base — the smell of neon signage on a rainy night. · via catalog.json
- [Sunset](https://ui-lab-ten.vercel.app/palettes?palette=sunset) — Coral melting into gold — the last hour of a holiday beach before the sun goes down. · via catalog.json
- [Pop](https://ui-lab-ten.vercel.app/palettes?palette=pop) — Cobalt slamming into bright yellow, pinned down by near-black text — crisp as a sports poster. · via catalog.json
- [Dark Luxe](https://ui-lab-ten.vercel.app/palettes?palette=dark-luxe) — Black lacquer and champagne gold — the hush of a five-star lobby after the last guest has gone up. · via catalog.json
- [Midnight Blue](https://ui-lab-ten.vercel.app/palettes?palette=midnight) — Coding at 2am under a single desk lamp — deep, trustworthy blue with an observatory hush. · via catalog.json
- [Forest Night](https://ui-lab-ten.vercel.app/palettes?palette=forest-night) — A forest after rain, moss and lantern light — quiet but unmistakably alive. · via catalog.json
- [Mono Slate](https://ui-lab-ten.vercel.app/palettes?palette=mono-slate) — No color at all — black-and-white-photography restraint that lets the content speak. · via catalog.json
- [Earth Tones](https://ui-lab-ten.vercel.app/palettes?palette=earth) — Clay pots, linen sheets, and wood left out in the sun — terracotta grounded by a touch of olive. · via catalog.json
- [Ocean Blue](https://ui-lab-ten.vercel.app/palettes?palette=ocean) — Clean and cool, like a tide pool at low water — deep teal grounded by a flash of sky blue. · via catalog.json
- [Corporate Blue](https://ui-lab-ten.vercel.app/palettes?palette=business) — Professional, trustworthy, unshakeably corporate — the blue that never surprises anyone. · via catalog.json
- [Ink Wash](https://ui-lab-ten.vercel.app/palettes?palette=ink-wash) — Rice paper, pine-soot ink, and a single stroke of cinnabar — Chinese aesthetics translated for a screen. · via catalog.json

## Design Systems

- [Graphite](https://ui-lab-ten.vercel.app/layouts?ds=graphite) — The baseline light-and-dark skin for a tool-first Agent workbench: quiet graphite surfaces, hairline structure, compact controls, and one restrained accent keep long-running work legible without competing with it. theme: ui-lab theme graphite
- [Nightflight](https://ui-lab-ten.vercel.app/layouts?ds=nightflight) — A near-black workbench with cool graphite depth, precise lavender-blue focus states, and restrained contrast for long-running tasks after dark. theme: ui-lab theme nightflight
- [Stark](https://ui-lab-ten.vercel.app/layouts?ds=stark) — A pure-black, high-contrast tool surface shaped by crisp geometry, compact radii, and a single electric-blue action color. theme: ui-lab theme stark
- [Paper](https://ui-lab-ten.vercel.app/layouts?ds=paper) — A warm-white, paper-like workspace where gentle gray ink, generous breathing room, and one clear blue action color replace heavy chrome. theme: ui-lab theme paper
- [Terracotta](https://ui-lab-ten.vercel.app/layouts?ds=terracotta) — A quiet cream workbench with terracotta emphasis, crafted serif display type, and warm tactile surfaces for thoughtful collaboration. theme: ui-lab theme terracotta
- [Indigo](https://ui-lab-ten.vercel.app/layouts?ds=indigo) — A cool-white precision workbench with misted blue-gray structure and a controlled indigo action color for data-heavy operations. theme: ui-lab theme indigo
- [Pearl](https://ui-lab-ten.vercel.app/layouts?ds=pearl) — A system-native pearl-white workbench where quiet gray zoning, fine hairlines, and one restrained blue accent keep focused tools immediately legible. theme: ui-lab theme pearl
- [Jade](https://ui-lab-ten.vercel.app/layouts?ds=jade) — A dark developer workbench with ink-black depth, precise emerald action states, and the dense clarity of a database operations tool. theme: ui-lab theme jade
- [Prism](https://ui-lab-ten.vercel.app/layouts?ds=prism) — A white design workbench with crisp black ink, one clear blue action color, and soft color blocks reserved for labels and illustration. theme: ui-lab theme prism
- [Coral](https://ui-lab-ten.vercel.app/layouts?ds=coral) — An ivory-stone workbench with coral action states and an academic warmth suited to thoughtful enterprise research and language tools. theme: ui-lab theme coral
- [Stone](https://ui-lab-ten.vercel.app/layouts?ds=stone) — A warm-stone monochrome workbench with pure-black emphasis, restrained serif display type, and illustration-only waveform color. theme: ui-lab theme stone
- [Parchment](https://ui-lab-ten.vercel.app/layouts?ds=parchment) — A cream-parchment workbench defined by charcoal pill controls and a heartbeat of rose, distinct from Terracotta's serif type and clay-orange craft. theme: ui-lab theme parchment
- [Frost](https://ui-lab-ten.vercel.app/layouts?ds=frost) — An in-house glass workbench with pearl translucency, bright glass edges, and soft aurora color visibly diffused behind every working surface. theme: ui-lab theme frost
- [Eclipse](https://ui-lab-ten.vercel.app/layouts?ds=eclipse) — A pure-black monochrome workbench where the only emphasis is inversion: white pill controls with near-black text, circular hairline icon chips, and a four-step gray text ladder. theme: ui-lab theme eclipse

## Application Recipes

- [Agent Workbench](https://ui-lab-ten.vercel.app/components/blocks/agent-workbench) — A dense application shell for agent conversations, tools, approvals, and artifacts. · via catalog.json
- [SaaS Landing](https://ui-lab-ten.vercel.app/sections) — A product-led landing composition with a clear hero, proof, features, pricing, and CTA rhythm. · via catalog.json

## Usage for agents

1. Components install directly with the shadcn CLI: run the `install` command shown next to each component (`npx shadcn@latest add <url>`).
2. Recipes describe a compatible profile, Theme Kit, entry component, component set, and required/forbidden constraints. Use `ui-lab init`, then `ui-lab compose <recipe>` to produce an install plan without executing external commands.
3. Design Systems backed by Theme Kits install through `ui-lab theme <slug>`; inspect the selected kit before applying its shadcn command or CSS endpoint.
4. Other vocabulary (atom tokens, icon styles/motions, styles, palettes) has no CLI installer — fetch `/catalog.json`, find the item by `slug`, and read `fetch.value` for the ready-to-use prompt or token block. Or open its `pageUrl` to see the live sample first.
5. To fetch every item's inlined `fetch.value` in one request instead of round-tripping through JSON, read `/llms-full.txt`.