# Lode UI

> React components, blocks and templates with motion built in. Installs with the shadcn CLI as source you own.

## Install

- Free: `npx shadcn@latest add https://lodeui.com/r/<name>.json`
- Pro: add the `@lode` registry to components.json with `"headers": { "Authorization": "Bearer ${LODE_API_KEY}" }`, then `npx shadcn@latest add @lode/<name>`
- Docs for any item: https://lodeui.com/components/<name>/markdown (or /blocks, /templates)
- MCP server: https://lodeui.com/api/mcp

## Components

- button [Actions]: A clear, responsive action with quiet secondary states.
- segmented-control [Inputs]: A compact single choice with a pill that slides to the selection.
- number-field [Inputs]: A stepper you can press, hold, scrub, or type into. Push past a limit and it pushes back.
- select [Inputs]: A pill trigger with a springy menu, typeahead, and full keyboard support.
- date-range-picker (Pro) [Date & Time]: Pick a start and an end on a calendar that previews the range as you move.
- command-palette (Pro) [Navigation]: Type to filter, arrow to move, Enter to run. Inline or as a ⌘K dialog.
- animated-number [Data Display]: A number that springs to its new value instead of jumping.
- donut-chart (Pro) [Charts]: Proportions as arcs that morph when the data changes.
- area-chart (Pro) [Charts]: A smooth trend line with a comparison period and an inspectable crosshair.
- switch [Inputs]: A toggle whose thumb stretches as you press it.
- slider [Inputs]: Drag, click or use the keys. The value rides above the thumb while you drag.
- dropdown-menu [Overlays]: Actions, checkboxes and radio options in a springy menu with full keyboard support.
- action-button [Actions]: A button that morphs through saving, saved and failed, right where you clicked.
- number-ticker [Data Display]: Every digit rolls on its own wheel, odometer style.
- tabs [Navigation]: Underline or pill tabs with an indicator that glides between them.
- tooltip [Overlays]: A small label on hover or focus, with a delay that respects intent.
- checkbox [Inputs]: A checkbox whose tick draws itself, with an indeterminate state.
- progress [Feedback]: Linear bar, ring and segmented meter, all spring-driven.
- toast [Feedback]: Stacked notifications that fan out on hover, swipe to dismiss, and track promises.
- dialog [Overlays]: A modal or side sheet with focus trap, scroll lock and focus return.
- accordion [Navigation]: Expandable sections with smooth height and a turning plus.
- otp-input [Inputs]: One-time code boxes that handle paste and autofill, and shake on a wrong code.
- avatar-group [Data Display]: Overlapping avatars that spread apart on hover.
- sparkline [Charts]: A tiny trend line that draws itself in.
- bar-chart (Pro) [Charts]: Bars that grow in and morph between datasets, with a hover readout.
- candlestick-chart (Pro) [Charts]: OHLC candles with volume, moving averages and a price crosshair.
- heatmap (Pro) [Charts]: A color-scaled grid with row and column tracking, for cohorts and schedules.
- stacked-area-chart (Pro) [Charts]: Stacked series above and below zero, morphing as the range changes.
- folder-stack (Pro) [Media]: A folder that fans its files out on hover and opens them in a lightbox.
- profile-card (Pro) [Data Display]: A portrait whose details rise into a glass panel on hover.
- input [Inputs]: Text, search, password and URL inputs with icons, clear button and a labelled Field wrapper.
- textarea [Inputs]: A textarea that grows with its content, with an optional character counter.
- badge [Data Display]: Tone badges and status dots for states like paid, pending, live and degraded.
- alert [Feedback]: Inline alerts and page banners in four tones, with actions and dismiss.
- skeleton [Feedback]: Shimmering placeholders for loading content.
- empty-state [Feedback]: Empty, no-results, error, offline, maintenance and rate-limit states with one API.
- breadcrumb [Navigation]: Hierarchy trail that collapses long paths and works with any router link.
- pagination [Navigation]: Page numbers with ellipses and a gliding current-page indicator.
- stepper [Navigation]: Horizontal or vertical steps with animated progress and back-navigation.
- radio-group [Inputs]: Radios as a list or as choice cards, with arrow-key navigation.
- tag-input [Inputs]: Type, paste or pick suggestions to add tags; validates each one.
- combobox [Inputs]: Searchable select for one or many values, fully keyboard driven.
- popover [Overlays]: An anchored panel for filters, forms and details.
- kpi-card [Data Display]: A metric with delta, hint and an optional sparkline.
- timeline [Data Display]: Vertical activity timeline with toned icons that stagger in.
- data-table (Pro) [Data Display]: Sorting, search, filters, selection, bulk actions, column visibility, pagination, expandable rows, export and mobile cards.
- code-viewer [Developer]: File tabs, line numbers, highlighted lines, copy and expand, with a dependency-free highlighter.
- terminal [Developer]: A terminal window that types commands and streams output, with replay and copy.
- json-viewer [Developer]: Collapsible, syntax-colored JSON tree.
- diff-viewer (Pro) [Developer]: Line diff in unified or split view with added/removed counts.
- log-viewer (Pro) [Developer]: Live log stream with level filters, search and follow mode.
- uptime-bar (Pro) [Developer]: Daily status bars with uptime percentage and incident tooltips.
- env-editor (Pro) [Developer]: Masked env vars with per-environment scope, validation and .env paste.
- spotlight-card [Motion]: A card lit by a spotlight that follows the pointer, border included.
- magnetic [Motion]: Makes any element lean toward the pointer and spring back.
- text-reveal [Text Effects]: Text that rises out of a blur, word by word, as it scrolls into view.
- text-scramble [Text Effects]: Characters cycle through glyphs and settle into the final text.
- border-beam (Pro) [Motion]: A light that travels around an element's border.
- shimmer-text [Text Effects]: Text with a light sweep, for thinking and loading states.
- reveal [Motion]: Scroll-triggered fade-and-slide, plus a Stagger for groups.
- sortable-list (Pro) [Layout]: Drag to reorder, or use arrow keys on the handle; announces moves.
- tilt-card (Pro) [Motion]: A card that tilts in 3D toward the pointer with a moving glare.
- line-chart [Charts]: Multi-series lines with legend toggles, crosshair and shared tooltip.
- funnel-chart (Pro) [Charts]: Conversion funnel with overall and step-to-step rates.
- gauge [Charts]: Half-circle gauge with warning and danger thresholds.
- prompt-input (Pro) [AI]: Chat composer that grows, takes files by picker, paste or drop, and turns into Stop while generating.
- ai-reasoning (Pro) [AI]: A collapsible thinking trace that folds into a summary when done.
- citation-list [AI]: Numbered sources and inline citation marks for AI answers.
- rating [Inputs]: Interactive or read-only star rating with half stars.
- product-card (Pro) [Commerce]: Product tile with swatches, wishlist, sale price and add-to-cart.
- dock (Pro) [Navigation]: macOS-style dock whose icons magnify under the pointer, with tooltips, badges and active dots.
- marquee (Pro) [Motion]: Endless, seamless scroller for logos and testimonials that glides to a stop on hover.
- flip-card (Pro) [Motion]: A two-sided card that flips in 3D on click, Enter or hover.
- swipe-deck (Pro) [Media]: Tinder-style card stack: drag, tap or use arrow keys to pass or like, with undo.
- like-button (Pro) [Actions]: Heart toggle that bursts into particles and rolls its count.
- hold-to-confirm (Pro) [Actions]: Press and hold to confirm destructive or important actions; letting go cancels.
- slide-to-confirm (Pro) [Actions]: Drag the handle to the end to confirm a payment or action; Enter works too.
- typewriter (Pro) [Text Effects]: Types phrases out, deletes them and moves on, with a blinking caret.
- word-rotate (Pro) [Text Effects]: Cycles words in place with a blur-slide while the width springs to fit.
- aurora-background (Pro) [Backgrounds]: Slow drifting northern-lights glow behind any section.
- morphing-dialog (Pro) [Overlays]: A card that morphs into a dialog: cover, title and frame fly to their new places.
- animated-list (Pro) [Feedback]: A feed where new entries spring in at the top and older ones make room.
- image-compare (Pro) [Media]: Before and after slider with drag, hover and keyboard control.
- carousel (Pro) [Media]: Swipeable slides with arrows, animated dots, keys and pausable autoplay.
- color-picker (Pro) [Inputs]: Saturation and hue pickers, hex field, swatches, eyedropper and copy.
- file-dropzone (Pro) [Forms]: Drag-and-drop upload with type, size and count checks and per-file progress.
- scroll-progress (Pro) [Navigation]: A reading progress bar that springs with the page or any scroll container.
- dynamic-island (Pro) [Feedback]: A black pill that morphs its size and shape to fit live activity.
- expandable-tabs (Pro) [Navigation]: Icon tabs where the selected one grows to reveal its label.
- tree-view (Pro) [Data Display]: Folders and files with animated expand, indent guides and full tree keyboard support.
- context-menu (Pro) [Overlays]: Right-click menu that opens at the pointer, with long-press, typeahead and shortcuts.
- hover-card (Pro) [Overlays]: A rich preview that appears on hover or focus and stays while you move into it.
- orbiting-circles (Pro) [Motion]: Icons orbiting a center on rings, staying upright as they travel.
- flip-clock (Pro) [Date & Time]: Split-flap countdown where every digit flips like a departures board.
- contribution-graph (Pro) [Charts]: A year of activity as a grid of days with tooltips and keyboard exploring.
- resizable-panels (Pro) [Layout]: Panels with draggable, keyboard-resizable dividers and double-click reset.
- drawer (Pro) [Overlays]: A bottom sheet you drag down to dismiss, with focus trap and safe-area padding.
- confetti (Pro) [Feedback]: Fire a confetti burst from any point, or use the button that bursts from itself.
- range-slider (Pro) [Inputs]: Two-thumb range with value bubbles and an optional live histogram.
- wheel-picker (Pro) [Date & Time]: iOS-style scroll wheel with 3D rows, snapping and keyboard support.
- toggle-group (Pro) [Inputs]: A row of toggle buttons for one choice (alignment) or several (bold, italic), with a sliding pill.
- mention-input (Pro) [Inputs]: A textarea that suggests people as you type @ and inserts their handle.
- password-strength (Pro) [Forms]: New-password field with show / hide, a four-step meter and a live rules checklist.
- phone-input (Pro) [Forms]: Phone field with a searchable country picker that formats numbers as you type.
- credit-card-input (Pro) [Commerce]: Card fields with brand detection, Luhn validation and a live card that flips for the CVC.
- signature-pad (Pro) [Forms]: Draw a signature with mouse, pen or finger; strokes thin with speed. Undo and clear.
- knob (Pro) [Inputs]: A rotary dial like on audio gear: drag, scroll or use the arrow keys.
- inline-edit (Pro) [Inputs]: Text that becomes a field on click; Enter saves with validation, Escape cancels.
- calendar (Pro) [Date & Time]: Single-date calendar with month and year jumping, marked days and grid keyboard support.
- time-slot-picker (Pro) [Date & Time]: Bookable time slots where picking one slides out a confirm button.
- navigation-menu (Pro) [Navigation]: Header menu whose panels slide between triggers and morph to fit, with featured cards.
- sidebar (Pro) [Navigation]: App sidebar that collapses to icons, with nested groups, badges and a gliding active marker.
- speed-dial (Pro) [Actions]: A floating action button that fans out labelled actions.
- bottom-nav (Pro) [Navigation]: Mobile tab bar with an animated indicator, badges and safe-area padding.
- table-of-contents (Pro) [Navigation]: On-this-page list that highlights the current section, with a gliding marker and progress ring.
- loader (Pro) [Feedback]: Six loading indicators (spinner, dots, bars, pulse, orbit, ring) with one API.
- notification-center (Pro) [Feedback]: A bell with unread badge opening a panel with tabs, mark-all-read and dismiss.
- announcement-bar (Pro) [Feedback]: A slim dismissible bar above the header that rotates launch messages.
- typing-indicator (Pro) [AI]: Bouncing dots in a chat bubble with who is typing.
- radar-chart (Pro) [Charts]: Compare series across dimensions; shapes morph and legend toggles series.
- scatter-chart (Pro) [Charts]: Points or bubbles on two measures with groups, hover card and keyboard-focusable dots.
- treemap (Pro) [Charts]: Squarified rectangles sized by value, for revenue mix, storage and market caps.
- activity-rings (Pro) [Charts]: Concentric progress rings like a fitness watch, overlapping past 100%.
- gradient-text (Pro) [Text Effects]: Text filled with a slowly flowing gradient.
- particles (Pro) [Backgrounds]: A drifting constellation of dots on canvas that moves away from the pointer.
- meteors (Pro) [Backgrounds]: Shooting stars streaking across a card or hero.
- ripple-button (Pro) [Actions]: A button that ripples from wherever it's pressed.
- animated-beam (Pro) [Motion]: A glowing pulse travelling along a curved line between two elements.
- grid-pattern (Pro) [Backgrounds]: A technical grid background where a few cells gently light up.
- scroll-stack (Pro) [Layout]: Cards that stick and stack as you scroll, earlier ones shrinking into the pile.
- theme-switch (Pro) [Inputs]: A day / night switch: the sun sets into a moon and the stars come out.
- video-player (Pro) [Media]: Video with custom auto-hiding controls, scrubbing, captions, fullscreen and shortcuts.
- audio-player (Pro) [Media]: Compact audio player with a clickable waveform, skip and playback speed.
- image-lens (Pro) [Media]: A magnifying glass that follows the pointer (or arrow keys) over an image.
- lightbox (Pro) [Media]: Thumbnail grid that opens a full-screen viewer with swipe, arrows and captions.
- chat-message (Pro) [AI]: A chat turn with streaming cursor, copy, feedback and regenerate.
- voice-orb (Pro) [AI]: A living orb for voice assistants: idle, listening, thinking and speaking states.
- coupon-input (Pro) [Commerce]: Promo code field that validates, shows a removable ticket and shakes on errors.
- payment-card (Pro) [Commerce]: A wallet card with a holographic sheen that follows the pointer and a number reveal.
- product-tour (Pro) [Overlays]: A guided tour: a spotlight glides between elements with an explaining card.

## Blocks

- metrics-dashboard (Pro) [Analytics]: KPI tabs, one inspectable chart with period comparison, and top pages and sources.
- revenue-breakdown (Pro) [Analytics]: Recurring revenue split into new, expansion and churn, with a draggable range brush.
- mrr-waterfall (Pro) [Analytics]: How MRR moved from start to end of a period, and which accounts moved it.
- cohort-retention (Pro) [Analytics]: Retention by signup month as a heatmap, with segments.
- usage-forecast (Pro) [Billing]: Actual and projected usage against a budget, with the day you'll cross it.
- billing-settings (Pro) [Billing]: Plan, payment method, usage meters, invoices and a prorated plan change.
- trading-terminal (Pro) [Finance]: Live price, candlesticks, a watchlist with sparklines and an order ticket.
- agent-run (Pro) [AI]: An AI coding agent's run: steps stream in with search results, code and a diff.
- ai-chat (Pro) [AI]: A chat with streamed answers, model picker, suggestions and stop.
- inbox-triage (Pro) [Productivity]: Keyboard-first triage: j/k to move, e to archive, s to snooze, with undo.
- week-calendar (Pro) [Productivity]: A week view with calendars, a now line, and click-to-create events.
- onboarding-checklist [SaaS]: A setup checklist with progress ring and inline actions.
- pricing-section [Marketing]: Three tiers with a monthly/yearly toggle whose prices roll.
- revenue-analytics (Pro) [SaaS]: Revenue trend, MRR, ARR, customers and conversion, source mix and a live transactions feed.
- api-keys-manager (Pro) [Developer]: Create scoped live/test keys, reveal once, copy, and revoke with confirmation.
- deployments (Pro) [Developer]: Deployment history with status, branch and commit, live build logs and redeploy.
- webhook-logs (Pro) [Developer]: Webhook deliveries with payload and response inspection, failure filter and retry.
- system-status [Developer]: Overall status, 60-day uptime per service and incident history.
- feature-flags (Pro) [Developer]: Flags per environment with switches, percentage rollouts and a change log.
- api-playground (Pro) [Developer]: Pick an endpoint, edit headers and body, send, and read the JSON response or cURL.
- env-variables (Pro) [Developer]: Project env vars with masking, scopes, .env paste, dirty state and save.
- crm-pipeline (Pro) [CRM]: Drag deals across stages; open, weighted forecast and won totals update live.
- crm-contacts (Pro) [CRM]: Contacts on the data table with filters, expandable details, bulk email, tag and delete.
- store-orders (Pro) [Commerce]: Order KPIs, status and channel filters, bulk fulfil, packing slips and CSV export.
- product-detail (Pro) [Commerce]: Gallery that follows the color, variants with stock, quantity and add to cart.
- support-ticket (Pro) [Support]: Conversation with internal notes, macros, SLA countdown and customer context.
- cms-posts (Pro) [Productivity]: Posts by status and an editor with tags, word count, preview and publish.
- sign-in [Auth]: Password or magic link, SSO and GitHub, inline validation and a check-your-email state.
- two-factor [Auth]: Authenticator code with resend timer, backup-code fallback and success state.
- ai-playground (Pro) [AI]: Compare two models on one prompt with parameters, reasoning, streaming, tokens and cost.
- kanban-board (Pro) [Productivity]: Sprint board with drag between columns, WIP limits, quick add and points.
- team-members (Pro) [SaaS]: Seat usage, invite by email with role, change roles, resend or remove.
- hero-section (Pro) [Marketing]: Launch hero with badge, flowing gradient headline, two actions and a live product preview on a glowing grid.
- feature-bento (Pro) [Marketing]: A bento grid of features, each with a small live visual and a pointer spotlight.
- testimonials-wall (Pro) [Marketing]: Testimonials in slowly scrolling columns that pause on hover, rows on phones.
- stats-section (Pro) [Marketing]: Headline numbers that count up when they scroll into view.
- logo-cloud (Pro) [Marketing]: Trusted-by logos as an endless strip or a static grid.
- cta-section (Pro) [Marketing]: A dark closing call to action with meteors and an email capture.
- faq-section (Pro) [Marketing]: Searchable FAQ with category filters, an accordion and a contact fallback.
- changelog (Pro) [Marketing]: Release notes timeline with type filters, cover art and subscribe.
- footer-section (Pro) [Marketing]: Site footer with link columns, newsletter, live status and socials.
- pricing-comparison (Pro) [Billing]: Plan comparison table with sticky headers, yearly toggle and a mobile plan picker.
- invoice (Pro) [Billing]: An invoice with status timeline, line items, totals, copyable bank details and pay.
- checkout (Pro) [Commerce]: Three-step checkout with shipping choice, card entry, promo codes and order summary.
- shopping-cart (Pro) [Commerce]: Cart with quantity steppers, remove with undo and free-shipping progress.
- order-tracking (Pro) [Commerce]: Shipment tracking with a route map, moving van, stepper and event timeline.
- sign-up (Pro) [Auth]: Three-step sign-up: account, password with live rules and email code verification.
- forgot-password (Pro) [Auth]: Password reset: request link, resend timer, new password and done state.
- onboarding-wizard (Pro) [SaaS]: Welcome flow for role, goals, team size and invites, ending with confetti.
- settings-account (Pro) [SaaS]: Profile with inline edits, security toggles, active sessions and guarded delete.
- notification-preferences (Pro) [SaaS]: Channel-by-event matrix with column toggles, quiet hours and unsaved-changes bar.
- integrations-gallery (Pro) [Developer]: Searchable integrations with categories and connect / disconnect in place.
- ai-image-generator (Pro) [AI]: Prompt to images with style and ratio, shimmer placeholders, likes and a lightbox.
- ai-search (Pro) [AI]: Answer engine with streamed reasoning, inline citations, sources and follow-ups.
- meeting-scheduler (Pro) [Productivity]: Book a call: host card, calendar, time slots and confirmation.
- file-manager (Pro) [Productivity]: File browser with folders, grid / list views, search, stars and right-click actions.
- team-chat (Pro) [Productivity]: Team chat with channels, reactions, mentions, typing indicator and mobile drawer.
- crypto-wallet (Pro) [Finance]: Wallet balance, portfolio chart, holdings with sparklines and a slide-to-send flow.
- expense-tracker (Pro) [Finance]: Spending by category, budget bars that warn, quick add and recent expenses.
- help-center (Pro) [Support]: Help center with instant search, topics, article reader and feedback.
- realtime-analytics (Pro) [Analytics]: Live visitors counter, per-second bars, event feed, top pages and devices.
- lead-detail (Pro) [CRM]: CRM lead with deal stage, AI lead score, activity timeline, notes and next steps.

## Templates

- saas-landing (Pro) [Marketing]: Hero with signup, logos, feature grid, stats, testimonials, pricing, FAQ, CTA and footer.
- status-page [Developer]: A public status page with subscribe, uptime per service and incident history.
- admin-dashboard (Pro) [Admin]: App shell with sidebar (drawer on mobile), top bar, breadcrumbs and pages for overview, customers, team, billing and API keys.
- ai-landing (Pro) [AI]: A landing page for an AI assistant: streaming chat hero, animated data-flow diagram, features, pricing and FAQ.
- fintech-landing (Pro) [Fintech]: A neobank landing page: stacked holographic cards, rates, budget rings, trust stats and FAQ.
- devtool-landing (Pro) [Developer]: An API platform landing page: terminal hero, code sample, features grid, plan comparison and changelog.
- ecommerce-landing (Pro) [Ecommerce]: A storefront landing page: perks ticker, editorial hero, product grid with cart, story and reviews.
- agency-landing (Pro) [Marketing]: A studio landing page: word-by-word headline, capabilities ticker, morphing case studies and services.
- app-landing (Pro) [Marketing]: A mobile app landing page: phone mockup, store buttons, scroll-stacked features and reviews.
- crm-landing (Pro) [CRM]: A CRM landing page: live pipeline hero, feature bento, results stats and plan comparison.
- analytics-landing (Pro) [SaaS]: An analytics SaaS landing page with an embedded live realtime dashboard demo.
- waitlist-landing (Pro) [SaaS]: A one-screen waitlist page: particles, countdown, email capture, referral link and signup count.
- conference-landing (Pro) [Marketing]: An event landing page: countdown, speakers, day-by-day schedule, tickets and FAQ.