# Components Every Lode item, grouped the way the site groups them. Read an item's doc with `get_component` or https://lodeui.com/components//markdown before using it. ## Components ### Actions - `button`: A clear, responsive action with quiet secondary states. - `action-button`: A button that morphs through saving, saved and failed, right where you clicked. - `like-button` (Pro): Heart toggle that bursts into particles and rolls its count. - `hold-to-confirm` (Pro): Press and hold to confirm destructive or important actions; letting go cancels. - `slide-to-confirm` (Pro): Drag the handle to the end to confirm a payment or action; Enter works too. - `speed-dial` (Pro): A floating action button that fans out labelled actions. - `ripple-button` (Pro): A button that ripples from wherever it's pressed. ### Inputs - `segmented-control`: A compact single choice with a pill that slides to the selection. - `number-field`: A stepper you can press, hold, scrub, or type into. Push past a limit and it pushes back. - `select`: A pill trigger with a springy menu, typeahead, and full keyboard support. - `switch`: A toggle whose thumb stretches as you press it. - `slider`: Drag, click or use the keys. The value rides above the thumb while you drag. - `checkbox`: A checkbox whose tick draws itself, with an indeterminate state. - `otp-input`: One-time code boxes that handle paste and autofill, and shake on a wrong code. - `input`: Text, search, password and URL inputs with icons, clear button and a labelled Field wrapper. - `textarea`: A textarea that grows with its content, with an optional character counter. - `radio-group`: Radios as a list or as choice cards, with arrow-key navigation. - `tag-input`: Type, paste or pick suggestions to add tags; validates each one. - `combobox`: Searchable select for one or many values, fully keyboard driven. - `rating`: Interactive or read-only star rating with half stars. - `color-picker` (Pro): Saturation and hue pickers, hex field, swatches, eyedropper and copy. - `range-slider` (Pro): Two-thumb range with value bubbles and an optional live histogram. - `toggle-group` (Pro): A row of toggle buttons for one choice (alignment) or several (bold, italic), with a sliding pill. - `mention-input` (Pro): A textarea that suggests people as you type @ and inserts their handle. - `knob` (Pro): A rotary dial like on audio gear: drag, scroll or use the arrow keys. - `inline-edit` (Pro): Text that becomes a field on click; Enter saves with validation, Escape cancels. - `theme-switch` (Pro): A day / night switch: the sun sets into a moon and the stars come out. ### Forms - `file-dropzone` (Pro): Drag-and-drop upload with type, size and count checks and per-file progress. - `password-strength` (Pro): New-password field with show / hide, a four-step meter and a live rules checklist. - `phone-input` (Pro): Phone field with a searchable country picker that formats numbers as you type. - `signature-pad` (Pro): Draw a signature with mouse, pen or finger; strokes thin with speed. Undo and clear. ### Date & Time - `date-range-picker` (Pro): Pick a start and an end on a calendar that previews the range as you move. - `flip-clock` (Pro): Split-flap countdown where every digit flips like a departures board. - `wheel-picker` (Pro): iOS-style scroll wheel with 3D rows, snapping and keyboard support. - `calendar` (Pro): Single-date calendar with month and year jumping, marked days and grid keyboard support. - `time-slot-picker` (Pro): Bookable time slots where picking one slides out a confirm button. ### Navigation - `command-palette` (Pro): Type to filter, arrow to move, Enter to run. Inline or as a ⌘K dialog. - `tabs`: Underline or pill tabs with an indicator that glides between them. - `accordion`: Expandable sections with smooth height and a turning plus. - `breadcrumb`: Hierarchy trail that collapses long paths and works with any router link. - `pagination`: Page numbers with ellipses and a gliding current-page indicator. - `stepper`: Horizontal or vertical steps with animated progress and back-navigation. - `dock` (Pro): macOS-style dock whose icons magnify under the pointer, with tooltips, badges and active dots. - `scroll-progress` (Pro): A reading progress bar that springs with the page or any scroll container. - `expandable-tabs` (Pro): Icon tabs where the selected one grows to reveal its label. - `navigation-menu` (Pro): Header menu whose panels slide between triggers and morph to fit, with featured cards. - `sidebar` (Pro): App sidebar that collapses to icons, with nested groups, badges and a gliding active marker. - `bottom-nav` (Pro): Mobile tab bar with an animated indicator, badges and safe-area padding. - `table-of-contents` (Pro): On-this-page list that highlights the current section, with a gliding marker and progress ring. ### Layout - `sortable-list` (Pro): Drag to reorder, or use arrow keys on the handle; announces moves. - `resizable-panels` (Pro): Panels with draggable, keyboard-resizable dividers and double-click reset. - `scroll-stack` (Pro): Cards that stick and stack as you scroll, earlier ones shrinking into the pile. ### Overlays - `dropdown-menu`: Actions, checkboxes and radio options in a springy menu with full keyboard support. - `tooltip`: A small label on hover or focus, with a delay that respects intent. - `dialog`: A modal or side sheet with focus trap, scroll lock and focus return. - `popover`: An anchored panel for filters, forms and details. - `morphing-dialog` (Pro): A card that morphs into a dialog: cover, title and frame fly to their new places. - `context-menu` (Pro): Right-click menu that opens at the pointer, with long-press, typeahead and shortcuts. - `hover-card` (Pro): A rich preview that appears on hover or focus and stays while you move into it. - `drawer` (Pro): A bottom sheet you drag down to dismiss, with focus trap and safe-area padding. - `product-tour` (Pro): A guided tour: a spotlight glides between elements with an explaining card. ### Data Display - `animated-number`: A number that springs to its new value instead of jumping. - `number-ticker`: Every digit rolls on its own wheel, odometer style. - `avatar-group`: Overlapping avatars that spread apart on hover. - `profile-card` (Pro): A portrait whose details rise into a glass panel on hover. - `badge`: Tone badges and status dots for states like paid, pending, live and degraded. - `kpi-card`: A metric with delta, hint and an optional sparkline. - `timeline`: Vertical activity timeline with toned icons that stagger in. - `data-table` (Pro): Sorting, search, filters, selection, bulk actions, column visibility, pagination, expandable rows, export and mobile cards. - `tree-view` (Pro): Folders and files with animated expand, indent guides and full tree keyboard support. ### Charts - `donut-chart` (Pro): Proportions as arcs that morph when the data changes. - `area-chart` (Pro): A smooth trend line with a comparison period and an inspectable crosshair. - `sparkline`: A tiny trend line that draws itself in. - `bar-chart` (Pro): Bars that grow in and morph between datasets, with a hover readout. - `candlestick-chart` (Pro): OHLC candles with volume, moving averages and a price crosshair. - `heatmap` (Pro): A color-scaled grid with row and column tracking, for cohorts and schedules. - `stacked-area-chart` (Pro): Stacked series above and below zero, morphing as the range changes. - `line-chart`: Multi-series lines with legend toggles, crosshair and shared tooltip. - `funnel-chart` (Pro): Conversion funnel with overall and step-to-step rates. - `gauge`: Half-circle gauge with warning and danger thresholds. - `contribution-graph` (Pro): A year of activity as a grid of days with tooltips and keyboard exploring. - `radar-chart` (Pro): Compare series across dimensions; shapes morph and legend toggles series. - `scatter-chart` (Pro): Points or bubbles on two measures with groups, hover card and keyboard-focusable dots. - `treemap` (Pro): Squarified rectangles sized by value, for revenue mix, storage and market caps. - `activity-rings` (Pro): Concentric progress rings like a fitness watch, overlapping past 100%. ### Feedback - `progress`: Linear bar, ring and segmented meter, all spring-driven. - `toast`: Stacked notifications that fan out on hover, swipe to dismiss, and track promises. - `alert`: Inline alerts and page banners in four tones, with actions and dismiss. - `skeleton`: Shimmering placeholders for loading content. - `empty-state`: Empty, no-results, error, offline, maintenance and rate-limit states with one API. - `animated-list` (Pro): A feed where new entries spring in at the top and older ones make room. - `dynamic-island` (Pro): A black pill that morphs its size and shape to fit live activity. - `confetti` (Pro): Fire a confetti burst from any point, or use the button that bursts from itself. - `loader` (Pro): Six loading indicators (spinner, dots, bars, pulse, orbit, ring) with one API. - `notification-center` (Pro): A bell with unread badge opening a panel with tabs, mark-all-read and dismiss. - `announcement-bar` (Pro): A slim dismissible bar above the header that rotates launch messages. ### Motion - `spotlight-card`: A card lit by a spotlight that follows the pointer, border included. - `magnetic`: Makes any element lean toward the pointer and spring back. - `border-beam` (Pro): A light that travels around an element's border. - `reveal`: Scroll-triggered fade-and-slide, plus a Stagger for groups. - `tilt-card` (Pro): A card that tilts in 3D toward the pointer with a moving glare. - `marquee` (Pro): Endless, seamless scroller for logos and testimonials that glides to a stop on hover. - `flip-card` (Pro): A two-sided card that flips in 3D on click, Enter or hover. - `orbiting-circles` (Pro): Icons orbiting a center on rings, staying upright as they travel. - `animated-beam` (Pro): A glowing pulse travelling along a curved line between two elements. ### Text Effects - `text-reveal`: Text that rises out of a blur, word by word, as it scrolls into view. - `text-scramble`: Characters cycle through glyphs and settle into the final text. - `shimmer-text`: Text with a light sweep, for thinking and loading states. - `typewriter` (Pro): Types phrases out, deletes them and moves on, with a blinking caret. - `word-rotate` (Pro): Cycles words in place with a blur-slide while the width springs to fit. - `gradient-text` (Pro): Text filled with a slowly flowing gradient. ### Backgrounds - `aurora-background` (Pro): Slow drifting northern-lights glow behind any section. - `particles` (Pro): A drifting constellation of dots on canvas that moves away from the pointer. - `meteors` (Pro): Shooting stars streaking across a card or hero. - `grid-pattern` (Pro): A technical grid background where a few cells gently light up. ### Media - `folder-stack` (Pro): A folder that fans its files out on hover and opens them in a lightbox. - `swipe-deck` (Pro): Tinder-style card stack: drag, tap or use arrow keys to pass or like, with undo. - `image-compare` (Pro): Before and after slider with drag, hover and keyboard control. - `carousel` (Pro): Swipeable slides with arrows, animated dots, keys and pausable autoplay. - `video-player` (Pro): Video with custom auto-hiding controls, scrubbing, captions, fullscreen and shortcuts. - `audio-player` (Pro): Compact audio player with a clickable waveform, skip and playback speed. - `image-lens` (Pro): A magnifying glass that follows the pointer (or arrow keys) over an image. - `lightbox` (Pro): Thumbnail grid that opens a full-screen viewer with swipe, arrows and captions. ### AI - `prompt-input` (Pro): Chat composer that grows, takes files by picker, paste or drop, and turns into Stop while generating. - `ai-reasoning` (Pro): A collapsible thinking trace that folds into a summary when done. - `citation-list`: Numbered sources and inline citation marks for AI answers. - `typing-indicator` (Pro): Bouncing dots in a chat bubble with who is typing. - `chat-message` (Pro): A chat turn with streaming cursor, copy, feedback and regenerate. - `voice-orb` (Pro): A living orb for voice assistants: idle, listening, thinking and speaking states. ### Developer - `code-viewer`: File tabs, line numbers, highlighted lines, copy and expand, with a dependency-free highlighter. - `terminal`: A terminal window that types commands and streams output, with replay and copy. - `json-viewer`: Collapsible, syntax-colored JSON tree. - `diff-viewer` (Pro): Line diff in unified or split view with added/removed counts. - `log-viewer` (Pro): Live log stream with level filters, search and follow mode. - `uptime-bar` (Pro): Daily status bars with uptime percentage and incident tooltips. - `env-editor` (Pro): Masked env vars with per-environment scope, validation and .env paste. ### Commerce - `product-card` (Pro): Product tile with swatches, wishlist, sale price and add-to-cart. - `credit-card-input` (Pro): Card fields with brand detection, Luhn validation and a live card that flips for the CVC. - `coupon-input` (Pro): Promo code field that validates, shows a removable ticket and shakes on errors. - `payment-card` (Pro): A wallet card with a holographic sheen that follows the pointer and a number reveal. ## Blocks Whole screens with sample data. Start from a block when one matches the screen. ### Marketing - `pricing-section`: Three tiers with a monthly/yearly toggle whose prices roll. - `hero-section` (Pro): Launch hero with badge, flowing gradient headline, two actions and a live product preview on a glowing grid. - `feature-bento` (Pro): A bento grid of features, each with a small live visual and a pointer spotlight. - `testimonials-wall` (Pro): Testimonials in slowly scrolling columns that pause on hover, rows on phones. - `stats-section` (Pro): Headline numbers that count up when they scroll into view. - `logo-cloud` (Pro): Trusted-by logos as an endless strip or a static grid. - `cta-section` (Pro): A dark closing call to action with meteors and an email capture. - `faq-section` (Pro): Searchable FAQ with category filters, an accordion and a contact fallback. - `changelog` (Pro): Release notes timeline with type filters, cover art and subscribe. - `footer-section` (Pro): Site footer with link columns, newsletter, live status and socials. ### SaaS - `onboarding-checklist`: A setup checklist with progress ring and inline actions. - `revenue-analytics` (Pro): Revenue trend, MRR, ARR, customers and conversion, source mix and a live transactions feed. - `team-members` (Pro): Seat usage, invite by email with role, change roles, resend or remove. - `onboarding-wizard` (Pro): Welcome flow for role, goals, team size and invites, ending with confetti. - `settings-account` (Pro): Profile with inline edits, security toggles, active sessions and guarded delete. - `notification-preferences` (Pro): Channel-by-event matrix with column toggles, quiet hours and unsaved-changes bar. ### Auth - `sign-in`: Password or magic link, SSO and GitHub, inline validation and a check-your-email state. - `two-factor`: Authenticator code with resend timer, backup-code fallback and success state. - `sign-up` (Pro): Three-step sign-up: account, password with live rules and email code verification. - `forgot-password` (Pro): Password reset: request link, resend timer, new password and done state. ### Productivity - `inbox-triage` (Pro): Keyboard-first triage: j/k to move, e to archive, s to snooze, with undo. - `week-calendar` (Pro): A week view with calendars, a now line, and click-to-create events. - `cms-posts` (Pro): Posts by status and an editor with tags, word count, preview and publish. - `kanban-board` (Pro): Sprint board with drag between columns, WIP limits, quick add and points. - `meeting-scheduler` (Pro): Book a call: host card, calendar, time slots and confirmation. - `file-manager` (Pro): File browser with folders, grid / list views, search, stars and right-click actions. - `team-chat` (Pro): Team chat with channels, reactions, mentions, typing indicator and mobile drawer. ### Support - `support-ticket` (Pro): Conversation with internal notes, macros, SLA countdown and customer context. - `help-center` (Pro): Help center with instant search, topics, article reader and feedback. ### Analytics - `metrics-dashboard` (Pro): KPI tabs, one inspectable chart with period comparison, and top pages and sources. - `revenue-breakdown` (Pro): Recurring revenue split into new, expansion and churn, with a draggable range brush. - `mrr-waterfall` (Pro): How MRR moved from start to end of a period, and which accounts moved it. - `cohort-retention` (Pro): Retention by signup month as a heatmap, with segments. - `realtime-analytics` (Pro): Live visitors counter, per-second bars, event feed, top pages and devices. ### Billing - `usage-forecast` (Pro): Actual and projected usage against a budget, with the day you'll cross it. - `billing-settings` (Pro): Plan, payment method, usage meters, invoices and a prorated plan change. - `pricing-comparison` (Pro): Plan comparison table with sticky headers, yearly toggle and a mobile plan picker. - `invoice` (Pro): An invoice with status timeline, line items, totals, copyable bank details and pay. ### Commerce - `store-orders` (Pro): Order KPIs, status and channel filters, bulk fulfil, packing slips and CSV export. - `product-detail` (Pro): Gallery that follows the color, variants with stock, quantity and add to cart. - `checkout` (Pro): Three-step checkout with shipping choice, card entry, promo codes and order summary. - `shopping-cart` (Pro): Cart with quantity steppers, remove with undo and free-shipping progress. - `order-tracking` (Pro): Shipment tracking with a route map, moving van, stepper and event timeline. ### Finance - `trading-terminal` (Pro): Live price, candlesticks, a watchlist with sparklines and an order ticket. - `crypto-wallet` (Pro): Wallet balance, portfolio chart, holdings with sparklines and a slide-to-send flow. - `expense-tracker` (Pro): Spending by category, budget bars that warn, quick add and recent expenses. ### CRM - `crm-pipeline` (Pro): Drag deals across stages; open, weighted forecast and won totals update live. - `crm-contacts` (Pro): Contacts on the data table with filters, expandable details, bulk email, tag and delete. - `lead-detail` (Pro): CRM lead with deal stage, AI lead score, activity timeline, notes and next steps. ### AI - `agent-run` (Pro): An AI coding agent's run: steps stream in with search results, code and a diff. - `ai-chat` (Pro): A chat with streamed answers, model picker, suggestions and stop. - `ai-playground` (Pro): Compare two models on one prompt with parameters, reasoning, streaming, tokens and cost. - `ai-image-generator` (Pro): Prompt to images with style and ratio, shimmer placeholders, likes and a lightbox. - `ai-search` (Pro): Answer engine with streamed reasoning, inline citations, sources and follow-ups. ### Developer - `api-keys-manager` (Pro): Create scoped live/test keys, reveal once, copy, and revoke with confirmation. - `deployments` (Pro): Deployment history with status, branch and commit, live build logs and redeploy. - `webhook-logs` (Pro): Webhook deliveries with payload and response inspection, failure filter and retry. - `system-status`: Overall status, 60-day uptime per service and incident history. - `feature-flags` (Pro): Flags per environment with switches, percentage rollouts and a change log. - `api-playground` (Pro): Pick an endpoint, edit headers and body, send, and read the JSON response or cURL. - `env-variables` (Pro): Project env vars with masking, scopes, .env paste, dirty state and save. - `integrations-gallery` (Pro): Searchable integrations with categories and connect / disconnect in place. ## Templates ### Marketing - `saas-landing` (Pro): Hero with signup, logos, feature grid, stats, testimonials, pricing, FAQ, CTA and footer. - `agency-landing` (Pro): A studio landing page: word-by-word headline, capabilities ticker, morphing case studies and services. - `app-landing` (Pro): A mobile app landing page: phone mockup, store buttons, scroll-stacked features and reviews. - `conference-landing` (Pro): An event landing page: countdown, speakers, day-by-day schedule, tickets and FAQ. ### SaaS - `analytics-landing` (Pro): An analytics SaaS landing page with an embedded live realtime dashboard demo. - `waitlist-landing` (Pro): A one-screen waitlist page: particles, countdown, email capture, referral link and signup count. ### CRM - `crm-landing` (Pro): A CRM landing page: live pipeline hero, feature bento, results stats and plan comparison. ### AI - `ai-landing` (Pro): A landing page for an AI assistant: streaming chat hero, animated data-flow diagram, features, pricing and FAQ. ### Developer - `status-page`: A public status page with subscribe, uptime per service and incident history. - `devtool-landing` (Pro): An API platform landing page: terminal hero, code sample, features grid, plan comparison and changelog.