{"name":"Lode UI","homepage":"https://lodeui.com","count":215,"items":[{"name":"button","kind":"component","title":"Button","description":"A clear, responsive action with quiet secondary states.","tagline":"Press it and it gives a little","category":"Actions","tier":"free","url":"https://lodeui.com/components/button","markdown":"https://lodeui.com/components/button/markdown","install":"npx shadcn@latest add https://lodeui.com/r/button.json","useCases":["The main or secondary action in a form, dialog, card or toolbar.","Async actions that need a loading state without the button changing width.","Icon-only actions in dense toolbars, with an aria-label."],"avoidWhen":["Navigating to another page: render a link styled with buttonVariants() instead.","Picking one option from a few: use a segmented control or radio group.","An action whose result should show in place (Saved, Failed): use the action button."],"keywords":["Actions","button","press","gives","little"],"notes":["Use variant=\"primary\" once per view; secondary or ghost for the rest.","Pass loading instead of swapping the label for a spinner yourself.","For links, use <Link className={buttonVariants({ variant: \"outline\" })}>, not <Button onClick={router.push}>."],"builtFrom":[],"dependencies":[],"related":["action-button","dropdown-menu","segmented-control","tooltip"]},{"name":"segmented-control","kind":"component","title":"Segmented control","description":"A compact single choice with a pill that slides to the selection.","tagline":"The pill follows your pick","category":"Inputs","tier":"free","url":"https://lodeui.com/components/segmented-control","markdown":"https://lodeui.com/components/segmented-control/markdown","install":"npx shadcn@latest add https://lodeui.com/r/segmented-control.json","useCases":["Two to five mutually exclusive options that should all be visible, like 7D / 30D / 90D.","Switching a view (list, board, calendar) or a billing cycle."],"avoidWhen":["More than five options or long labels: use a select.","Options that trigger actions rather than set a value: use buttons.","Navigation between pages: use tabs or links."],"keywords":["Inputs","segmented","control","pill","follows","your","pick"],"notes":["Always pass aria-label.","Use `as const` on the options array to get a literal union for T."],"builtFrom":[],"dependencies":["motion"],"related":["tabs","radio-group","select","switch"]},{"name":"number-field","kind":"component","title":"Number field","description":"A stepper you can press, hold, scrub, or type into. Push past a limit and it pushes back.","tagline":"Push past a limit and it pushes back","category":"Inputs","tier":"free","url":"https://lodeui.com/components/number-field","markdown":"https://lodeui.com/components/number-field/markdown","install":"npx shadcn@latest add https://lodeui.com/r/number-field.json","useCases":["Small integer quantities: seats, guests, items, replicas.","Values people adjust by feel, where dragging to scrub is faster than typing."],"avoidWhen":["Large or precise numbers like prices or IDs: use an input.","A continuous range: use a slider.","Values with units that need typing (e.g. 12.5 GB): use an input with a trailing unit."],"keywords":["Inputs","number","field","push","past","limit","pushes","back"],"notes":["Use format for units so screen readers hear them too.","For non-integers set step (e.g. 0.5) and format with toFixed."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["slider","input","segmented-control"]},{"name":"select","kind":"component","title":"Select","description":"A pill trigger with a springy menu, typeahead, and full keyboard support.","tagline":"Opens from where you clicked","category":"Inputs","tier":"free","url":"https://lodeui.com/components/select","markdown":"https://lodeui.com/components/select/markdown","install":"npx shadcn@latest add https://lodeui.com/r/select.json","useCases":["Picking one value from a short list: status, assignee, priority.","Property panels where the current value reads as text with an icon."],"avoidWhen":["Long lists people need to search: use a combobox.","Two or three options that should stay visible: use a segmented control.","Multiple values: use a combobox with multiple."],"keywords":["Inputs","select","opens","from","where","clicked"],"notes":["Always pass aria-label when there's no visible label.","For more than ~10 options use Combobox instead."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["combobox","dropdown-menu","segmented-control","radio-group"]},{"name":"date-range-picker","kind":"component","title":"Date range picker","description":"Pick a start and an end on a calendar that previews the range as you move.","tagline":"Pick a range, the numbers follow","category":"Date & Time","tier":"pro","url":"https://lodeui.com/components/date-range-picker","markdown":"https://lodeui.com/components/date-range-picker/markdown","install":"npx shadcn@latest add @lode/date-range-picker","useCases":["Filtering reports, logs or bookings by a span of days.","Choosing travel or booking dates with presets for common ranges."],"avoidWhen":["A single date: use a date picker.","Fuzzy ranges like 'last 30 days' only: use a segmented control."],"keywords":["Date & Time","date","range","picker","pick","numbers","follow"],"notes":["Dates are local calendar dates; convert to UTC at your API boundary.","Use formatRange for labels to avoid hydration mismatches from toLocaleDateString."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["select","popover","segmented-control"]},{"name":"command-palette","kind":"component","title":"Command palette","description":"Type to filter, arrow to move, Enter to run. Inline or as a ⌘K dialog.","tagline":"Type to filter, Enter to run","category":"Navigation","tier":"pro","url":"https://lodeui.com/components/command-palette","markdown":"https://lodeui.com/components/command-palette/markdown","install":"npx shadcn@latest add @lode/command-palette","useCases":["Power-user actions and site search behind ⌘K.","Long action lists that benefit from type-to-filter."],"avoidWhen":["As the only way to reach an action: keep visible controls too.","Choosing a form value: use a combobox."],"keywords":["Navigation","command","palette","type","filter","enter"],"notes":["Put synonyms in keywords instead of the label.","Item ids must be unique across groups."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["combobox","dropdown-menu","dialog","input"]},{"name":"animated-number","kind":"component","title":"Animated number","description":"A number that springs to its new value instead of jumping.","tagline":"Numbers spring, they don't jump","category":"Data Display","tier":"free","url":"https://lodeui.com/components/animated-number","markdown":"https://lodeui.com/components/animated-number/markdown","install":"npx shadcn@latest add https://lodeui.com/r/animated-number.json","useCases":["Totals and KPIs that change in response to input, like a price as seats change."],"avoidWhen":["Values read precisely while changing quickly, like timers.","When each digit should roll on its own: use the number ticker."],"keywords":["Data Display","animated","number","numbers","spring","they","jump"],"notes":["Round inside format; the spring passes fractional values."],"builtFrom":[],"dependencies":["motion"],"related":["number-ticker","kpi-card","donut-chart"]},{"name":"donut-chart","kind":"component","title":"Donut chart","description":"Proportions as arcs that morph when the data changes.","tagline":"Arcs morph to the new period","category":"Charts","tier":"pro","url":"https://lodeui.com/components/donut-chart","markdown":"https://lodeui.com/components/donut-chart/markdown","install":"npx shadcn@latest add @lode/donut-chart","useCases":["Up to six parts of a whole, like traffic sources or plan mix."],"avoidWhen":["Comparing many similar values: use a bar chart.","Change over time: use an area or line chart."],"keywords":["Charts","donut","chart","arcs","morph","period"],"notes":["Use var(--chart-1) to var(--chart-6) so colors follow the theme.","Keep labels unique; they're used as keys."],"builtFrom":["animated-number"],"dependencies":["motion"],"related":["bar-chart","animated-number","area-chart"]},{"name":"area-chart","kind":"component","title":"Area chart","description":"A smooth trend line with a comparison period and an inspectable crosshair.","tagline":"Switch ranges and the line reshapes","category":"Charts","tier":"pro","url":"https://lodeui.com/components/area-chart","markdown":"https://lodeui.com/components/area-chart/markdown","install":"npx shadcn@latest add @lode/area-chart","useCases":["One metric over time, optionally against the previous period."],"avoidWhen":["Several series: use a line chart with a legend.","Part-to-whole: use a donut chart."],"keywords":["Charts","area","chart","switch","ranges","line","reshapes"],"notes":["Labels are shown as-is; pre-format dates.","Set showPrevious={false} when you have no comparison data."],"builtFrom":[],"dependencies":["motion"],"related":["line-chart","stacked-area-chart","sparkline","bar-chart"]},{"name":"switch","kind":"component","title":"Switch","description":"A toggle whose thumb stretches as you press it.","tagline":"Toggle it, the thumb stretches","category":"Inputs","tier":"free","url":"https://lodeui.com/components/switch","markdown":"https://lodeui.com/components/switch/markdown","install":"npx shadcn@latest add https://lodeui.com/r/switch.json","useCases":["Settings that take effect immediately, like enabling notifications."],"avoidWhen":["Choices that apply on Save: use a checkbox.","More than two states: use a segmented control or select."],"keywords":["Inputs","switch","toggle","thumb","stretches"],"notes":["Don't use for form fields that submit later; use Checkbox."],"builtFrom":[],"dependencies":["motion"],"related":["checkbox","segmented-control","radio-group"]},{"name":"slider","kind":"component","title":"Slider","description":"Drag, click or use the keys. The value rides above the thumb while you drag.","tagline":"Drag it, the value rides along","category":"Inputs","tier":"free","url":"https://lodeui.com/components/slider","markdown":"https://lodeui.com/components/slider/markdown","install":"npx shadcn@latest add https://lodeui.com/r/slider.json","useCases":["Picking a value from a continuous range where approximate is fine: volume, budget, rollout percentage."],"avoidWhen":["Exact values: use a number field or input.","Small counts like seats: use a number field."],"keywords":["Inputs","slider","drag","value","rides","along"],"notes":["Save to the server in onValueCommit, not onValueChange."],"builtFrom":[],"dependencies":["motion"],"related":["number-field","progress","gauge"]},{"name":"dropdown-menu","kind":"component","title":"Dropdown menu","description":"Actions, checkboxes and radio options in a springy menu with full keyboard support.","tagline":"Open it, arrow through it","category":"Overlays","tier":"free","url":"https://lodeui.com/components/dropdown-menu","markdown":"https://lodeui.com/components/dropdown-menu/markdown","install":"npx shadcn@latest add https://lodeui.com/r/dropdown-menu.json","useCases":["A list of actions on an object: rename, duplicate, delete.","View options with radio or checkbox items, like Sort by."],"avoidWhen":["Setting a form value: use a select.","Navigation: use links or a navigation menu."],"keywords":["Overlays","dropdown","menu","open","arrow","through"],"notes":["Ids must be unique.","Use destructive for irreversible actions and confirm them in a dialog."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["select","popover","command-palette","button"]},{"name":"action-button","kind":"component","title":"Action button","description":"A button that morphs through saving, saved and failed, right where you clicked.","tagline":"Save, then see it saved","category":"Actions","tier":"free","url":"https://lodeui.com/components/action-button","markdown":"https://lodeui.com/components/action-button/markdown","install":"npx shadcn@latest add https://lodeui.com/r/action-button.json","useCases":["Save, publish, retry or pay actions where people should see the outcome where they clicked."],"avoidWhen":["Actions that navigate away immediately.","Long jobs (over ~10s): show progress elsewhere."],"keywords":["Actions","action","button","save","then","saved"],"notes":["Throw from onAction to show the error state; don't catch silently."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["button","toast","progress"]},{"name":"number-ticker","kind":"component","title":"Number ticker","description":"Every digit rolls on its own wheel, odometer style.","tagline":"Every digit rolls on its own","category":"Data Display","tier":"free","url":"https://lodeui.com/components/number-ticker","markdown":"https://lodeui.com/components/number-ticker/markdown","install":"npx shadcn@latest add https://lodeui.com/r/number-ticker.json","useCases":["KPIs and counters where digits rolling makes the change legible, like live visitors or prices."],"avoidWhen":["Values that change many times a second.","Very long numbers in tight spaces."],"keywords":["Data Display","number","ticker","every","digit","rolls"],"notes":["Pass rounded values; decimals are shown as formatted."],"builtFrom":[],"dependencies":["motion"],"related":["animated-number","kpi-card"]},{"name":"tabs","kind":"component","title":"Tabs","description":"Underline or pill tabs with an indicator that glides between them.","tagline":"The line follows your tab","category":"Navigation","tier":"free","url":"https://lodeui.com/components/tabs","markdown":"https://lodeui.com/components/tabs/markdown","install":"npx shadcn@latest add https://lodeui.com/r/tabs.json","useCases":["Switching between sections of the same page or panel."],"avoidWhen":["Setting a value in a form: use a segmented control.","Site navigation: use links."],"keywords":["Navigation","tabs","line","follows","your"],"notes":["Give the panel role=\"tabpanel\" if it's a distinct region."],"builtFrom":[],"dependencies":["motion"],"related":["segmented-control","accordion"]},{"name":"tooltip","kind":"component","title":"Tooltip","description":"A small label on hover or focus, with a delay that respects intent.","tagline":"Hover, wait a beat, there it is","category":"Overlays","tier":"free","url":"https://lodeui.com/components/tooltip","markdown":"https://lodeui.com/components/tooltip/markdown","install":"npx shadcn@latest add https://lodeui.com/r/tooltip.json","useCases":["Naming icon-only buttons and showing their shortcuts."],"avoidWhen":["Essential information: put it in the UI.","Interactive content: use a popover."],"keywords":["Overlays","tooltip","hover","wait","beat","there"],"notes":["Never wrap disabled buttons; they don't fire pointer events."],"builtFrom":[],"dependencies":["motion"],"related":["popover","button"]},{"name":"checkbox","kind":"component","title":"Checkbox","description":"A checkbox whose tick draws itself, with an indeterminate state.","tagline":"The tick draws itself","category":"Inputs","tier":"free","url":"https://lodeui.com/components/checkbox","markdown":"https://lodeui.com/components/checkbox/markdown","install":"npx shadcn@latest add https://lodeui.com/r/checkbox.json","useCases":["Independent on/off choices in a form that apply on submit.","Selecting rows, with an indeterminate 'select all'."],"avoidWhen":["Settings that apply instantly: use a switch.","One choice from several: use a radio group."],"keywords":["Inputs","checkbox","tick","draws","itself"],"notes":["Wrap in <label> so clicking the text toggles it."],"builtFrom":[],"dependencies":["motion"],"related":["switch","radio-group","data-table"]},{"name":"progress","kind":"component","title":"Progress","description":"Linear bar, ring and segmented meter, all spring-driven.","tagline":"Bars, rings and meters that ease","category":"Feedback","tier":"free","url":"https://lodeui.com/components/progress","markdown":"https://lodeui.com/components/progress/markdown","install":"npx shadcn@latest add https://lodeui.com/r/progress.json","useCases":["Showing how much of a task, quota or upload is done."],"avoidWhen":["Unknown duration: use a spinner or skeleton."],"keywords":["Feedback","progress","bars","rings","meters","that","ease"],"notes":["Use warnAt for quotas so 'near limit' is visible."],"builtFrom":[],"dependencies":["motion"],"related":["gauge","skeleton","kpi-card"]},{"name":"toast","kind":"component","title":"Toast","description":"Stacked notifications that fan out on hover, swipe to dismiss, and track promises.","tagline":"Stack, fan out, swipe away","category":"Feedback","tier":"free","url":"https://lodeui.com/components/toast","markdown":"https://lodeui.com/components/toast/markdown","install":"npx shadcn@latest add https://lodeui.com/r/toast.json","useCases":["Brief confirmation after an action: saved, sent, copied.","Async results with toast.promise."],"avoidWhen":["Errors that block progress: show them inline.","Anything people must act on later: use a notification center."],"keywords":["Feedback","toast","stack","swipe","away"],"notes":["Render <Toaster /> once in the root layout, not per page."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["alert","action-button"]},{"name":"dialog","kind":"component","title":"Dialog","description":"A modal or side sheet with focus trap, scroll lock and focus return.","tagline":"Modal or sheet, focus stays inside","category":"Overlays","tier":"free","url":"https://lodeui.com/components/dialog","markdown":"https://lodeui.com/components/dialog/markdown","install":"npx shadcn@latest add https://lodeui.com/r/dialog.json","useCases":["Confirming destructive actions, short forms, and focused tasks.","Side sheets for editing a record without leaving the list."],"avoidWhen":["Long flows: use a page.","Non-blocking info: use a popover or toast."],"keywords":["Overlays","dialog","modal","sheet","focus","stays","inside"],"notes":["Put the destructive button last in the footer."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["popover","dropdown-menu","toast"]},{"name":"accordion","kind":"component","title":"Accordion","description":"Expandable sections with smooth height and a turning plus.","tagline":"Open one, the rest make room","category":"Navigation","tier":"free","url":"https://lodeui.com/components/accordion","markdown":"https://lodeui.com/components/accordion/markdown","install":"npx shadcn@latest add https://lodeui.com/r/accordion.json","useCases":["FAQs and long settings pages where people scan headings first."],"avoidWhen":["Content everyone needs: show it.","Switching views: use tabs."],"keywords":["Navigation","accordion","open","rest","make","room"],"notes":["Values must be unique."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["tabs","dialog"]},{"name":"otp-input","kind":"component","title":"OTP input","description":"One-time code boxes that handle paste and autofill, and shake on a wrong code.","tagline":"Paste the code, it fills in","category":"Inputs","tier":"free","url":"https://lodeui.com/components/otp-input","markdown":"https://lodeui.com/components/otp-input/markdown","install":"npx shadcn@latest add https://lodeui.com/r/otp-input.json","useCases":["Email or SMS verification codes and 2FA."],"avoidWhen":["Passwords or anything longer than ~8 characters."],"keywords":["Inputs","otp","input","paste","code","fills"],"notes":["Change the key to reset after an error."],"builtFrom":[],"dependencies":["motion"],"related":["input","button"]},{"name":"avatar-group","kind":"component","title":"Avatar group","description":"Overlapping avatars that spread apart on hover.","tagline":"A crowd that makes room on hover","category":"Data Display","tier":"free","url":"https://lodeui.com/components/avatar-group","markdown":"https://lodeui.com/components/avatar-group/markdown","install":"npx shadcn@latest add https://lodeui.com/r/avatar-group.json","useCases":["Showing who is on a team, document or thread."],"avoidWhen":["A full member list: use a table."],"keywords":["Data Display","avatar","group","crowd","that","makes","room","hover"],"notes":["Pass hue to keep a person's color stable."],"builtFrom":[],"dependencies":["motion"],"related":["profile-card","badge"]},{"name":"sparkline","kind":"component","title":"Sparkline","description":"A tiny trend line that draws itself in.","tagline":"A trend in 96 pixels","category":"Charts","tier":"free","url":"https://lodeui.com/components/sparkline","markdown":"https://lodeui.com/components/sparkline/markdown","install":"npx shadcn@latest add https://lodeui.com/r/sparkline.json","useCases":["A tiny trend next to a number in a table or KPI card."],"avoidWhen":["When people need to read values: use an area or line chart."],"keywords":["Charts","sparkline","trend","pixels"],"notes":["Use color='var(--destructive)' for metrics where up is bad."],"builtFrom":[],"dependencies":["motion"],"related":["kpi-card","area-chart","line-chart"]},{"name":"bar-chart","kind":"component","title":"Bar chart","description":"Bars that grow in and morph between datasets, with a hover readout.","tagline":"Bars grow in, then morph","category":"Charts","tier":"pro","url":"https://lodeui.com/components/bar-chart","markdown":"https://lodeui.com/components/bar-chart/markdown","install":"npx shadcn@latest add @lode/bar-chart","useCases":["Comparing one measure across categories or periods."],"avoidWhen":["Trends over many points: use a line or area chart."],"keywords":["Charts","bar","chart","bars","grow","then","morph"],"notes":["Keep labels short; they sit under each bar."],"builtFrom":[],"dependencies":["motion"],"related":["area-chart","funnel-chart","donut-chart"]},{"name":"candlestick-chart","kind":"component","title":"Candlestick chart","description":"OHLC candles with volume, moving averages and a price crosshair.","tagline":"Candles, volume and a crosshair","category":"Charts","tier":"pro","url":"https://lodeui.com/components/candlestick-chart","markdown":"https://lodeui.com/components/candlestick-chart/markdown","install":"npx shadcn@latest add @lode/candlestick-chart","useCases":["Price history for stocks, crypto or any open/high/low/close data."],"avoidWhen":["Single-value series: use a line chart."],"keywords":["Charts","candlestick","chart","candles","volume","crosshair"],"notes":["Up candles are green, down red; keep that convention."],"builtFrom":[],"dependencies":[],"related":["line-chart","sparkline"]},{"name":"heatmap","kind":"component","title":"Heatmap","description":"A color-scaled grid with row and column tracking, for cohorts and schedules.","tagline":"Cohorts at a glance","category":"Charts","tier":"pro","url":"https://lodeui.com/components/heatmap","markdown":"https://lodeui.com/components/heatmap/markdown","install":"npx shadcn@latest add @lode/heatmap","useCases":["Cohort retention, activity by hour and day, any grid of magnitudes."],"avoidWhen":["A single row: use a bar chart."],"keywords":["Charts","heatmap","cohorts","glance"],"notes":["Use null, not 0, for periods that haven't happened yet."],"builtFrom":[],"dependencies":["motion"],"related":["bar-chart","stacked-area-chart"]},{"name":"stacked-area-chart","kind":"component","title":"Stacked area chart","description":"Stacked series above and below zero, morphing as the range changes.","tagline":"Above and below the line","category":"Charts","tier":"pro","url":"https://lodeui.com/components/stacked-area-chart","markdown":"https://lodeui.com/components/stacked-area-chart/markdown","install":"npx shadcn@latest add @lode/stacked-area-chart","useCases":["Components of a total over time, with losses below zero (new, expansion, churn)."],"avoidWhen":["Independent series: use a line chart."],"keywords":["Charts","stacked","area","chart","above","below","line"],"notes":["Values for negative series are positive numbers; the chart flips them."],"builtFrom":[],"dependencies":["motion"],"related":["area-chart","line-chart","revenue-breakdown"]},{"name":"folder-stack","kind":"component","title":"Folder stack","description":"A folder that fans its files out on hover and opens them in a lightbox.","tagline":"Hover the folder, the files fan out","category":"Media","tier":"pro","url":"https://lodeui.com/components/folder-stack","markdown":"https://lodeui.com/components/folder-stack/markdown","install":"npx shadcn@latest add @lode/folder-stack","useCases":["Collections of images or files where the cover matters: moodboards, galleries, attachments."],"avoidWhen":["Long file lists: use a table or grid."],"keywords":["Media","folder","stack","hover","files"],"notes":["Provide src for real images; colors are a placeholder."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["profile-card","tilt-card"]},{"name":"profile-card","kind":"component","title":"Profile card","description":"A portrait whose details rise into a glass panel on hover.","tagline":"Hover the portrait, the story rises","category":"Data Display","tier":"pro","url":"https://lodeui.com/components/profile-card","markdown":"https://lodeui.com/components/profile-card/markdown","install":"npx shadcn@latest add @lode/profile-card","useCases":["Showcasing a person: mentors, speakers, team pages."],"avoidWhen":["Dense member lists: use a table or avatar group."],"keywords":["Data Display","profile","card","hover","portrait","story","rises"],"notes":["Wire primaryAction to your follow API."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["avatar-group","folder-stack","tilt-card"]},{"name":"input","kind":"component","title":"Input","description":"Text, search, password and URL inputs with icons, clear button and a labelled Field wrapper.","tagline":"Icons, clear, reveal, errors","category":"Inputs","tier":"free","url":"https://lodeui.com/components/input","markdown":"https://lodeui.com/components/input/markdown","install":"npx shadcn@latest add https://lodeui.com/r/input.json","useCases":["Single-line text, email, URL, numbers with units and search fields.","Fields that need an icon, unit, clear button or show/hide password toggle inside."],"avoidWhen":["Multi-line text: use a textarea.","Choosing from known values: use a select or combobox.","Small counts: use a number field."],"keywords":["Inputs","input","icons","clear","reveal","errors"],"notes":["Use Field for labelled form controls instead of hand-writing label markup.","Set autoComplete on auth fields."],"builtFrom":[],"dependencies":["lucide-react"],"related":["textarea","combobox","tag-input","number-field"]},{"name":"textarea","kind":"component","title":"Textarea","description":"A textarea that grows with its content, with an optional character counter.","tagline":"Grows as you type","category":"Inputs","tier":"free","url":"https://lodeui.com/components/textarea","markdown":"https://lodeui.com/components/textarea/markdown","install":"npx shadcn@latest add https://lodeui.com/r/textarea.json","useCases":["Comments, descriptions and messages that span more than one line."],"avoidWhen":["Chat composers with attachments: use the prompt input.","Single-line values: use an input."],"keywords":["Inputs","textarea","grows","type"],"notes":["Use maxLength with showCount rather than validating length afterwards."],"builtFrom":[],"dependencies":[],"related":["input","prompt-input"]},{"name":"badge","kind":"component","title":"Badge","description":"Tone badges and status dots for states like paid, pending, live and degraded.","tagline":"Tones and live status dots","category":"Data Display","tier":"free","url":"https://lodeui.com/components/badge","markdown":"https://lodeui.com/components/badge/markdown","install":"npx shadcn@latest add https://lodeui.com/r/badge.json","useCases":["Short status or category labels: Paid, Draft, Beta.","Service health with a live dot (StatusBadge)."],"avoidWhen":["Clickable filters: use buttons or a segmented control.","Long text: use an alert or plain text."],"keywords":["Data Display","badge","tones","live","status","dots"],"notes":["Write the status as text (\"Failed\"), don't rely on tone alone."],"builtFrom":[],"dependencies":[],"related":["alert","timeline","uptime-bar"]},{"name":"alert","kind":"component","title":"Alert","description":"Inline alerts and page banners in four tones, with actions and dismiss.","tagline":"Inline or full-width banners","category":"Feedback","tier":"free","url":"https://lodeui.com/components/alert","markdown":"https://lodeui.com/components/alert/markdown","install":"npx shadcn@latest add https://lodeui.com/r/alert.json","useCases":["Messages about a page or section: trial ending, failed payment, maintenance.","Full-width banners at the top of an app."],"avoidWhen":["Short-lived confirmations: use a toast.","Field errors: use Field's error."],"keywords":["Feedback","alert","inline","full","width","banners"],"notes":["Use tone=\"danger\" only when something is broken or blocked."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["toast","badge","empty-state"]},{"name":"skeleton","kind":"component","title":"Skeleton","description":"Shimmering placeholders for loading content.","tagline":"Placeholders that shimmer","category":"Feedback","tier":"free","url":"https://lodeui.com/components/skeleton","markdown":"https://lodeui.com/components/skeleton/markdown","install":"npx shadcn@latest add https://lodeui.com/r/skeleton.json","useCases":["Loading states where you know the layout, so content doesn't jump in."],"avoidWhen":["Actions in progress: use a loading button.","Unknown layout: use a spinner."],"keywords":["Feedback","skeleton","placeholders","that","shimmer"],"notes":["Match skeleton sizes to the final content to avoid layout shift."],"builtFrom":[],"dependencies":[],"related":["progress","empty-state"]},{"name":"empty-state","kind":"component","title":"Empty state","description":"Empty, no-results, error, offline, maintenance and rate-limit states with one API.","tagline":"Empty, error, offline, rate-limited","category":"Feedback","tier":"free","url":"https://lodeui.com/components/empty-state","markdown":"https://lodeui.com/components/empty-state/markdown","install":"npx shadcn@latest add https://lodeui.com/r/empty-state.json","useCases":["Empty lists, no search results, errors, offline, no access and maintenance."],"avoidWhen":["Loading: use a skeleton."],"keywords":["Feedback","empty","state","error","offline","rate","limited"],"notes":["Always give people a next step in action."],"builtFrom":[],"dependencies":["lucide-react"],"related":["alert","skeleton"]},{"name":"breadcrumb","kind":"component","title":"Breadcrumb","description":"Hierarchy trail that collapses long paths and works with any router link.","tagline":"Long paths, collapsed","category":"Navigation","tier":"free","url":"https://lodeui.com/components/breadcrumb","markdown":"https://lodeui.com/components/breadcrumb/markdown","install":"npx shadcn@latest add https://lodeui.com/r/breadcrumb.json","useCases":["Showing where a page sits in a hierarchy."],"avoidWhen":["Flat sites with one level."],"keywords":["Navigation","breadcrumb","long","paths","collapsed"],"notes":["Pass Next.js Link as linkAs for client navigation."],"builtFrom":[],"dependencies":["lucide-react"],"related":["pagination","tabs"]},{"name":"pagination","kind":"component","title":"Pagination","description":"Page numbers with ellipses and a gliding current-page indicator.","tagline":"Pages with a gliding marker","category":"Navigation","tier":"free","url":"https://lodeui.com/components/pagination","markdown":"https://lodeui.com/components/pagination/markdown","install":"npx shadcn@latest add https://lodeui.com/r/pagination.json","useCases":["Paging through tables and lists with a known number of pages."],"avoidWhen":["Feeds: use infinite scroll or Load more."],"keywords":["Navigation","pagination","pages","with","gliding","marker"],"notes":["Pages are 1-based."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["data-table","breadcrumb"]},{"name":"stepper","kind":"component","title":"Stepper","description":"Horizontal or vertical steps with animated progress and back-navigation.","tagline":"Progress through a flow","category":"Navigation","tier":"free","url":"https://lodeui.com/components/stepper","markdown":"https://lodeui.com/components/stepper/markdown","install":"npx shadcn@latest add https://lodeui.com/r/stepper.json","useCases":["Multi-step forms: checkout, onboarding, setup wizards."],"avoidWhen":["Tasks people can do in any order: use a checklist."],"keywords":["Navigation","stepper","progress","through","flow"],"notes":["current is zero-based."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["progress","radio-group"]},{"name":"radio-group","kind":"component","title":"Radio group","description":"Radios as a list or as choice cards, with arrow-key navigation.","tagline":"List or choice cards","category":"Inputs","tier":"free","url":"https://lodeui.com/components/radio-group","markdown":"https://lodeui.com/components/radio-group/markdown","install":"npx shadcn@latest add https://lodeui.com/r/radio-group.json","useCases":["One choice from a few options that need descriptions, like plans or shipping speed."],"avoidWhen":["Short labels: a segmented control is more compact.","Long lists: use a select."],"keywords":["Inputs","radio","group","list","choice","cards"],"notes":["Always pass aria-label or a visible group label."],"builtFrom":[],"dependencies":["motion"],"related":["segmented-control","checkbox","select"]},{"name":"tag-input","kind":"component","title":"Tag input","description":"Type, paste or pick suggestions to add tags; validates each one.","tagline":"Enter, comma or paste","category":"Inputs","tier":"free","url":"https://lodeui.com/components/tag-input","markdown":"https://lodeui.com/components/tag-input/markdown","install":"npx shadcn@latest add https://lodeui.com/r/tag-input.json","useCases":["Lists of short values: emails to invite, labels, allowed domains."],"avoidWhen":["Picking from a fixed list: use a multi combobox."],"keywords":["Inputs","tag","input","enter","comma","paste"],"notes":["Normalize case in validate if tags are case-insensitive."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["combobox","input"]},{"name":"combobox","kind":"component","title":"Combobox","description":"Searchable select for one or many values, fully keyboard driven.","tagline":"Search, then pick one or many","category":"Inputs","tier":"free","url":"https://lodeui.com/components/combobox","markdown":"https://lodeui.com/components/combobox/markdown","install":"npx shadcn@latest add https://lodeui.com/r/combobox.json","useCases":["Searchable choice from many options: country, assignee, repository.","Choosing several values (multiple)."],"avoidWhen":["Under ~8 options: use a select."],"keywords":["Inputs","combobox","search","then","pick","many"],"notes":["Use the multiple prop and string[] state together, or TypeScript will complain."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["select","tag-input","command-palette"]},{"name":"popover","kind":"component","title":"Popover","description":"An anchored panel for filters, forms and details.","tagline":"Anchored panels","category":"Overlays","tier":"free","url":"https://lodeui.com/components/popover","markdown":"https://lodeui.com/components/popover/markdown","install":"npx shadcn@latest add https://lodeui.com/r/popover.json","useCases":["Small interactive panels anchored to a button: filters, share, quick edit."],"avoidWhen":["Lists of actions: use a dropdown menu.","Plain hints: use a tooltip."],"keywords":["Overlays","popover","anchored","panels"],"notes":["Use the close() render prop to close after an action."],"builtFrom":[],"dependencies":["motion"],"related":["dropdown-menu","tooltip","dialog"]},{"name":"kpi-card","kind":"component","title":"KPI card","description":"A metric with delta, hint and an optional sparkline.","tagline":"A number with context","category":"Data Display","tier":"free","url":"https://lodeui.com/components/kpi-card","markdown":"https://lodeui.com/components/kpi-card/markdown","install":"npx shadcn@latest add https://lodeui.com/r/kpi-card.json","useCases":["A headline metric with its change and a small trend."],"avoidWhen":["Detailed analysis: use a chart."],"keywords":["Data Display","kpi","card","number","with","context"],"notes":["Set invert for metrics where going down is good."],"builtFrom":[],"dependencies":["lucide-react"],"related":["number-ticker","sparkline","gauge"]},{"name":"timeline","kind":"component","title":"Timeline","description":"Vertical activity timeline with toned icons that stagger in.","tagline":"What happened, in order","category":"Data Display","tier":"free","url":"https://lodeui.com/components/timeline","markdown":"https://lodeui.com/components/timeline/markdown","install":"npx shadcn@latest add https://lodeui.com/r/timeline.json","useCases":["Activity feeds, audit trails, incident updates and order history."],"avoidWhen":["Steps people must complete: use a stepper."],"keywords":["Data Display","timeline","what","happened","order"],"notes":["Newest first is the usual order for activity feeds."],"builtFrom":[],"dependencies":["motion"],"related":["log-viewer","badge"]},{"name":"data-table","kind":"component","title":"Data table","description":"Sorting, search, filters, selection, bulk actions, column visibility, pagination, expandable rows, export and mobile cards.","tagline":"Everything a table needs","category":"Data Display","tier":"pro","url":"https://lodeui.com/components/data-table","markdown":"https://lodeui.com/components/data-table/markdown","install":"npx shadcn@latest add @lode/data-table","useCases":["Records people sort, filter, select and act on: users, invoices, orders."],"avoidWhen":["A few rows with no actions: a plain table is enough.","Spreadsheet editing."],"keywords":["Data Display","data","table","everything","needs"],"notes":["accessor must return a primitive; use cell for formatting.","Keep getRowId stable or selection resets."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["pagination","checkbox","dropdown-menu","empty-state"]},{"name":"code-viewer","kind":"component","title":"Code viewer","description":"File tabs, line numbers, highlighted lines, copy and expand, with a dependency-free highlighter.","tagline":"Tabs, lines, highlights, copy","category":"Developer","tier":"free","url":"https://lodeui.com/components/code-viewer","markdown":"https://lodeui.com/components/code-viewer/markdown","install":"npx shadcn@latest add https://lodeui.com/r/code-viewer.json","useCases":["Showing code samples with file tabs, highlighted lines and copy."],"avoidWhen":["Editing code: use an editor.","Comparing versions: use the diff viewer."],"keywords":["Developer","code","viewer","tabs","lines","highlights","copy"],"notes":["For full syntax accuracy on the server, use shiki instead."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["diff-viewer","terminal","json-viewer"]},{"name":"terminal","kind":"component","title":"Terminal","description":"A terminal window that types commands and streams output, with replay and copy.","tagline":"Commands that type themselves","category":"Developer","tier":"free","url":"https://lodeui.com/components/terminal","markdown":"https://lodeui.com/components/terminal/markdown","install":"npx shadcn@latest add https://lodeui.com/r/terminal.json","useCases":["Install instructions and CLI demos that type themselves out."],"avoidWhen":["A real shell: use xterm.js."],"keywords":["Developer","terminal","commands","that","type","themselves"],"notes":["Use type=\"progress\" for waits rather than fake output lines."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["code-viewer","log-viewer"]},{"name":"json-viewer","kind":"component","title":"JSON viewer","description":"Collapsible, syntax-colored JSON tree.","tagline":"Fold any JSON","category":"Developer","tier":"free","url":"https://lodeui.com/components/json-viewer","markdown":"https://lodeui.com/components/json-viewer/markdown","install":"npx shadcn@latest add https://lodeui.com/r/json-viewer.json","useCases":["Inspecting API responses, webhook payloads and config."],"avoidWhen":["Editing JSON: use a code editor."],"keywords":["Developer","json","viewer","fold"],"notes":["Lower defaultExpandDepth for large payloads."],"builtFrom":[],"dependencies":["lucide-react"],"related":["code-viewer","log-viewer"]},{"name":"diff-viewer","kind":"component","title":"Diff viewer","description":"Line diff in unified or split view with added/removed counts.","tagline":"Unified or split","category":"Developer","tier":"pro","url":"https://lodeui.com/components/diff-viewer","markdown":"https://lodeui.com/components/diff-viewer/markdown","install":"npx shadcn@latest add @lode/diff-viewer","useCases":["Showing what changed between two versions of a file or config."],"avoidWhen":["Very large files (over a few thousand lines)."],"keywords":["Developer","diff","viewer","unified","split"],"notes":["Normalize line endings before diffing."],"builtFrom":["segmented-control"],"dependencies":["motion"],"related":["code-viewer","json-viewer"]},{"name":"log-viewer","kind":"component","title":"Log viewer","description":"Live log stream with level filters, search and follow mode.","tagline":"Tail, filter, search","category":"Developer","tier":"pro","url":"https://lodeui.com/components/log-viewer","markdown":"https://lodeui.com/components/log-viewer/markdown","install":"npx shadcn@latest add @lode/log-viewer","useCases":["Streaming build, function or request logs."],"avoidWhen":["Millions of lines: virtualize or page on the server."],"keywords":["Developer","log","viewer","tail","filter","search"],"notes":["Append new entries to the end of the array."],"builtFrom":[],"dependencies":["lucide-react"],"related":["terminal","timeline","json-viewer"]},{"name":"uptime-bar","kind":"component","title":"Uptime bar","description":"Daily status bars with uptime percentage and incident tooltips.","tagline":"Status-page bars","category":"Developer","tier":"pro","url":"https://lodeui.com/components/uptime-bar","markdown":"https://lodeui.com/components/uptime-bar/markdown","install":"npx shadcn@latest add @lode/uptime-bar","useCases":["Status pages and service health over 30–90 days."],"avoidWhen":["Live latency: use a line chart."],"keywords":["Developer","uptime","bar","status","page","bars"],"notes":["Use none for days before monitoring started."],"builtFrom":[],"dependencies":[],"related":["badge","timeline"]},{"name":"env-editor","kind":"component","title":"Environment editor","description":"Masked env vars with per-environment scope, validation and .env paste.","tagline":"Secrets, scoped and masked","category":"Developer","tier":"pro","url":"https://lodeui.com/components/env-editor","markdown":"https://lodeui.com/components/env-editor/markdown","install":"npx shadcn@latest add @lode/env-editor","useCases":["Editing environment variables or secrets per environment."],"avoidWhen":["Non-secret settings: use regular inputs."],"keywords":["Developer","env","editor","secrets","scoped","masked"],"notes":["Encrypt values server-side; the editor only masks them."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["input","badge"]},{"name":"spotlight-card","kind":"component","title":"Spotlight card","description":"A card lit by a spotlight that follows the pointer, border included.","tagline":"Light follows the pointer","category":"Motion","tier":"free","url":"https://lodeui.com/components/spotlight-card","markdown":"https://lodeui.com/components/spotlight-card/markdown","install":"npx shadcn@latest add https://lodeui.com/r/spotlight-card.json","useCases":["Feature grids and pricing cards on marketing pages."],"avoidWhen":["Dense app UI where hover effects distract."],"keywords":["Motion","spotlight","card","light","follows","pointer"],"notes":["Put interactive content inside as normal."],"builtFrom":[],"dependencies":[],"related":["tilt-card","border-beam","magnetic"]},{"name":"magnetic","kind":"component","title":"Magnetic","description":"Makes any element lean toward the pointer and spring back.","tagline":"Leans toward the cursor","category":"Motion","tier":"free","url":"https://lodeui.com/components/magnetic","markdown":"https://lodeui.com/components/magnetic/markdown","install":"npx shadcn@latest add https://lodeui.com/r/magnetic.json","useCases":["A primary call to action on a landing page."],"avoidWhen":["Forms and dense UI."],"keywords":["Motion","magnetic","leans","toward","cursor"],"notes":["Use on one element per view."],"builtFrom":[],"dependencies":["motion"],"related":["spotlight-card","tilt-card"]},{"name":"text-reveal","kind":"component","title":"Text reveal","description":"Text that rises out of a blur, word by word, as it scrolls into view.","tagline":"Words rise out of a blur","category":"Text Effects","tier":"free","url":"https://lodeui.com/components/text-reveal","markdown":"https://lodeui.com/components/text-reveal/markdown","install":"npx shadcn@latest add https://lodeui.com/r/text-reveal.json","useCases":["Hero headings and section titles."],"avoidWhen":["Body copy and anything people need to read immediately."],"keywords":["Text Effects","text","reveal","words","rise","blur"],"notes":["Use as=\"h1\" for hero headings so the outline stays right."],"builtFrom":[],"dependencies":["motion"],"related":["text-scramble","shimmer-text","reveal"]},{"name":"text-scramble","kind":"component","title":"Text scramble","description":"Characters cycle through glyphs and settle into the final text.","tagline":"Decodes into place","category":"Text Effects","tier":"free","url":"https://lodeui.com/components/text-scramble","markdown":"https://lodeui.com/components/text-scramble/markdown","install":"npx shadcn@latest add https://lodeui.com/r/text-scramble.json","useCases":["Short technical labels and headings that decode on load or hover."],"avoidWhen":["Sentences and body text."],"keywords":["Text Effects","text","scramble","decodes","into","place"],"notes":["Keep text under ~24 characters."],"builtFrom":[],"dependencies":["motion"],"related":["text-reveal","shimmer-text"]},{"name":"border-beam","kind":"component","title":"Border beam","description":"A light that travels around an element's border.","tagline":"Light around the edge","category":"Motion","tier":"pro","url":"https://lodeui.com/components/border-beam","markdown":"https://lodeui.com/components/border-beam/markdown","install":"npx shadcn@latest add @lode/border-beam","useCases":["Drawing the eye to one card: the recommended plan, a new feature."],"avoidWhen":["More than one element per view."],"keywords":["Motion","border","beam","light","around","edge"],"notes":["Give it a border radius class."],"builtFrom":[],"dependencies":[],"related":["spotlight-card","shimmer-text"]},{"name":"shimmer-text","kind":"component","title":"Shimmer text","description":"Text with a light sweep, for thinking and loading states.","tagline":"For thinking states","category":"Text Effects","tier":"free","url":"https://lodeui.com/components/shimmer-text","markdown":"https://lodeui.com/components/shimmer-text/markdown","install":"npx shadcn@latest add https://lodeui.com/r/shimmer-text.json","useCases":["Pending states like Thinking… or Generating…"],"avoidWhen":["Static headings."],"keywords":["Text Effects","shimmer","text","thinking","states"],"notes":["Pair with aria-live on the container when status changes."],"builtFrom":[],"dependencies":[],"related":["ai-reasoning","text-scramble"]},{"name":"reveal","kind":"component","title":"Reveal","description":"Scroll-triggered fade-and-slide, plus a Stagger for groups.","tagline":"Enter on scroll","category":"Motion","tier":"free","url":"https://lodeui.com/components/reveal","markdown":"https://lodeui.com/components/reveal/markdown","install":"npx shadcn@latest add https://lodeui.com/r/reveal.json","useCases":["Sections that fade in as you scroll a landing page."],"avoidWhen":["App UI people use every day."],"keywords":["Motion","reveal","enter","scroll"],"notes":["Don't wrap above-the-fold content; it delays first paint."],"builtFrom":[],"dependencies":["motion"],"related":["text-reveal"]},{"name":"sortable-list","kind":"component","title":"Sortable list","description":"Drag to reorder, or use arrow keys on the handle; announces moves.","tagline":"Drag or arrow to reorder","category":"Layout","tier":"pro","url":"https://lodeui.com/components/sortable-list","markdown":"https://lodeui.com/components/sortable-list/markdown","install":"npx shadcn@latest add @lode/sortable-list","useCases":["Reordering short lists: priorities, navigation items, steps."],"avoidWhen":["Moving items between columns: use the kanban board block."],"keywords":["Layout","sortable","list","drag","arrow","reorder"],"notes":["Persist order in onReorder."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["data-table"]},{"name":"tilt-card","kind":"component","title":"Tilt card","description":"A card that tilts in 3D toward the pointer with a moving glare.","tagline":"3D tilt and glare","category":"Motion","tier":"pro","url":"https://lodeui.com/components/tilt-card","markdown":"https://lodeui.com/components/tilt-card/markdown","install":"npx shadcn@latest add @lode/tilt-card","useCases":["Product shots, cards and credit-card visuals on marketing pages."],"avoidWhen":["Cards containing forms."],"keywords":["Motion","tilt","card","glare"],"notes":["Keep max under 15."],"builtFrom":[],"dependencies":["motion"],"related":["spotlight-card","magnetic"]},{"name":"line-chart","kind":"component","title":"Line chart","description":"Multi-series lines with legend toggles, crosshair and shared tooltip.","tagline":"Many lines, one tooltip","category":"Charts","tier":"free","url":"https://lodeui.com/components/line-chart","markdown":"https://lodeui.com/components/line-chart/markdown","install":"npx shadcn@latest add https://lodeui.com/r/line-chart.json","useCases":["Comparing several series over time."],"avoidWhen":["Parts of a total: use a stacked area chart."],"keywords":["Charts","line","chart","many","lines","tooltip"],"notes":["All series must have labels.length values."],"builtFrom":[],"dependencies":["motion"],"related":["area-chart","stacked-area-chart","sparkline"]},{"name":"funnel-chart","kind":"component","title":"Funnel chart","description":"Conversion funnel with overall and step-to-step rates.","tagline":"Where people drop off","category":"Charts","tier":"pro","url":"https://lodeui.com/components/funnel-chart","markdown":"https://lodeui.com/components/funnel-chart/markdown","install":"npx shadcn@latest add @lode/funnel-chart","useCases":["Conversion through ordered steps: visit → sign up → pay."],"avoidWhen":["Unordered categories: use a bar chart."],"keywords":["Charts","funnel","chart","where","people","drop"],"notes":["Values should decrease; the chart doesn't sort."],"builtFrom":[],"dependencies":["motion"],"related":["bar-chart","kpi-card"]},{"name":"gauge","kind":"component","title":"Gauge","description":"Half-circle gauge with warning and danger thresholds.","tagline":"Capacity at a glance","category":"Charts","tier":"free","url":"https://lodeui.com/components/gauge","markdown":"https://lodeui.com/components/gauge/markdown","install":"npx shadcn@latest add https://lodeui.com/r/gauge.json","useCases":["Scores, capacity and SLA targets against a maximum."],"avoidWhen":["Trends: use a chart."],"keywords":["Charts","gauge","capacity","glance"],"notes":["thresholds are fractions (0.7), not values (70)."],"builtFrom":[],"dependencies":["motion"],"related":["progress","kpi-card"]},{"name":"prompt-input","kind":"component","title":"Prompt input","description":"Chat composer that grows, takes files by picker, paste or drop, and turns into Stop while generating.","tagline":"The chat composer","category":"AI","tier":"pro","url":"https://lodeui.com/components/prompt-input","markdown":"https://lodeui.com/components/prompt-input/markdown","install":"npx shadcn@latest add @lode/prompt-input","useCases":["Chat and AI composers with attachments and a stop button."],"avoidWhen":["Plain comments: use a textarea."],"keywords":["AI","prompt","input","chat","composer"],"notes":["Clear your own state after onSubmit; the input clears itself."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["ai-reasoning","citation-list","textarea"]},{"name":"ai-reasoning","kind":"component","title":"AI reasoning","description":"A collapsible thinking trace that folds into a summary when done.","tagline":"Show the model's work","category":"AI","tier":"pro","url":"https://lodeui.com/components/ai-reasoning","markdown":"https://lodeui.com/components/ai-reasoning/markdown","install":"npx shadcn@latest add @lode/ai-reasoning","useCases":["Showing a model's steps while it works, then folding them away."],"avoidWhen":["The final answer itself."],"keywords":["AI","ai","reasoning","show","model","work"],"notes":["Set thinking=false when the answer starts streaming."],"builtFrom":["shimmer-text"],"dependencies":["motion","lucide-react"],"related":["prompt-input","shimmer-text","citation-list"]},{"name":"citation-list","kind":"component","title":"Citation list","description":"Numbered sources and inline citation marks for AI answers.","tagline":"Sources for answers","category":"AI","tier":"free","url":"https://lodeui.com/components/citation-list","markdown":"https://lodeui.com/components/citation-list/markdown","install":"npx shadcn@latest add https://lodeui.com/r/citation-list.json","useCases":["Sources for AI answers or research summaries."],"avoidWhen":["General link lists."],"keywords":["AI","citation","list","sources","answers"],"notes":["Ids must match between marks and sources."],"builtFrom":[],"dependencies":["lucide-react"],"related":["ai-reasoning","prompt-input"]},{"name":"rating","kind":"component","title":"Rating","description":"Interactive or read-only star rating with half stars.","tagline":"Stars, halves included","category":"Inputs","tier":"free","url":"https://lodeui.com/components/rating","markdown":"https://lodeui.com/components/rating/markdown","install":"npx shadcn@latest add https://lodeui.com/r/rating.json","useCases":["Collecting or showing star ratings."],"avoidWhen":["Precise satisfaction scores: use a radio group with labels."],"keywords":["Inputs","rating","stars","halves","included"],"notes":["Use readOnly for averages like 4.6."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["product-card"]},{"name":"product-card","kind":"component","title":"Product card","description":"Product tile with swatches, wishlist, sale price and add-to-cart.","tagline":"Swatches, wishlist, add to cart","category":"Commerce","tier":"pro","url":"https://lodeui.com/components/product-card","markdown":"https://lodeui.com/components/product-card/markdown","install":"npx shadcn@latest add @lode/product-card","useCases":["Product grids in stores and catalogs."],"avoidWhen":["Product detail pages: use the product detail block."],"keywords":["Commerce","product","card","swatches","wishlist","cart"],"notes":["Prices are numbers; formatting uses currency."],"builtFrom":["rating"],"dependencies":["motion","lucide-react"],"related":["rating","badge"]},{"name":"dock","kind":"component","title":"Dock","description":"macOS-style dock whose icons magnify under the pointer, with tooltips, badges and active dots.","tagline":"Icons that grow under your pointer","category":"Navigation","tier":"pro","url":"https://lodeui.com/components/dock","markdown":"https://lodeui.com/components/dock/markdown","install":"npx shadcn@latest add @lode/dock","useCases":["A launcher of 4–10 top-level destinations or tools, like an app switcher.","Playful navigation on marketing pages and portfolios."],"avoidWhen":["Primary navigation of a dense app: use a sidebar or tabs.","Touch-first screens: magnification needs a mouse (the dock still works, just without the effect)."],"keywords":["Navigation","dock","icons","that","grow","under","your","pointer"],"notes":["Give every item a label; it is the accessible name and the tooltip.","Use href for navigation and onSelect for actions, not both."],"builtFrom":[],"dependencies":["motion"],"related":["expandable-tabs","tooltip","magnetic"]},{"name":"marquee","kind":"component","title":"Marquee","description":"Endless, seamless scroller for logos and testimonials that glides to a stop on hover.","tagline":"Endless logos and testimonials","category":"Motion","tier":"pro","url":"https://lodeui.com/components/marquee","markdown":"https://lodeui.com/components/marquee/markdown","install":"npx shadcn@latest add @lode/marquee","useCases":["Logo walls, testimonials and tag clouds on landing pages."],"avoidWhen":["Content people must read or act on: moving text is hard to read.","More than two marquees in one view."],"keywords":["Motion","marquee","endless","logos","testimonials"],"notes":["Always pass aria-label.","Keep items short and visual; put long copy elsewhere."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["orbiting-circles","carousel","animated-list"]},{"name":"flip-card","kind":"component","title":"Flip card","description":"A two-sided card that flips in 3D on click, Enter or hover.","tagline":"Two faces, one 3D flip","category":"Motion","tier":"pro","url":"https://lodeui.com/components/flip-card","markdown":"https://lodeui.com/components/flip-card/markdown","install":"npx shadcn@latest add @lode/flip-card","useCases":["Reveal details on demand: plan features, flashcards, contact cards."],"avoidWhen":["Content that must be compared side by side: show both faces.","Faces containing form fields or buttons: use a dialog."],"keywords":["Motion","flip","card","faces"],"notes":["Always set a height: faces are absolutely positioned.","Use trigger=\"hover\" only for decorative reveals."],"builtFrom":[],"dependencies":["motion"],"related":["tilt-card","morphing-dialog","spotlight-card"]},{"name":"swipe-deck","kind":"component","title":"Swipe deck","description":"Tinder-style card stack: drag, tap or use arrow keys to pass or like, with undo.","tagline":"Swipe left, swipe right","category":"Media","tier":"pro","url":"https://lodeui.com/components/swipe-deck","markdown":"https://lodeui.com/components/swipe-deck/markdown","install":"npx shadcn@latest add @lode/swipe-deck","useCases":["Fast yes / no decisions over a queue: candidates, stays, products, flashcards."],"avoidWhen":["Choices people need to compare: use a grid.","Irreversible actions without undo."],"keywords":["Media","swipe","deck","left","right"],"notes":["onSwipe fires immediately; undo does not call it again, so handle reversals yourself if you persist swipes."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["carousel","like-button","product-card"]},{"name":"like-button","kind":"component","title":"Like button","description":"Heart toggle that bursts into particles and rolls its count.","tagline":"A heart that bursts","category":"Actions","tier":"pro","url":"https://lodeui.com/components/like-button","markdown":"https://lodeui.com/components/like-button/markdown","install":"npx shadcn@latest add @lode/like-button","useCases":["Likes, favorites and reactions on posts, comments and products."],"avoidWhen":["Settings: use a switch."],"keywords":["Actions","like","button","heart","that","bursts"],"notes":["When controlled, pass the already-updated count yourself."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["rating","confetti","action-button"]},{"name":"hold-to-confirm","kind":"component","title":"Hold to confirm","description":"Press and hold to confirm destructive or important actions; letting go cancels.","tagline":"No more accidental deletes","category":"Actions","tier":"pro","url":"https://lodeui.com/components/hold-to-confirm","markdown":"https://lodeui.com/components/hold-to-confirm/markdown","install":"npx shadcn@latest add @lode/hold-to-confirm","useCases":["Destructive or expensive actions that shouldn't fire on a stray click: delete, release, wipe."],"avoidWhen":["Frequent actions: holding every time is slow.","Actions that need explanation: use a confirm dialog."],"keywords":["Actions","hold","to","confirm","more","accidental","deletes"],"notes":["Use for one action at a time; don't put several in a row."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["slide-to-confirm","action-button","dialog"]},{"name":"slide-to-confirm","kind":"component","title":"Slide to confirm","description":"Drag the handle to the end to confirm a payment or action; Enter works too.","tagline":"Slide to pay, slide to ship","category":"Actions","tier":"pro","url":"https://lodeui.com/components/slide-to-confirm","markdown":"https://lodeui.com/components/slide-to-confirm/markdown","install":"npx shadcn@latest add @lode/slide-to-confirm","useCases":["Payments, transfers and launches on touch screens, where a deliberate gesture builds trust."],"avoidWhen":["Desktop-first forms: a button is faster.","Anything that needs a review step: confirm first."],"keywords":["Actions","slide","to","confirm","ship"],"notes":["Put the amount in the label so the gesture confirms something specific."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["hold-to-confirm","action-button","billing-settings"]},{"name":"typewriter","kind":"component","title":"Typewriter","description":"Types phrases out, deletes them and moves on, with a blinking caret.","tagline":"Types, deletes, repeats","category":"Text Effects","tier":"pro","url":"https://lodeui.com/components/typewriter","markdown":"https://lodeui.com/components/typewriter/markdown","install":"npx shadcn@latest add @lode/typewriter","useCases":["Hero headlines that cycle through use cases.","Terminal-style install hints."],"avoidWhen":["Anything people need to read quickly or copy."],"keywords":["Text Effects","typewriter","types","deletes","repeats"],"notes":["Keep phrases a similar length so the layout doesn't jump much."],"builtFrom":[],"dependencies":["motion"],"related":["word-rotate","text-scramble","text-reveal"]},{"name":"word-rotate","kind":"component","title":"Word rotate","description":"Cycles words in place with a blur-slide while the width springs to fit.","tagline":"One word, many meanings","category":"Text Effects","tier":"pro","url":"https://lodeui.com/components/word-rotate","markdown":"https://lodeui.com/components/word-rotate/markdown","install":"npx shadcn@latest add @lode/word-rotate","useCases":["Rotating one word in a headline: audiences, benefits, product names."],"avoidWhen":["Whole sentences: use a typewriter or a carousel."],"keywords":["Text Effects","word","rotate","many","meanings"],"notes":["Words must be unique; they are used as keys."],"builtFrom":[],"dependencies":["motion"],"related":["typewriter","text-reveal","shimmer-text"]},{"name":"aurora-background","kind":"component","title":"Aurora background","description":"Slow drifting northern-lights glow behind any section.","tagline":"A calm drifting glow","category":"Backgrounds","tier":"pro","url":"https://lodeui.com/components/aurora-background","markdown":"https://lodeui.com/components/aurora-background/markdown","install":"npx shadcn@latest add @lode/aurora-background","useCases":["Hero sections, pricing headers and empty states that need atmosphere."],"avoidWhen":["Behind dense data or long text: it lowers contrast.","More than one per page."],"keywords":["Backgrounds","aurora","background","calm","drifting","glow"],"notes":["Use theme-friendly colors; the glow sits on var(--background)."],"builtFrom":[],"dependencies":["motion"],"related":["spotlight-card","border-beam","orbiting-circles"]},{"name":"morphing-dialog","kind":"component","title":"Morphing dialog","description":"A card that morphs into a dialog: cover, title and frame fly to their new places.","tagline":"Cards that become dialogs","category":"Overlays","tier":"pro","url":"https://lodeui.com/components/morphing-dialog","markdown":"https://lodeui.com/components/morphing-dialog/markdown","install":"npx shadcn@latest add @lode/morphing-dialog","useCases":["Galleries, collections and feature cards where the detail view should feel connected to the card."],"avoidWhen":["Forms and confirmations: use a dialog.","Lists of dozens of cards on low-end devices."],"keywords":["Overlays","morphing","dialog","cards","that","become","dialogs"],"notes":["Each instance gets its own layout IDs, so many can share a page."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["dialog","drawer","flip-card"]},{"name":"animated-list","kind":"component","title":"Animated list","description":"A feed where new entries spring in at the top and older ones make room.","tagline":"Live feeds that make room","category":"Feedback","tier":"pro","url":"https://lodeui.com/components/animated-list","markdown":"https://lodeui.com/components/animated-list/markdown","install":"npx shadcn@latest add @lode/animated-list","useCases":["Live feeds: notifications, activity, payments, logs at human speed."],"avoidWhen":["Long scrollable history: use a timeline or table."],"keywords":["Feedback","animated","list","live","feeds","that","make","room"],"notes":["Keep ids stable or rows will re-animate."],"builtFrom":[],"dependencies":["motion"],"related":["timeline","toast","log-viewer"]},{"name":"image-compare","kind":"component","title":"Image compare","description":"Before and after slider with drag, hover and keyboard control.","tagline":"Before and after, side by side","category":"Media","tier":"pro","url":"https://lodeui.com/components/image-compare","markdown":"https://lodeui.com/components/image-compare/markdown","install":"npx shadcn@latest add @lode/image-compare","useCases":["Before / after: photo edits, redesigns, filters, upscaling."],"avoidWhen":["Images of different sizes or framing: the comparison misleads."],"keywords":["Media","image","compare","before","after","side"],"notes":["Use images with identical dimensions and framing."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["carousel","slider","resizable-panels"]},{"name":"carousel","kind":"component","title":"Carousel","description":"Swipeable slides with arrows, animated dots, keys and pausable autoplay.","tagline":"Swipe, snap and autoplay","category":"Media","tier":"pro","url":"https://lodeui.com/components/carousel","markdown":"https://lodeui.com/components/carousel/markdown","install":"npx shadcn@latest add @lode/carousel","useCases":["Featured content, product galleries and onboarding slides."],"avoidWhen":["Critical content: most people never see slide 3.","Comparing items: use a grid."],"keywords":["Media","carousel","swipe","snap","autoplay"],"notes":["Keep autoplay at 4 seconds or slower."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["swipe-deck","image-compare","marquee"]},{"name":"color-picker","kind":"component","title":"Color picker","description":"Saturation and hue pickers, hex field, swatches, eyedropper and copy.","tagline":"Hue, shade, hex and eyedropper","category":"Inputs","tier":"pro","url":"https://lodeui.com/components/color-picker","markdown":"https://lodeui.com/components/color-picker/markdown","install":"npx shadcn@latest add @lode/color-picker","useCases":["Brand colors, theme editors, labels and design tools."],"avoidWhen":["A handful of fixed choices: use swatches in a radio group."],"keywords":["Inputs","color","picker","shade","eyedropper"],"notes":["Values are lowercase 6-digit hex."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["slider","input","range-slider"]},{"name":"file-dropzone","kind":"component","title":"File dropzone","description":"Drag-and-drop upload with type, size and count checks and per-file progress.","tagline":"Drop, validate, upload","category":"Forms","tier":"pro","url":"https://lodeui.com/components/file-dropzone","markdown":"https://lodeui.com/components/file-dropzone/markdown","install":"npx shadcn@latest add @lode/file-dropzone","useCases":["Uploading attachments, imports, avatars and documents."],"avoidWhen":["A single small file in a dense form: a plain file input is enough."],"keywords":["Forms","file","dropzone","drop","validate","upload"],"notes":["Validate on the server too; accept is only a hint to browsers."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["progress","input","empty-state"]},{"name":"scroll-progress","kind":"component","title":"Scroll progress","description":"A reading progress bar that springs with the page or any scroll container.","tagline":"How far you've read","category":"Navigation","tier":"pro","url":"https://lodeui.com/components/scroll-progress","markdown":"https://lodeui.com/components/scroll-progress/markdown","install":"npx shadcn@latest add @lode/scroll-progress","useCases":["Long articles, docs and changelogs.","Scrollable panels where position matters."],"avoidWhen":["Short pages: it adds noise."],"keywords":["Navigation","scroll","progress","read"],"notes":["For page progress, place it fixed at the top with a high z-index."],"builtFrom":[],"dependencies":["motion"],"related":["progress","reveal","tabs"]},{"name":"dynamic-island","kind":"component","title":"Dynamic island","description":"A black pill that morphs its size and shape to fit live activity.","tagline":"Live activity in a pill","category":"Feedback","tier":"pro","url":"https://lodeui.com/components/dynamic-island","markdown":"https://lodeui.com/components/dynamic-island/markdown","install":"npx shadcn@latest add @lode/dynamic-island","useCases":["Showing one live activity compactly: calls, timers, uploads, recording, now playing."],"avoidWhen":["Several simultaneous notifications: use toasts or an animated list."],"keywords":["Feedback","dynamic","island","live","activity","pill"],"notes":["Give each view a fixed width so the morph has a clear target."],"builtFrom":[],"dependencies":["motion"],"related":["toast","animated-list","segmented-control"]},{"name":"expandable-tabs","kind":"component","title":"Expandable tabs","description":"Icon tabs where the selected one grows to reveal its label.","tagline":"Icons that reveal their names","category":"Navigation","tier":"pro","url":"https://lodeui.com/components/expandable-tabs","markdown":"https://lodeui.com/components/expandable-tabs/markdown","install":"npx shadcn@latest add @lode/expandable-tabs","useCases":["Compact toolbars and mobile nav where icons save space but labels prevent guessing."],"avoidWhen":["Tabs with long labels or more than about 8 options."],"keywords":["Navigation","expandable","tabs","icons","that","reveal","their","names"],"notes":["Use as const on the tabs array to type value as a literal union."],"builtFrom":[],"dependencies":["motion"],"related":["tabs","segmented-control","dock"]},{"name":"tree-view","kind":"component","title":"Tree view","description":"Folders and files with animated expand, indent guides and full tree keyboard support.","tagline":"Folders, files and full keyboard","category":"Data Display","tier":"pro","url":"https://lodeui.com/components/tree-view","markdown":"https://lodeui.com/components/tree-view/markdown","install":"npx shadcn@latest add @lode/tree-view","useCases":["File explorers, nested navigation, org charts and category pickers."],"avoidWhen":["Flat lists: use a list.","Very large trees (thousands of nodes): virtualize."],"keywords":["Data Display","tree","view","folders","files","full","keyboard"],"notes":["Ids must be unique across the whole tree."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["accordion","json-viewer","context-menu"]},{"name":"context-menu","kind":"component","title":"Context menu","description":"Right-click menu that opens at the pointer, with long-press, typeahead and shortcuts.","tagline":"Right-click, long-press, Shift+F10","category":"Overlays","tier":"pro","url":"https://lodeui.com/components/context-menu","markdown":"https://lodeui.com/components/context-menu/markdown","install":"npx shadcn@latest add @lode/context-menu","useCases":["Secondary actions on files, rows, canvas objects and messages."],"avoidWhen":["The only way to reach an action: also offer a visible button or menu."],"keywords":["Overlays","context","menu","right","click","long","press","shift"],"notes":["Put the most destructive action last."],"builtFrom":[],"dependencies":["motion"],"related":["dropdown-menu","popover","tree-view"]},{"name":"hover-card","kind":"component","title":"Hover card","description":"A rich preview that appears on hover or focus and stays while you move into it.","tagline":"Rich previews on hover","category":"Overlays","tier":"pro","url":"https://lodeui.com/components/hover-card","markdown":"https://lodeui.com/components/hover-card/markdown","install":"npx shadcn@latest add @lode/hover-card","useCases":["Previews behind links and mentions: people, repos, products, citations."],"avoidWhen":["Essential information or actions: touch users never hover.","Plain labels: use a tooltip."],"keywords":["Overlays","hover","card","rich","previews"],"notes":["Don't put buttons people need inside a hover card."],"builtFrom":[],"dependencies":["motion"],"related":["tooltip","popover","profile-card"]},{"name":"orbiting-circles","kind":"component","title":"Orbiting circles","description":"Icons orbiting a center on rings, staying upright as they travel.","tagline":"Integrations in orbit","category":"Motion","tier":"pro","url":"https://lodeui.com/components/orbiting-circles","markdown":"https://lodeui.com/components/orbiting-circles/markdown","install":"npx shadcn@latest add @lode/orbiting-circles","useCases":["Showing integrations, a platform's ecosystem or connected tools on a landing page."],"avoidWhen":["Data people need to read: the icons move."],"keywords":["Motion","orbiting","circles","integrations","orbit"],"notes":["List the integrations in label so screen-reader users get the same information."],"builtFrom":[],"dependencies":["motion"],"related":["marquee","aurora-background","avatar-group"]},{"name":"flip-clock","kind":"component","title":"Flip clock","description":"Split-flap countdown where every digit flips like a departures board.","tagline":"A countdown that flips","category":"Date & Time","tier":"pro","url":"https://lodeui.com/components/flip-clock","markdown":"https://lodeui.com/components/flip-clock/markdown","install":"npx shadcn@latest add @lode/flip-clock","useCases":["Launch countdowns, sales ending, event starts and short timers."],"avoidWhen":["Precise timing in tools: use plain text."],"keywords":["Date & Time","flip","clock","countdown","that","flips"],"notes":["Change the key to restart a duration timer."],"builtFrom":[],"dependencies":["motion"],"related":["number-ticker","progress","date-range-picker"]},{"name":"contribution-graph","kind":"component","title":"Contribution graph","description":"A year of activity as a grid of days with tooltips and keyboard exploring.","tagline":"A year of activity at a glance","category":"Charts","tier":"pro","url":"https://lodeui.com/components/contribution-graph","markdown":"https://lodeui.com/components/contribution-graph/markdown","install":"npx shadcn@latest add @lode/contribution-graph","useCases":["Activity over a year: commits, workouts, streaks, usage."],"avoidWhen":["Short ranges: use a bar chart."],"keywords":["Charts","contribution","graph","year","activity","glance"],"notes":["Pass dates as YYYY-MM-DD strings."],"builtFrom":[],"dependencies":["motion"],"related":["heatmap","bar-chart","sparkline"]},{"name":"resizable-panels","kind":"component","title":"Resizable panels","description":"Panels with draggable, keyboard-resizable dividers and double-click reset.","tagline":"Drag to make room","category":"Layout","tier":"pro","url":"https://lodeui.com/components/resizable-panels","markdown":"https://lodeui.com/components/resizable-panels/markdown","install":"npx shadcn@latest add @lode/resizable-panels","useCases":["Editors, inboxes, IDE-like layouts and side-by-side comparisons."],"avoidWhen":["Phone layouts: stack panels instead."],"keywords":["Layout","resizable","panels","drag","make","room"],"notes":["Persist sizes from onResize and pass them back as defaultSize."],"builtFrom":[],"dependencies":["motion"],"related":["image-compare","drawer","tree-view"]},{"name":"drawer","kind":"component","title":"Drawer","description":"A bottom sheet you drag down to dismiss, with focus trap and safe-area padding.","tagline":"A sheet you pull down","category":"Overlays","tier":"pro","url":"https://lodeui.com/components/drawer","markdown":"https://lodeui.com/components/drawer/markdown","install":"npx shadcn@latest add @lode/drawer","useCases":["Mobile-first sheets: filters, options, quick edits and confirmations."],"avoidWhen":["Desktop forms with many fields: use a dialog or side sheet."],"keywords":["Overlays","drawer","sheet","pull","down"],"notes":["Only the handle and header start drags, so the body can scroll normally."],"builtFrom":[],"dependencies":["motion"],"related":["dialog","morphing-dialog","popover"]},{"name":"confetti","kind":"component","title":"Confetti","description":"Fire a confetti burst from any point, or use the button that bursts from itself.","tagline":"Celebrate the wins","category":"Feedback","tier":"pro","url":"https://lodeui.com/components/confetti","markdown":"https://lodeui.com/components/confetti/markdown","install":"npx shadcn@latest add @lode/confetti","useCases":["Celebrating real milestones: first project, payment, launch, streaks."],"avoidWhen":["Routine actions: it loses meaning fast."],"keywords":["Feedback","confetti","celebrate","wins"],"notes":["Call confetti() only from user actions or real successes, not on page load."],"builtFrom":[],"dependencies":[],"related":["like-button","action-button","toast"]},{"name":"range-slider","kind":"component","title":"Range slider","description":"Two-thumb range with value bubbles and an optional live histogram.","tagline":"Two thumbs and a histogram","category":"Inputs","tier":"pro","url":"https://lodeui.com/components/range-slider","markdown":"https://lodeui.com/components/range-slider/markdown","install":"npx shadcn@latest add @lode/range-slider","useCases":["Filtering by a range: price, dates as numbers, sizes, scores."],"avoidWhen":["One value: use a slider.","Exact numbers: add inputs beside it."],"keywords":["Inputs","range","slider","thumbs","histogram"],"notes":["Fetch results in onValueCommit, not onValueChange."],"builtFrom":[],"dependencies":["motion"],"related":["slider","number-field","bar-chart"]},{"name":"wheel-picker","kind":"component","title":"Wheel picker","description":"iOS-style scroll wheel with 3D rows, snapping and keyboard support.","tagline":"iOS-style scroll wheels","category":"Date & Time","tier":"pro","url":"https://lodeui.com/components/wheel-picker","markdown":"https://lodeui.com/components/wheel-picker/markdown","install":"npx shadcn@latest add @lode/wheel-picker","useCases":["Picking times, dates and quantities on touch screens.","Short ordered lists where scrolling feels natural."],"avoidWhen":["Long lists people search: use a combobox.","Desktop forms where typing is faster."],"keywords":["Date & Time","wheel","picker","style","scroll","wheels"],"notes":["onValueChange fires after scrolling stops (110ms), not on every row passed."],"builtFrom":[],"dependencies":[],"related":["select","number-field","date-range-picker"]},{"name":"toggle-group","kind":"component","title":"Toggle group","description":"A row of toggle buttons for one choice (alignment) or several (bold, italic), with a sliding pill.","tagline":"One or many, with a sliding pill","category":"Inputs","tier":"pro","url":"https://lodeui.com/components/toggle-group","markdown":"https://lodeui.com/components/toggle-group/markdown","install":"npx shadcn@latest add @lode/toggle-group","useCases":["Formatting toolbars: bold / italic (many) or alignment (one).","View switches with icons where a segmented control feels too heavy."],"avoidWhen":["Form choices with descriptions: use a radio group.","Navigation: use tabs."],"keywords":["Inputs","toggle","group","many","with","sliding","pill"],"notes":["Pass type=\"multiple\" with an array value, or leave it single with a string."],"builtFrom":[],"dependencies":["motion"],"related":["segmented-control","radio-group","tabs"]},{"name":"mention-input","kind":"component","title":"Mention input","description":"A textarea that suggests people as you type @ and inserts their handle.","tagline":"@ someone","category":"Inputs","tier":"pro","url":"https://lodeui.com/components/mention-input","markdown":"https://lodeui.com/components/mention-input/markdown","install":"npx shadcn@latest add @lode/mention-input","useCases":["Comments, chat and task descriptions where people tag teammates."],"avoidWhen":["Rich text editing with formatting: use an editor."],"keywords":["Inputs","mention","input","someone"],"notes":["Parse mentions on the server with /@([\\\\w.-]+)/ and map handles to user ids."],"builtFrom":[],"dependencies":["motion"],"related":["textarea","combobox","chat-message"]},{"name":"password-strength","kind":"component","title":"Password strength","description":"New-password field with show / hide, a four-step meter and a live rules checklist.","tagline":"Meter and live rules","category":"Forms","tier":"pro","url":"https://lodeui.com/components/password-strength","markdown":"https://lodeui.com/components/password-strength/markdown","install":"npx shadcn@latest add @lode/password-strength","useCases":["Sign-up and change-password forms."],"avoidWhen":["Sign-in forms: don't hint at rules when people enter an existing password."],"keywords":["Forms","password","strength","meter","live","rules"],"notes":["Enforce the same rules on the server; the meter is guidance only."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["input","sign-in","progress"]},{"name":"phone-input","kind":"component","title":"Phone input","description":"Phone field with a searchable country picker that formats numbers as you type.","tagline":"Country picker, formatted as you type","category":"Forms","tier":"pro","url":"https://lodeui.com/components/phone-input","markdown":"https://lodeui.com/components/phone-input/markdown","install":"npx shadcn@latest add @lode/phone-input","useCases":["Collecting phone numbers for sign-up, 2FA and delivery."],"avoidWhen":["Countries not in the list: extend the exported countries array first."],"keywords":["Forms","phone","input","country","picker","formatted","type"],"notes":["Store the E.164 string; validate with your SMS provider before trusting it."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["input","combobox","two-factor"]},{"name":"credit-card-input","kind":"component","title":"Credit card input","description":"Card fields with brand detection, Luhn validation and a live card that flips for the CVC.","tagline":"A card that flips for the CVC","category":"Commerce","tier":"pro","url":"https://lodeui.com/components/credit-card-input","markdown":"https://lodeui.com/components/credit-card-input/markdown","install":"npx shadcn@latest add @lode/credit-card-input","useCases":["Custom checkout forms where you collect card details yourself through a PCI-compliant tokenizer."],"avoidWhen":["If your payment provider offers hosted fields (Stripe Elements, Dodo checkout), use those: raw card numbers shouldn't touch your servers."],"keywords":["Commerce","credit","card","input","that","flips"],"notes":["Never log or store card details. Pass them straight to your provider's tokenization API."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["payment-card","checkout","coupon-input"]},{"name":"signature-pad","kind":"component","title":"Signature pad","description":"Draw a signature with mouse, pen or finger; strokes thin with speed. Undo and clear.","tagline":"Sign with ink that feels real","category":"Forms","tier":"pro","url":"https://lodeui.com/components/signature-pad","markdown":"https://lodeui.com/components/signature-pad/markdown","install":"npx shadcn@latest add @lode/signature-pad","useCases":["Agreements, delivery confirmations and consent forms."],"avoidWhen":["As the only way to sign: offer a typed-name alternative for people who can't draw."],"keywords":["Forms","signature","pad","sign","with","that","feels","real"],"notes":["Upload the PNG data URL as a file; don't store it inline in a database row."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["inline-edit","file-dropzone"]},{"name":"knob","kind":"component","title":"Knob","description":"A rotary dial like on audio gear: drag, scroll or use the arrow keys.","tagline":"Turn it up","category":"Inputs","tier":"pro","url":"https://lodeui.com/components/knob","markdown":"https://lodeui.com/components/knob/markdown","install":"npx shadcn@latest add @lode/knob","useCases":["Audio, video and creative tools; compact controls for ranges."],"avoidWhen":["Precise values in forms: use a number field or slider."],"keywords":["Inputs","knob","turn"],"notes":["Use format for units so screen readers hear them."],"builtFrom":[],"dependencies":["motion"],"related":["slider","range-slider","number-field"]},{"name":"inline-edit","kind":"component","title":"Inline edit","description":"Text that becomes a field on click; Enter saves with validation, Escape cancels.","tagline":"Click to edit, Enter to save","category":"Inputs","tier":"pro","url":"https://lodeui.com/components/inline-edit","markdown":"https://lodeui.com/components/inline-edit/markdown","install":"npx shadcn@latest add @lode/inline-edit","useCases":["Renaming things in place: projects, files, titles, settings values."],"avoidWhen":["Long text or several fields at once: use a form."],"keywords":["Inputs","inline","edit","click","enter","save"],"notes":["Make onSave throw on server errors so the field stays open."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["input","data-table"]},{"name":"calendar","kind":"component","title":"Calendar","description":"Single-date calendar with month and year jumping, marked days and grid keyboard support.","tagline":"Pick a day, jump a month","category":"Date & Time","tier":"pro","url":"https://lodeui.com/components/calendar","markdown":"https://lodeui.com/components/calendar/markdown","install":"npx shadcn@latest add @lode/calendar","useCases":["Picking one date: deadlines, birthdays, bookings."],"avoidWhen":["Ranges: use the date range picker.","Dates far in the past like birth years: an input is faster."],"keywords":["Date & Time","calendar","pick","jump","month"],"notes":["Dates are local calendar dates; convert at your API boundary."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["date-range-picker","time-slot-picker","meeting-scheduler"]},{"name":"time-slot-picker","kind":"component","title":"Time slot picker","description":"Bookable time slots where picking one slides out a confirm button.","tagline":"Book a slot, confirm in place","category":"Date & Time","tier":"pro","url":"https://lodeui.com/components/time-slot-picker","markdown":"https://lodeui.com/components/time-slot-picker/markdown","install":"npx shadcn@latest add @lode/time-slot-picker","useCases":["Booking calls, demos and appointments."],"avoidWhen":["Free-form times: use a wheel picker or input."],"keywords":["Date & Time","time","slot","picker","book","confirm","place"],"notes":["Show the visitor's own time zone and convert on the server."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["calendar","meeting-scheduler"]},{"name":"navigation-menu","kind":"component","title":"Navigation menu","description":"Header menu whose panels slide between triggers and morph to fit, with featured cards.","tagline":"Panels that slide and morph","category":"Navigation","tier":"pro","url":"https://lodeui.com/components/navigation-menu","markdown":"https://lodeui.com/components/navigation-menu/markdown","install":"npx shadcn@latest add @lode/navigation-menu","useCases":["Marketing site headers with grouped links."],"avoidWhen":["App navigation: use a sidebar.","Phones: collapse to a menu button."],"keywords":["Navigation","navigation","menu","panels","that","slide","morph"],"notes":["Keep panels to 3–6 links; put the most important one first."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["dropdown-menu","sidebar","hero-section"]},{"name":"sidebar","kind":"component","title":"Sidebar","description":"App sidebar that collapses to icons, with nested groups, badges and a gliding active marker.","tagline":"Collapses to icons","category":"Navigation","tier":"pro","url":"https://lodeui.com/components/sidebar","markdown":"https://lodeui.com/components/sidebar/markdown","install":"npx shadcn@latest add @lode/sidebar","useCases":["The main navigation of an app or admin."],"avoidWhen":["Marketing sites: use a navigation menu."],"keywords":["Navigation","sidebar","collapses","icons"],"notes":["Persist the collapsed state with onCollapsedChange."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["navigation-menu","bottom-nav","admin-dashboard"]},{"name":"speed-dial","kind":"component","title":"Speed dial","description":"A floating action button that fans out labelled actions.","tagline":"One button, many actions","category":"Actions","tier":"pro","url":"https://lodeui.com/components/speed-dial","markdown":"https://lodeui.com/components/speed-dial/markdown","install":"npx shadcn@latest add @lode/speed-dial","useCases":["Mobile and canvas tools where several create actions share one button."],"avoidWhen":["More than five actions: use a menu."],"keywords":["Actions","speed","dial","button","many","actions"],"notes":["Up direction shows labels; use left for tight vertical space."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["dropdown-menu","bottom-nav","ripple-button"]},{"name":"bottom-nav","kind":"component","title":"Bottom nav","description":"Mobile tab bar with an animated indicator, badges and safe-area padding.","tagline":"A mobile tab bar","category":"Navigation","tier":"pro","url":"https://lodeui.com/components/bottom-nav","markdown":"https://lodeui.com/components/bottom-nav/markdown","install":"npx shadcn@latest add @lode/bottom-nav","useCases":["Mobile apps and PWAs with 3–5 top-level sections."],"avoidWhen":["Desktop layouts: use a sidebar."],"keywords":["Navigation","bottom","nav","mobile"],"notes":["Fix it to the bottom with position: fixed and add bottom padding to your page."],"builtFrom":[],"dependencies":["motion"],"related":["sidebar","tabs","speed-dial"]},{"name":"table-of-contents","kind":"component","title":"Table of contents","description":"On-this-page list that highlights the current section, with a gliding marker and progress ring.","tagline":"Where you are on the page","category":"Navigation","tier":"pro","url":"https://lodeui.com/components/table-of-contents","markdown":"https://lodeui.com/components/table-of-contents/markdown","install":"npx shadcn@latest add @lode/table-of-contents","useCases":["Long docs, articles and settings pages."],"avoidWhen":["Short pages with two or three sections."],"keywords":["Navigation","table","of","contents","where","page"],"notes":["Give headings tabIndex={-1} so focus can land on them."],"builtFrom":[],"dependencies":["motion"],"related":["scroll-progress","tabs","help-center"]},{"name":"loader","kind":"component","title":"Loader","description":"Six loading indicators (spinner, dots, bars, pulse, orbit, ring) with one API.","tagline":"Six ways to wait","category":"Feedback","tier":"pro","url":"https://lodeui.com/components/loader","markdown":"https://lodeui.com/components/loader/markdown","install":"npx shadcn@latest add @lode/loader","useCases":["Short waits where you can't show a skeleton: buttons, overlays, small panels."],"avoidWhen":["Page loads with known layout: use skeletons."],"keywords":["Feedback","loader","ways","wait"],"notes":["Change label to describe the wait, e.g. \"Saving\"."],"builtFrom":[],"dependencies":["motion"],"related":["skeleton","progress","button"]},{"name":"notification-center","kind":"component","title":"Notification center","description":"A bell with unread badge opening a panel with tabs, mark-all-read and dismiss.","tagline":"A bell full of updates","category":"Feedback","tier":"pro","url":"https://lodeui.com/components/notification-center","markdown":"https://lodeui.com/components/notification-center/markdown","install":"npx shadcn@latest add @lode/notification-center","useCases":["In-app notifications in a header."],"avoidWhen":["One-off confirmations: use a toast."],"keywords":["Feedback","notification","center","bell","full","updates"],"notes":["Mark read on the server in onChange."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["toast","animated-list","popover"]},{"name":"announcement-bar","kind":"component","title":"Announcement bar","description":"A slim dismissible bar above the header that rotates launch messages.","tagline":"Launches above the header","category":"Feedback","tier":"pro","url":"https://lodeui.com/components/announcement-bar","markdown":"https://lodeui.com/components/announcement-bar/markdown","install":"npx shadcn@latest add @lode/announcement-bar","useCases":["Launches, sales and maintenance windows above your header."],"avoidWhen":["Errors in the app: use an alert."],"keywords":["Feedback","announcement","bar","launches","above","header"],"notes":["Change storageKey for each new announcement so it shows again."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["alert","marquee","hero-section"]},{"name":"typing-indicator","kind":"component","title":"Typing indicator","description":"Bouncing dots in a chat bubble with who is typing.","tagline":"Someone is typing…","category":"AI","tier":"pro","url":"https://lodeui.com/components/typing-indicator","markdown":"https://lodeui.com/components/typing-indicator/markdown","install":"npx shadcn@latest add @lode/typing-indicator","useCases":["Chats, support inboxes and AI assistants while a reply is being written."],"avoidWhen":["Long-running work: show progress instead."],"keywords":["AI","typing","indicator","someone"],"notes":["Debounce typing events: clear a person after 3 seconds without keystrokes."],"builtFrom":[],"dependencies":["motion"],"related":["chat-message","team-chat","shimmer-text"]},{"name":"radar-chart","kind":"component","title":"Radar chart","description":"Compare series across dimensions; shapes morph and legend toggles series.","tagline":"Strengths at a glance","category":"Charts","tier":"pro","url":"https://lodeui.com/components/radar-chart","markdown":"https://lodeui.com/components/radar-chart/markdown","install":"npx shadcn@latest add @lode/radar-chart","useCases":["Comparing 2–4 items across 5–8 qualities: products, skills, plans."],"avoidWhen":["Precise comparisons: use a bar chart.","More than four series: it turns into spaghetti."],"keywords":["Charts","radar","chart","strengths","glance"],"notes":["Use the same max for all series so shapes are comparable."],"builtFrom":[],"dependencies":["motion"],"related":["bar-chart","scatter-chart","gauge"]},{"name":"scatter-chart","kind":"component","title":"Scatter chart","description":"Points or bubbles on two measures with groups, hover card and keyboard-focusable dots.","tagline":"Two measures, every point","category":"Charts","tier":"pro","url":"https://lodeui.com/components/scatter-chart","markdown":"https://lodeui.com/components/scatter-chart/markdown","install":"npx shadcn@latest add @lode/scatter-chart","useCases":["Relationships between two measures: seats vs revenue, price vs rating."],"avoidWhen":["Time series: use a line chart."],"keywords":["Charts","scatter","chart","measures","every","point"],"notes":["Give every point a unique id."],"builtFrom":[],"dependencies":["motion"],"related":["line-chart","radar-chart","bar-chart"]},{"name":"treemap","kind":"component","title":"Treemap","description":"Squarified rectangles sized by value, for revenue mix, storage and market caps.","tagline":"Share of the whole","category":"Charts","tier":"pro","url":"https://lodeui.com/components/treemap","markdown":"https://lodeui.com/components/treemap/markdown","install":"npx shadcn@latest add @lode/treemap","useCases":["Parts of a whole with many parts: revenue by product, storage by folder."],"avoidWhen":["A few parts: use a donut chart.","Values over time."],"keywords":["Charts","treemap","share","whole"],"notes":["Use dark, saturated colors: labels are white."],"builtFrom":[],"dependencies":["motion"],"related":["donut-chart","bar-chart","expense-tracker"]},{"name":"activity-rings","kind":"component","title":"Activity rings","description":"Concentric progress rings like a fitness watch, overlapping past 100%.","tagline":"Close your rings","category":"Charts","tier":"pro","url":"https://lodeui.com/components/activity-rings","markdown":"https://lodeui.com/components/activity-rings/markdown","install":"npx shadcn@latest add @lode/activity-rings","useCases":["Daily goals: fitness, habits, quotas, OKRs."],"avoidWhen":["More than four measures: use progress bars."],"keywords":["Charts","activity","rings","close","your"],"notes":["Rings beyond the available radius are skipped; increase size for more rings."],"builtFrom":[],"dependencies":["motion"],"related":["gauge","progress","kpi-card"]},{"name":"gradient-text","kind":"component","title":"Gradient text","description":"Text filled with a slowly flowing gradient.","tagline":"Color that flows","category":"Text Effects","tier":"pro","url":"https://lodeui.com/components/gradient-text","markdown":"https://lodeui.com/components/gradient-text/markdown","install":"npx shadcn@latest add @lode/gradient-text","useCases":["One accent word or a hero headline."],"avoidWhen":["Body text: contrast varies across the gradient."],"keywords":["Text Effects","gradient","text","color","that","flows"],"notes":["Use saturated mid-tones that pass contrast on both themes."],"builtFrom":[],"dependencies":[],"related":["shimmer-text","text-reveal","word-rotate"]},{"name":"particles","kind":"component","title":"Particles","description":"A drifting constellation of dots on canvas that moves away from the pointer.","tagline":"A living constellation","category":"Backgrounds","tier":"pro","url":"https://lodeui.com/components/particles","markdown":"https://lodeui.com/components/particles/markdown","install":"npx shadcn@latest add @lode/particles","useCases":["Hero and section backgrounds for technical or AI products."],"avoidWhen":["Behind dense content or forms.","More than one per page."],"keywords":["Backgrounds","particles","living","constellation"],"notes":["Give the parent position: relative and overflow: hidden; put content above it with position: relative."],"builtFrom":[],"dependencies":[],"related":["meteors","grid-pattern","aurora-background"]},{"name":"meteors","kind":"component","title":"Meteors","description":"Shooting stars streaking across a card or hero.","tagline":"Shooting stars","category":"Backgrounds","tier":"pro","url":"https://lodeui.com/components/meteors","markdown":"https://lodeui.com/components/meteors/markdown","install":"npx shadcn@latest add @lode/meteors","useCases":["Launch announcements, pricing highlights and dark hero cards."],"avoidWhen":["Light, calm interfaces: the effect is loud."],"keywords":["Backgrounds","meteors","shooting","stars"],"notes":["Works best on dark backgrounds."],"builtFrom":[],"dependencies":["motion"],"related":["particles","border-beam","cta-section"]},{"name":"ripple-button","kind":"component","title":"Ripple button","description":"A button that ripples from wherever it's pressed.","tagline":"Press and ripple","category":"Actions","tier":"pro","url":"https://lodeui.com/components/ripple-button","markdown":"https://lodeui.com/components/ripple-button/markdown","install":"npx shadcn@latest add @lode/ripple-button","useCases":["Primary actions where tactile feedback adds delight."],"avoidWhen":["Dense toolbars: use the regular button."],"keywords":["Actions","ripple","button","press"],"notes":["Combine with type=\"submit\" in forms; it defaults to type=\"button\"."],"builtFrom":[],"dependencies":["motion"],"related":["button","action-button","magnetic"]},{"name":"animated-beam","kind":"component","title":"Animated beam","description":"A glowing pulse travelling along a curved line between two elements.","tagline":"Data in flight","category":"Motion","tier":"pro","url":"https://lodeui.com/components/animated-beam","markdown":"https://lodeui.com/components/animated-beam/markdown","install":"npx shadcn@latest add @lode/animated-beam","useCases":["Integration diagrams and \"how it works\" sections showing data flow."],"avoidWhen":["Real network maps with many nodes."],"keywords":["Motion","animated","beam","data","flight"],"notes":["Nodes need a higher z-index than the beams."],"builtFrom":[],"dependencies":["motion"],"related":["orbiting-circles","integrations-gallery","feature-bento"]},{"name":"grid-pattern","kind":"component","title":"Grid pattern","description":"A technical grid background where a few cells gently light up.","tagline":"A grid that glows","category":"Backgrounds","tier":"pro","url":"https://lodeui.com/components/grid-pattern","markdown":"https://lodeui.com/components/grid-pattern/markdown","install":"npx shadcn@latest add @lode/grid-pattern","useCases":["Section and hero backgrounds with a technical, precise feel."],"avoidWhen":["Behind busy imagery."],"keywords":["Backgrounds","grid","pattern","that","glows"],"notes":["Uses var(--grid-line) for lines when your theme defines it."],"builtFrom":[],"dependencies":["motion"],"related":["particles","hero-section","aurora-background"]},{"name":"scroll-stack","kind":"component","title":"Scroll stack","description":"Cards that stick and stack as you scroll, earlier ones shrinking into the pile.","tagline":"Cards that stack as you scroll","category":"Layout","tier":"pro","url":"https://lodeui.com/components/scroll-stack","markdown":"https://lodeui.com/components/scroll-stack/markdown","install":"npx shadcn@latest add @lode/scroll-stack","useCases":["Feature or step stories on landing pages."],"avoidWhen":["Content people need to compare: they overlap."],"keywords":["Layout","scroll","stack","cards","that"],"notes":["Add space after the stack so the last card can settle."],"builtFrom":[],"dependencies":["motion"],"related":["reveal","scroll-progress","feature-bento"]},{"name":"theme-switch","kind":"component","title":"Theme switch","description":"A day / night switch: the sun sets into a moon and the stars come out.","tagline":"Day to night","category":"Inputs","tier":"pro","url":"https://lodeui.com/components/theme-switch","markdown":"https://lodeui.com/components/theme-switch/markdown","install":"npx shadcn@latest add @lode/theme-switch","useCases":["Playful light / dark toggles on marketing sites and personal apps."],"avoidWhen":["When you also need a System option: use a menu like the site's theme toggle."],"keywords":["Inputs","theme","switch","night"],"notes":["It only reports the choice; apply the theme yourself in onCheckedChange."],"builtFrom":[],"dependencies":["motion"],"related":["switch","toggle-group"]},{"name":"video-player","kind":"component","title":"Video player","description":"Video with custom auto-hiding controls, scrubbing, captions, fullscreen and shortcuts.","tagline":"Controls that get out of the way","category":"Media","tier":"pro","url":"https://lodeui.com/components/video-player","markdown":"https://lodeui.com/components/video-player/markdown","install":"npx shadcn@latest add @lode/video-player","useCases":["Product demos, courses and marketing videos you host yourself."],"avoidWhen":["YouTube or Vimeo embeds: use their players."],"keywords":["Media","video","player","controls","that"],"notes":["Always provide captions for speech."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["audio-player","lightbox","image-compare"]},{"name":"audio-player","kind":"component","title":"Audio player","description":"Compact audio player with a clickable waveform, skip and playback speed.","tagline":"A waveform you can click","category":"Media","tier":"pro","url":"https://lodeui.com/components/audio-player","markdown":"https://lodeui.com/components/audio-player/markdown","install":"npx shadcn@latest add @lode/audio-player","useCases":["Podcasts, voice notes, previews and sound libraries."],"avoidWhen":["Background music: avoid autoplaying audio."],"keywords":["Media","audio","player","waveform","click"],"notes":["Generate real waveform data on the server for accuracy."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["video-player","voice-orb"]},{"name":"image-lens","kind":"component","title":"Image lens","description":"A magnifying glass that follows the pointer (or arrow keys) over an image.","tagline":"A magnifying glass","category":"Media","tier":"pro","url":"https://lodeui.com/components/image-lens","markdown":"https://lodeui.com/components/image-lens/markdown","install":"npx shadcn@latest add @lode/image-lens","useCases":["Product photos, maps and detailed artwork."],"avoidWhen":["Small images: there's nothing to magnify."],"keywords":["Media","image","lens","magnifying","glass"],"notes":["Use a high-resolution source so the zoom stays sharp."],"builtFrom":[],"dependencies":["motion"],"related":["lightbox","image-compare","product-detail"]},{"name":"lightbox","kind":"component","title":"Lightbox","description":"Thumbnail grid that opens a full-screen viewer with swipe, arrows and captions.","tagline":"Thumbnails that grow","category":"Media","tier":"pro","url":"https://lodeui.com/components/lightbox","markdown":"https://lodeui.com/components/lightbox/markdown","install":"npx shadcn@latest add @lode/lightbox","useCases":["Galleries, portfolios, product photos and attachments."],"avoidWhen":["One image: link to it or use the image lens."],"keywords":["Media","lightbox","thumbnails","that","grow"],"notes":["Give every image a meaningful alt."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["image-lens","carousel","morphing-dialog"]},{"name":"chat-message","kind":"component","title":"Chat message","description":"A chat turn with streaming cursor, copy, feedback and regenerate.","tagline":"Streamed replies with actions","category":"AI","tier":"pro","url":"https://lodeui.com/components/chat-message","markdown":"https://lodeui.com/components/chat-message/markdown","install":"npx shadcn@latest add @lode/chat-message","useCases":["AI assistants and chats."],"avoidWhen":["Comment threads: use a timeline or list."],"keywords":["AI","chat","message","streamed","replies","with","actions"],"notes":["Render markdown yourself inside content if your model returns it."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["prompt-input","typing-indicator","ai-chat"]},{"name":"voice-orb","kind":"component","title":"Voice orb","description":"A living orb for voice assistants: idle, listening, thinking and speaking states.","tagline":"A voice you can see","category":"AI","tier":"pro","url":"https://lodeui.com/components/voice-orb","markdown":"https://lodeui.com/components/voice-orb/markdown","install":"npx shadcn@latest add @lode/voice-orb","useCases":["Voice assistants and call screens."],"avoidWhen":["Text chat: use a typing indicator."],"keywords":["AI","voice","orb"],"notes":["Smooth the level before passing it in to avoid jitter."],"builtFrom":[],"dependencies":["motion"],"related":["chat-message","audio-player","loader"]},{"name":"coupon-input","kind":"component","title":"Coupon input","description":"Promo code field that validates, shows a removable ticket and shakes on errors.","tagline":"Promo codes with a ticket","category":"Commerce","tier":"pro","url":"https://lodeui.com/components/coupon-input","markdown":"https://lodeui.com/components/coupon-input/markdown","install":"npx shadcn@latest add @lode/coupon-input","useCases":["Checkout and billing pages with promo codes."],"avoidWhen":["Gift cards with balances: show the balance too."],"keywords":["Commerce","coupon","input","promo","codes","with","ticket"],"notes":["Codes are upper-cased before onApply."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["checkout","shopping-cart","input"]},{"name":"payment-card","kind":"component","title":"Payment card","description":"A wallet card with a holographic sheen that follows the pointer and a number reveal.","tagline":"A card with a holographic sheen","category":"Commerce","tier":"pro","url":"https://lodeui.com/components/payment-card","markdown":"https://lodeui.com/components/payment-card/markdown","install":"npx shadcn@latest add @lode/payment-card","useCases":["Wallets, virtual cards and saved payment methods."],"avoidWhen":["Collecting card details: use the credit card input."],"keywords":["Commerce","payment","card","with","holographic","sheen"],"notes":["Never pass full numbers of real cards except to their owner."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["credit-card-input","crypto-wallet","tilt-card"]},{"name":"product-tour","kind":"component","title":"Product tour","description":"A guided tour: a spotlight glides between elements with an explaining card.","tagline":"Show people around","category":"Overlays","tier":"pro","url":"https://lodeui.com/components/product-tour","markdown":"https://lodeui.com/components/product-tour/markdown","install":"npx shadcn@latest add @lode/product-tour","useCases":["First-run onboarding and new-feature walkthroughs."],"avoidWhen":["Explaining everything: keep tours to 3–5 steps."],"keywords":["Overlays","product","tour","show","people","around"],"notes":["Store completion so the tour doesn't reappear."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["onboarding-checklist","onboarding-wizard","popover"]},{"name":"metrics-dashboard","kind":"block","title":"Metrics dashboard","description":"KPI tabs, one inspectable chart with period comparison, and top pages and sources.","tagline":"KPI tabs, one chart, top lists","category":"Analytics","tier":"pro","url":"https://lodeui.com/blocks/metrics-dashboard","markdown":"https://lodeui.com/blocks/metrics-dashboard/markdown","install":"npx shadcn@latest add @lode/metrics-dashboard","useCases":["The landing screen of an analytics, SaaS or admin product.","Any overview where people pick one metric and want its trend and top contributors."],"avoidWhen":["Revenue-specific views: use revenue analytics or revenue breakdown.","Dense operational monitoring with many charts at once."],"keywords":["Analytics","metrics","dashboard","tabs","chart","lists"],"notes":["Pass real series per metric in the same { label, value, previous } shape the AreaChart uses.","Wire the export ActionButton to a server action that returns a CSV."],"builtFrom":["action-button","area-chart","number-ticker","segmented-control","switch"],"dependencies":["motion","lucide-react"],"related":["revenue-analytics","revenue-breakdown","area-chart","number-ticker","segmented-control"]},{"name":"revenue-breakdown","kind":"block","title":"Revenue breakdown","description":"Recurring revenue split into new, expansion and churn, with a draggable range brush.","tagline":"New, expansion, churn","category":"Analytics","tier":"pro","url":"https://lodeui.com/blocks/revenue-breakdown","markdown":"https://lodeui.com/blocks/revenue-breakdown/markdown","install":"npx shadcn@latest add @lode/revenue-breakdown","useCases":["Explaining what drove MRR change month by month.","Investor or board reporting views."],"avoidWhen":["A single revenue number: use a KPI card."],"keywords":["Analytics","revenue","breakdown","expansion","churn"],"notes":["Churn values are positive numbers marked negative: true; the chart draws them below zero."],"builtFrom":["number-ticker","segmented-control","stacked-area-chart"],"dependencies":["motion"],"related":["stacked-area-chart","mrr-waterfall","revenue-analytics"]},{"name":"mrr-waterfall","kind":"block","title":"MRR waterfall","description":"How MRR moved from start to end of a period, and which accounts moved it.","tagline":"Where MRR came and went","category":"Analytics","tier":"pro","url":"https://lodeui.com/blocks/mrr-waterfall","markdown":"https://lodeui.com/blocks/mrr-waterfall/markdown","install":"npx shadcn@latest add @lode/mrr-waterfall","useCases":["Showing how a period's MRR moved from start to end."],"avoidWhen":["Trends over many months: use revenue breakdown."],"keywords":["Analytics","mrr","waterfall","where","came","went"],"notes":["Order is start, new, expansion, contraction, churn, end; keep totals consistent."],"builtFrom":["number-ticker","segmented-control"],"dependencies":["motion"],"related":["revenue-breakdown","number-ticker"]},{"name":"cohort-retention","kind":"block","title":"Cohort retention","description":"Retention by signup month as a heatmap, with segments.","tagline":"Retention by signup month","category":"Analytics","tier":"pro","url":"https://lodeui.com/blocks/cohort-retention","markdown":"https://lodeui.com/blocks/cohort-retention/markdown","install":"npx shadcn@latest add @lode/cohort-retention","useCases":["Product and growth teams checking whether newer cohorts retain better."],"avoidWhen":["Fewer than three cohorts: show a line chart."],"keywords":["Analytics","cohort","retention","signup","month"],"notes":["Use null for months that haven't happened yet so cells stay empty."],"builtFrom":["heatmap","number-ticker","segmented-control"],"dependencies":[],"related":["heatmap","revenue-breakdown"]},{"name":"usage-forecast","kind":"block","title":"Usage forecast","description":"Actual and projected usage against a budget, with the day you'll cross it.","tagline":"When you'll hit the budget","category":"Billing","tier":"pro","url":"https://lodeui.com/blocks/usage-forecast","markdown":"https://lodeui.com/blocks/usage-forecast/markdown","install":"npx shadcn@latest add @lode/usage-forecast","useCases":["Usage-billed products: cloud, AI tokens, API calls."],"avoidWhen":["Flat-priced plans."],"keywords":["Billing","usage","forecast","when","budget"],"notes":["Replace the linear projection with your own model if you have one."],"builtFrom":["checkbox","number-ticker","tabs"],"dependencies":["motion","lucide-react"],"related":["billing-settings","progress","tabs"]},{"name":"billing-settings","kind":"block","title":"Billing settings","description":"Plan, payment method, usage meters, invoices and a prorated plan change.","tagline":"Plan, usage, invoices","category":"Billing","tier":"pro","url":"https://lodeui.com/blocks/billing-settings","markdown":"https://lodeui.com/blocks/billing-settings/markdown","install":"npx shadcn@latest add @lode/billing-settings","useCases":["The billing page of a SaaS settings area."],"avoidWhen":["Public pricing: use the pricing section."],"keywords":["Billing","billing","settings","plan","usage","invoices"],"notes":["Compute proration on the server; the block shows the number you pass."],"builtFrom":["action-button","button","dialog","number-ticker","progress","segmented-control"],"dependencies":["motion","lucide-react"],"related":["pricing-section","usage-forecast","dialog","progress"]},{"name":"trading-terminal","kind":"block","title":"Trading terminal","description":"Live price, candlesticks, a watchlist with sparklines and an order ticket.","tagline":"Candles, watchlist, order ticket","category":"Finance","tier":"pro","url":"https://lodeui.com/blocks/trading-terminal","markdown":"https://lodeui.com/blocks/trading-terminal/markdown","install":"npx shadcn@latest add @lode/trading-terminal","useCases":["Trading, crypto and portfolio products."],"avoidWhen":["Long-term investing dashboards where live prices aren't needed."],"keywords":["Finance","trading","terminal","candles","watchlist","order","ticket"],"notes":["Replace the interval with your WebSocket feed and keep the candle shape."],"builtFrom":["action-button","candlestick-chart","number-field","number-ticker","segmented-control","sparkline"],"dependencies":["motion","lucide-react"],"related":["candlestick-chart","sparkline","number-field"]},{"name":"agent-run","kind":"block","title":"Agent run","description":"An AI coding agent's run: steps stream in with search results, code and a diff.","tagline":"An agent fixing a bug, step by step","category":"AI","tier":"pro","url":"https://lodeui.com/blocks/agent-run","markdown":"https://lodeui.com/blocks/agent-run/markdown","install":"npx shadcn@latest add @lode/agent-run","useCases":["Showing what an agent or background job is doing step by step."],"avoidWhen":["A plain chat: use the AI chat block."],"keywords":["AI","agent","run","fixing","step"],"notes":["Feed real events into the steps array from your agent's stream."],"builtFrom":["avatar-group","button"],"dependencies":["motion","lucide-react"],"related":["ai-chat","ai-playground","avatar-group"]},{"name":"ai-chat","kind":"block","title":"AI chat","description":"A chat with streamed answers, model picker, suggestions and stop.","tagline":"Streamed answers, model picker","category":"AI","tier":"pro","url":"https://lodeui.com/blocks/ai-chat","markdown":"https://lodeui.com/blocks/ai-chat/markdown","install":"npx shadcn@latest add @lode/ai-chat","useCases":["Assistants and support bots inside a product."],"avoidWhen":["Comparing models: use the AI playground."],"keywords":["AI","ai","chat","streamed","answers","model","picker"],"notes":["Replace the fake stream with your model's token stream and keep the message shape."],"builtFrom":["avatar-group","dropdown-menu"],"dependencies":["motion","lucide-react"],"related":["prompt-input","ai-reasoning","agent-run"]},{"name":"inbox-triage","kind":"block","title":"Inbox triage","description":"Keyboard-first triage: j/k to move, e to archive, s to snooze, with undo.","tagline":"J, K, E, S. Inbox zero.","category":"Productivity","tier":"pro","url":"https://lodeui.com/blocks/inbox-triage","markdown":"https://lodeui.com/blocks/inbox-triage/markdown","install":"npx shadcn@latest add @lode/inbox-triage","useCases":["Queues people clear quickly: email, support, approvals, moderation."],"avoidWhen":["Lists people browse rather than clear."],"keywords":["Productivity","inbox","triage","zero"],"notes":["Keep single-letter shortcuts scoped to the inbox element, not the window."],"builtFrom":["avatar-group","tabs"],"dependencies":["motion","lucide-react"],"related":["tabs","avatar-group"]},{"name":"week-calendar","kind":"block","title":"Week calendar","description":"A week view with calendars, a now line, and click-to-create events.","tagline":"Click a slot, name it, done","category":"Productivity","tier":"pro","url":"https://lodeui.com/blocks/week-calendar","markdown":"https://lodeui.com/blocks/week-calendar/markdown","install":"npx shadcn@latest add @lode/week-calendar","useCases":["Scheduling, booking and team calendars."],"avoidWhen":["Month overviews."],"keywords":["Productivity","week","calendar","click","slot","name","done"],"notes":["Store times as ISO strings; the block works in local time."],"builtFrom":["button","checkbox"],"dependencies":["motion","lucide-react"],"related":["checkbox","button"]},{"name":"onboarding-checklist","kind":"block","title":"Onboarding checklist","description":"A setup checklist with progress ring and inline actions.","tagline":"Five steps to set up","category":"SaaS","tier":"free","url":"https://lodeui.com/blocks/onboarding-checklist","markdown":"https://lodeui.com/blocks/onboarding-checklist/markdown","install":"npx shadcn@latest add https://lodeui.com/r/onboarding-checklist.json","useCases":["First-run setup in a SaaS dashboard."],"avoidWhen":["Linear forms: use a stepper."],"keywords":["SaaS","onboarding","checklist","five","steps"],"notes":["Persist completed steps on your server so the list survives reloads."],"builtFrom":["action-button","progress"],"dependencies":["motion","lucide-react"],"related":["progress","action-button","stepper"]},{"name":"pricing-section","kind":"block","title":"Pricing section","description":"Three tiers with a monthly/yearly toggle whose prices roll.","tagline":"Tiers with a yearly toggle","category":"Marketing","tier":"free","url":"https://lodeui.com/blocks/pricing-section","markdown":"https://lodeui.com/blocks/pricing-section/markdown","install":"npx shadcn@latest add https://lodeui.com/r/pricing-section.json","useCases":["Marketing and pricing pages."],"avoidWhen":["Inside the app: use billing settings."],"keywords":["Marketing","pricing","section","tiers","with","yearly","toggle"],"notes":["Edit the tiers array; features are plain strings."],"builtFrom":["button","number-ticker","segmented-control"],"dependencies":["lucide-react"],"related":["billing-settings","number-ticker","segmented-control"]},{"name":"revenue-analytics","kind":"block","title":"SaaS revenue analytics","description":"Revenue trend, MRR, ARR, customers and conversion, source mix and a live transactions feed.","tagline":"Revenue, MRR, sources, transactions","category":"SaaS","tier":"pro","url":"https://lodeui.com/blocks/revenue-analytics","markdown":"https://lodeui.com/blocks/revenue-analytics/markdown","install":"npx shadcn@latest add @lode/revenue-analytics","useCases":["The revenue overview of a SaaS or commerce admin."],"avoidWhen":["Movement analysis: use revenue breakdown or MRR waterfall."],"keywords":["SaaS","revenue","analytics","sources","transactions"],"notes":["Prepend new transactions to the feed array from your webhook or event stream; they animate in."],"builtFrom":["area-chart","number-ticker","segmented-control","sparkline"],"dependencies":["motion","lucide-react"],"related":["metrics-dashboard","revenue-breakdown","area-chart","sparkline"]},{"name":"api-keys-manager","kind":"block","title":"API keys manager","description":"Create scoped live/test keys, reveal once, copy, and revoke with confirmation.","tagline":"Scoped keys, shown once","category":"Developer","tier":"pro","url":"https://lodeui.com/blocks/api-keys-manager","markdown":"https://lodeui.com/blocks/api-keys-manager/markdown","install":"npx shadcn@latest add @lode/api-keys-manager","useCases":["Developer settings in any API product."],"avoidWhen":["OAuth apps: those need client id and secret flows."],"keywords":["Developer","api","keys","manager","scoped","shown","once"],"notes":["Generate and hash keys on the server; show the secret only in the create response."],"builtFrom":["badge","button","checkbox","dialog","input","select"],"dependencies":["motion","lucide-react"],"related":["dialog","badge","env-variables"]},{"name":"deployments","kind":"block","title":"Deployments","description":"Deployment history with status, branch and commit, live build logs and redeploy.","tagline":"History and build logs","category":"Developer","tier":"pro","url":"https://lodeui.com/blocks/deployments","markdown":"https://lodeui.com/blocks/deployments/markdown","install":"npx shadcn@latest add @lode/deployments","useCases":["CI/CD and hosting dashboards."],"avoidWhen":["Runtime logs: use the log viewer."],"keywords":["Developer","deployments","history","build","logs"],"notes":["Stream real log lines into the Terminal lines array."],"builtFrom":["badge","button","terminal"],"dependencies":["motion","lucide-react"],"related":["terminal","log-viewer","badge"]},{"name":"webhook-logs","kind":"block","title":"Webhook logs","description":"Webhook deliveries with payload and response inspection, failure filter and retry.","tagline":"Inspect and retry deliveries","category":"Developer","tier":"pro","url":"https://lodeui.com/blocks/webhook-logs","markdown":"https://lodeui.com/blocks/webhook-logs/markdown","install":"npx shadcn@latest add @lode/webhook-logs","useCases":["Developer settings for products that send webhooks."],"avoidWhen":["Incoming request logs."],"keywords":["Developer","webhook","logs","inspect","retry","deliveries"],"notes":["Retry should call your server, which re-sends the stored payload."],"builtFrom":["action-button","badge","json-viewer","segmented-control"],"dependencies":["motion","lucide-react"],"related":["json-viewer","action-button","api-playground"]},{"name":"system-status","kind":"block","title":"System status","description":"Overall status, 60-day uptime per service and incident history.","tagline":"Public status page","category":"Developer","tier":"free","url":"https://lodeui.com/blocks/system-status","markdown":"https://lodeui.com/blocks/system-status/markdown","install":"npx shadcn@latest add https://lodeui.com/r/system-status.json","useCases":["Status pages and trust centers."],"avoidWhen":["Internal monitoring with live metrics."],"keywords":["Developer","system","status","public","page"],"notes":["Use the status-page template for a full page with header and subscribe."],"builtFrom":["timeline","uptime-bar"],"dependencies":["motion","lucide-react"],"related":["uptime-bar","timeline","status-page"]},{"name":"feature-flags","kind":"block","title":"Feature flags","description":"Flags per environment with switches, percentage rollouts and a change log.","tagline":"Flags and rollouts","category":"Developer","tier":"pro","url":"https://lodeui.com/blocks/feature-flags","markdown":"https://lodeui.com/blocks/feature-flags/markdown","install":"npx shadcn@latest add @lode/feature-flags","useCases":["Internal tools and developer platforms."],"avoidWhen":["End-user settings: use switches."],"keywords":["Developer","feature","flags","rollouts"],"notes":["Write changes to your flag service in the switch and slider commit handlers."],"builtFrom":["badge","segmented-control","slider","switch"],"dependencies":["motion","lucide-react"],"related":["switch","slider","segmented-control"]},{"name":"api-playground","kind":"block","title":"API playground","description":"Pick an endpoint, edit headers and body, send, and read the JSON response or cURL.","tagline":"Try the API in the browser","category":"Developer","tier":"pro","url":"https://lodeui.com/blocks/api-playground","markdown":"https://lodeui.com/blocks/api-playground/markdown","install":"npx shadcn@latest add @lode/api-playground","useCases":["API reference and developer portals."],"avoidWhen":["Production consoles that change data without confirmation."],"keywords":["Developer","api","playground","browser"],"notes":["Replace the simulated fetch with a proxy route so keys stay on the server."],"builtFrom":["badge","button","code-viewer","json-viewer","select","tabs"],"dependencies":["motion","lucide-react"],"related":["code-viewer","json-viewer","webhook-logs"]},{"name":"env-variables","kind":"block","title":"Environment variables","description":"Project env vars with masking, scopes, .env paste, dirty state and save.","tagline":"Secrets per environment","category":"Developer","tier":"pro","url":"https://lodeui.com/blocks/env-variables","markdown":"https://lodeui.com/blocks/env-variables/markdown","install":"npx shadcn@latest add @lode/env-variables","useCases":["Project settings in hosting or developer products."],"avoidWhen":["App preferences."],"keywords":["Developer","env","variables","secrets","environment"],"notes":["Encrypt values at rest; the block only masks them in the UI."],"builtFrom":["action-button","env-editor"],"dependencies":["motion","lucide-react"],"related":["env-editor","api-keys-manager"]},{"name":"crm-pipeline","kind":"block","title":"CRM pipeline","description":"Drag deals across stages; open, weighted forecast and won totals update live.","tagline":"Drag deals, see the forecast","category":"CRM","tier":"pro","url":"https://lodeui.com/blocks/crm-pipeline","markdown":"https://lodeui.com/blocks/crm-pipeline/markdown","install":"npx shadcn@latest add @lode/crm-pipeline","useCases":["Sales and deal tracking."],"avoidWhen":["Task boards: use the kanban board."],"keywords":["CRM","crm","pipeline","drag","deals","forecast"],"notes":["Probability per stage sets the weighted forecast; edit it in the stages array."],"builtFrom":["avatar-group","number-ticker"],"dependencies":["motion","lucide-react"],"related":["kanban-board","crm-contacts","number-ticker"]},{"name":"crm-contacts","kind":"block","title":"CRM contacts","description":"Contacts on the data table with filters, expandable details, bulk email, tag and delete.","tagline":"Contacts on the data table","category":"CRM","tier":"pro","url":"https://lodeui.com/blocks/crm-contacts","markdown":"https://lodeui.com/blocks/crm-contacts/markdown","install":"npx shadcn@latest add @lode/crm-contacts","useCases":["Any record list people act on in bulk."],"avoidWhen":["Read-only lists."],"keywords":["CRM","crm","contacts","data","table"],"notes":["Move bulk actions to server actions and keep the toast with undo."],"builtFrom":["avatar-group","badge","data-table","toast"],"dependencies":["motion","lucide-react"],"related":["data-table","crm-pipeline","toast"]},{"name":"store-orders","kind":"block","title":"Store orders","description":"Order KPIs, status and channel filters, bulk fulfil, packing slips and CSV export.","tagline":"Orders, fulfilment, export","category":"Commerce","tier":"pro","url":"https://lodeui.com/blocks/store-orders","markdown":"https://lodeui.com/blocks/store-orders/markdown","install":"npx shadcn@latest add @lode/store-orders","useCases":["Commerce admin order lists."],"avoidWhen":["Customer-facing order history."],"keywords":["Commerce","store","orders","fulfilment","export"],"notes":["Fulfil should call your fulfilment API, then update rows."],"builtFrom":["badge","data-table","kpi-card","sparkline","toast"],"dependencies":["motion","lucide-react"],"related":["data-table","kpi-card","product-detail"]},{"name":"product-detail","kind":"block","title":"Product detail","description":"Gallery that follows the color, variants with stock, quantity and add to cart.","tagline":"Variants, gallery, cart","category":"Commerce","tier":"pro","url":"https://lodeui.com/blocks/product-detail","markdown":"https://lodeui.com/blocks/product-detail/markdown","install":"npx shadcn@latest add @lode/product-detail","useCases":["Store product pages."],"avoidWhen":["Product grids: use the product card."],"keywords":["Commerce","product","detail","variants","gallery","cart"],"notes":["Stock per size lives in the product object; keep it in sync with your inventory."],"builtFrom":["accordion","action-button","number-field","rating"],"dependencies":["motion","lucide-react"],"related":["product-card","rating","number-field","accordion"]},{"name":"support-ticket","kind":"block","title":"Support ticket","description":"Conversation with internal notes, macros, SLA countdown and customer context.","tagline":"Reply, note, resolve","category":"Support","tier":"pro","url":"https://lodeui.com/blocks/support-ticket","markdown":"https://lodeui.com/blocks/support-ticket/markdown","install":"npx shadcn@latest add @lode/support-ticket","useCases":["Help desks and customer support tools."],"avoidWhen":["Live chat widgets for customers."],"keywords":["Support","support","ticket","reply","note","resolve"],"notes":["Keep notes and replies in one array with a type field."],"builtFrom":["avatar-group","badge","button","select"],"dependencies":["motion","lucide-react"],"related":["inbox-triage","avatar-group","select"]},{"name":"cms-posts","kind":"block","title":"CMS posts","description":"Posts by status and an editor with tags, word count, preview and publish.","tagline":"Posts and editor","category":"Productivity","tier":"pro","url":"https://lodeui.com/blocks/cms-posts","markdown":"https://lodeui.com/blocks/cms-posts/markdown","install":"npx shadcn@latest add @lode/cms-posts","useCases":["Blog and content admin."],"avoidWhen":["Rich text editing: add a real editor for the body."],"keywords":["Productivity","cms","posts","editor"],"notes":["Read time is word count ÷ 230, rounded, at least one minute."],"builtFrom":["avatar-group","badge","button","tabs","tag-input","textarea"],"dependencies":["motion","lucide-react"],"related":["tag-input","textarea","tabs"]},{"name":"sign-in","kind":"block","title":"Sign in","description":"Password or magic link, SSO and GitHub, inline validation and a check-your-email state.","tagline":"Password or magic link","category":"Auth","tier":"free","url":"https://lodeui.com/blocks/sign-in","markdown":"https://lodeui.com/blocks/sign-in/markdown","install":"npx shadcn@latest add https://lodeui.com/r/sign-in.json","useCases":["Your app's sign-in page."],"avoidWhen":["Sign-up flows that need more fields."],"keywords":["Auth","sign","in","password","magic","link"],"notes":["Replace the simulated submit with your auth client, e.g. signIn.email()."],"builtFrom":["button","input"],"dependencies":["motion","lucide-react"],"related":["two-factor","input","button"]},{"name":"two-factor","kind":"block","title":"Two-factor verification","description":"Authenticator code with resend timer, backup-code fallback and success state.","tagline":"Verify with a code","category":"Auth","tier":"free","url":"https://lodeui.com/blocks/two-factor","markdown":"https://lodeui.com/blocks/two-factor/markdown","install":"npx shadcn@latest add https://lodeui.com/r/two-factor.json","useCases":["Second step after sign-in or before sensitive actions."],"avoidWhen":["Enrolment (showing the QR code)."],"keywords":["Auth","two","factor","verify","with","code"],"notes":["Verify on the server. The demo accepts 424242, or the backup code ABCD-EFGH; anything else shows the error."],"builtFrom":["button","otp-input"],"dependencies":["motion","lucide-react"],"related":["sign-in","otp-input"]},{"name":"ai-playground","kind":"block","title":"AI playground","description":"Compare two models on one prompt with parameters, reasoning, streaming, tokens and cost.","tagline":"Compare models side by side","category":"AI","tier":"pro","url":"https://lodeui.com/blocks/ai-playground","markdown":"https://lodeui.com/blocks/ai-playground/markdown","install":"npx shadcn@latest add @lode/ai-playground","useCases":["Prompt engineering and model evaluation tools."],"avoidWhen":["End-user chat."],"keywords":["AI","ai","playground","compare","models","side"],"notes":["Call your models from a server route and stream back to each column."],"builtFrom":["ai-reasoning","badge","button","slider","switch","textarea"],"dependencies":["motion","lucide-react"],"related":["ai-chat","ai-reasoning","slider"]},{"name":"kanban-board","kind":"block","title":"Kanban board","description":"Sprint board with drag between columns, WIP limits, quick add and points.","tagline":"Sprint board","category":"Productivity","tier":"pro","url":"https://lodeui.com/blocks/kanban-board","markdown":"https://lodeui.com/blocks/kanban-board/markdown","install":"npx shadcn@latest add @lode/kanban-board","useCases":["Task and sprint tracking."],"avoidWhen":["Sales deals: use the CRM pipeline."],"keywords":["Productivity","kanban","board","sprint"],"notes":["Persist moves in the column select's onChange and in onDrop."],"builtFrom":["avatar-group","badge"],"dependencies":["motion","lucide-react"],"related":["crm-pipeline","sortable-list"]},{"name":"team-members","kind":"block","title":"Team members","description":"Seat usage, invite by email with role, change roles, resend or remove.","tagline":"Seats, roles, invites","category":"SaaS","tier":"pro","url":"https://lodeui.com/blocks/team-members","markdown":"https://lodeui.com/blocks/team-members/markdown","install":"npx shadcn@latest add @lode/team-members","useCases":["Workspace or organization settings."],"avoidWhen":["Public team pages: use profile cards."],"keywords":["SaaS","team","members","seats","roles","invites"],"notes":["Check seat limits on the server before sending invites."],"builtFrom":["avatar-group","badge","button","dialog","dropdown-menu","progress","select","tag-input","toast"],"dependencies":["motion","lucide-react"],"related":["tag-input","dialog","progress"]},{"name":"saas-landing","kind":"template","title":"SaaS landing page","description":"Hero with signup, logos, feature grid, stats, testimonials, pricing, FAQ, CTA and footer.","tagline":"A complete SaaS landing page","category":"Marketing","tier":"pro","url":"https://lodeui.com/templates/saas-landing","markdown":"https://lodeui.com/templates/saas-landing/markdown","install":"npx shadcn@latest add @lode/saas-landing","useCases":["Launching a product site quickly with all the usual sections."],"avoidWhen":["A single section: use the pricing section block instead."],"keywords":["Marketing","saas","landing","complete","page"],"notes":["Edit copy in the arrays at the top of the file."],"builtFrom":["accordion","button","input","number-ticker","reveal","segmented-control","spotlight-card","text-reveal"],"dependencies":["motion","lucide-react"],"related":["pricing-section","text-reveal","spotlight-card"]},{"name":"status-page","kind":"template","title":"Status page","description":"A public status page with subscribe, uptime per service and incident history.","tagline":"A complete public status page","category":"Developer","tier":"free","url":"https://lodeui.com/templates/status-page","markdown":"https://lodeui.com/templates/status-page/markdown","install":"npx shadcn@latest add https://lodeui.com/r/status-page.json","useCases":["Hosting a status page on your own domain."],"avoidWhen":["Internal dashboards."],"keywords":["Developer","status","page","complete","public"],"notes":["Feed system-status with your monitoring data."],"builtFrom":["button","input","popover","system-status"],"dependencies":["motion","lucide-react"],"related":["system-status","uptime-bar","popover"]},{"name":"admin-dashboard","kind":"template","title":"Admin dashboard","description":"App shell with sidebar (drawer on mobile), top bar, breadcrumbs and pages for overview, customers, team, billing and API keys.","tagline":"A complete admin app shell","category":"Admin","tier":"pro","url":"https://lodeui.com/templates/admin-dashboard","markdown":"https://lodeui.com/templates/admin-dashboard/markdown","install":"npx shadcn@latest add @lode/admin-dashboard","useCases":["Starting an internal tool or SaaS admin with real screens on day one."],"avoidWhen":["Marketing pages."],"keywords":["Admin","admin","dashboard","complete","shell"],"notes":["Swap each page for your routes and keep the shell."],"builtFrom":["avatar-group","breadcrumb","revenue-analytics","crm-contacts","team-members","billing-settings","api-keys-manager"],"dependencies":["motion","lucide-react"],"related":["revenue-analytics","crm-contacts","team-members","billing-settings","api-keys-manager"]},{"name":"hero-section","kind":"block","title":"Hero section","description":"Launch hero with badge, flowing gradient headline, two actions and a live product preview on a glowing grid.","tagline":"Headline, actions, live preview","category":"Marketing","tier":"pro","url":"https://lodeui.com/blocks/hero-section","markdown":"https://lodeui.com/blocks/hero-section/markdown","install":"npx shadcn@latest add @lode/hero-section","useCases":["The first screen of a product or launch page."],"avoidWhen":["Inside an app: heroes belong on marketing pages."],"keywords":["Marketing","hero","section","headline","actions","live","preview"],"notes":["Keep highlight to 2–3 words.","Pass visual to show a screenshot of your real product."],"builtFrom":["gradient-text","grid-pattern","number-ticker","sparkline"],"dependencies":["motion","lucide-react"],"related":["feature-bento","logo-cloud","grid-pattern","gradient-text"]},{"name":"feature-bento","kind":"block","title":"Feature bento","description":"A bento grid of features, each with a small live visual and a pointer spotlight.","tagline":"Features with live visuals","category":"Marketing","tier":"pro","url":"https://lodeui.com/blocks/feature-bento","markdown":"https://lodeui.com/blocks/feature-bento/markdown","install":"npx shadcn@latest add @lode/feature-bento","useCases":["Showing 4–6 features with personality."],"avoidWhen":["Long feature lists: use a comparison table."],"keywords":["Marketing","feature","bento","features","with","live","visuals"],"notes":["Use span=\"wide\" or \"tall\" on one or two cards to create rhythm."],"builtFrom":["number-ticker","spotlight-card"],"dependencies":["motion","lucide-react"],"related":["hero-section","spotlight-card","stats-section"]},{"name":"testimonials-wall","kind":"block","title":"Testimonials wall","description":"Testimonials in slowly scrolling columns that pause on hover, rows on phones.","tagline":"Social proof that moves","category":"Marketing","tier":"pro","url":"https://lodeui.com/blocks/testimonials-wall","markdown":"https://lodeui.com/blocks/testimonials-wall/markdown","install":"npx shadcn@latest add @lode/testimonials-wall","useCases":["Social proof on landing and pricing pages."],"avoidWhen":["Fewer than four quotes: use a static grid."],"keywords":["Marketing","testimonials","wall","social","proof","that","moves"],"notes":["Use real names and roles with permission."],"builtFrom":["marquee"],"dependencies":["lucide-react"],"related":["marquee","logo-cloud","rating"]},{"name":"stats-section","kind":"block","title":"Stats section","description":"Headline numbers that count up when they scroll into view.","tagline":"Numbers that count up","category":"Marketing","tier":"pro","url":"https://lodeui.com/blocks/stats-section","markdown":"https://lodeui.com/blocks/stats-section/markdown","install":"npx shadcn@latest add @lode/stats-section","useCases":["Credibility numbers on landing pages."],"avoidWhen":["Live metrics: use KPI cards in a dashboard."],"keywords":["Marketing","stats","section","numbers","that","count"],"notes":["Only use numbers you can back up."],"builtFrom":["number-ticker"],"dependencies":["motion"],"related":["number-ticker","kpi-card","hero-section"]},{"name":"logo-cloud","kind":"block","title":"Logo cloud","description":"Trusted-by logos as an endless strip or a static grid.","tagline":"Trusted by","category":"Marketing","tier":"pro","url":"https://lodeui.com/blocks/logo-cloud","markdown":"https://lodeui.com/blocks/logo-cloud/markdown","install":"npx shadcn@latest add @lode/logo-cloud","useCases":["Under the hero, to show who uses you."],"avoidWhen":["Without permission to use the logos."],"keywords":["Marketing","logo","cloud","trusted"],"notes":["Use monochrome logos so they sit well together."],"builtFrom":["marquee"],"dependencies":[],"related":["marquee","testimonials-wall","hero-section"]},{"name":"cta-section","kind":"block","title":"CTA section","description":"A dark closing call to action with meteors and an email capture.","tagline":"The final ask","category":"Marketing","tier":"pro","url":"https://lodeui.com/blocks/cta-section","markdown":"https://lodeui.com/blocks/cta-section/markdown","install":"npx shadcn@latest add @lode/cta-section","useCases":["The end of landing and pricing pages."],"avoidWhen":["More than once per page."],"keywords":["Marketing","cta","section","final"],"notes":["Validate the email again on the server."],"builtFrom":["meteors"],"dependencies":["motion","lucide-react"],"related":["meteors","hero-section","footer-section"]},{"name":"faq-section","kind":"block","title":"FAQ section","description":"Searchable FAQ with category filters, an accordion and a contact fallback.","tagline":"Answers people search for","category":"Marketing","tier":"pro","url":"https://lodeui.com/blocks/faq-section","markdown":"https://lodeui.com/blocks/faq-section/markdown","install":"npx shadcn@latest add @lode/faq-section","useCases":["Pricing pages and help sections with 6+ common questions."],"avoidWhen":["Long documentation: use the help center."],"keywords":["Marketing","faq","section","answers","people","search"],"notes":["Keep answers to 1–3 sentences."],"builtFrom":["accordion"],"dependencies":["motion","lucide-react"],"related":["accordion","help-center","pricing-comparison"]},{"name":"changelog","kind":"block","title":"Changelog","description":"Release notes timeline with type filters, cover art and subscribe.","tagline":"What shipped","category":"Marketing","tier":"pro","url":"https://lodeui.com/blocks/changelog","markdown":"https://lodeui.com/blocks/changelog/markdown","install":"npx shadcn@latest add @lode/changelog","useCases":["Public changelogs and product update pages."],"avoidWhen":["Internal deploy history: use the deployments block."],"keywords":["Marketing","changelog","what","shipped"],"notes":["Generate entries from your release notes or git tags."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["timeline","footer-section","announcement-bar"]},{"name":"footer-section","kind":"block","title":"Footer section","description":"Site footer with link columns, newsletter, live status and socials.","tagline":"A complete footer","category":"Marketing","tier":"pro","url":"https://lodeui.com/blocks/footer-section","markdown":"https://lodeui.com/blocks/footer-section/markdown","install":"npx shadcn@latest add @lode/footer-section","useCases":["The bottom of every marketing page."],"avoidWhen":["Inside apps: keep app footers minimal."],"keywords":["Marketing","footer","section","complete"],"notes":["Point the status pill at your real status page."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["cta-section","status-page","logo-cloud"]},{"name":"pricing-comparison","kind":"block","title":"Pricing comparison","description":"Plan comparison table with sticky headers, yearly toggle and a mobile plan picker.","tagline":"Every plan, side by side","category":"Billing","tier":"pro","url":"https://lodeui.com/blocks/pricing-comparison","markdown":"https://lodeui.com/blocks/pricing-comparison/markdown","install":"npx shadcn@latest add @lode/pricing-comparison","useCases":["Pricing pages where plans differ in many ways."],"avoidWhen":["Two simple plans: use the pricing section."],"keywords":["Billing","pricing","comparison","every","plan","side"],"notes":["Keep PLANS and GROUPS values in the same order."],"builtFrom":["number-ticker","segmented-control","tooltip"],"dependencies":["motion","lucide-react"],"related":["pricing-section","billing-settings","faq-section"]},{"name":"invoice","kind":"block","title":"Invoice","description":"An invoice with status timeline, line items, totals, copyable bank details and pay.","tagline":"Read, pay, send","category":"Billing","tier":"pro","url":"https://lodeui.com/blocks/invoice","markdown":"https://lodeui.com/blocks/invoice/markdown","install":"npx shadcn@latest add @lode/invoice","useCases":["Customer portals and billing pages."],"avoidWhen":["Lists of invoices: use a data table."],"keywords":["Billing","invoice","read","send"],"notes":["Generate PDFs on the server; wire the PDF button to that route."],"builtFrom":["action-button","badge"],"dependencies":["motion","lucide-react"],"related":["billing-settings","checkout","data-table"]},{"name":"checkout","kind":"block","title":"Checkout","description":"Three-step checkout with shipping choice, card entry, promo codes and order summary.","tagline":"Three calm steps","category":"Commerce","tier":"pro","url":"https://lodeui.com/blocks/checkout","markdown":"https://lodeui.com/blocks/checkout/markdown","install":"npx shadcn@latest add @lode/checkout","useCases":["Stores and SaaS purchases where you control the checkout UI."],"avoidWhen":["If your provider offers hosted checkout, prefer it for card handling."],"keywords":["Commerce","checkout","three","calm","steps"],"notes":["Send card data only to your payment provider; demo code: WELCOME15, test card 4242 4242 4242 4242."],"builtFrom":["coupon-input","credit-card-input","stepper"],"dependencies":["motion","lucide-react"],"related":["credit-card-input","coupon-input","shopping-cart","stepper"]},{"name":"shopping-cart","kind":"block","title":"Shopping cart","description":"Cart with quantity steppers, remove with undo and free-shipping progress.","tagline":"Bag with free-shipping goal","category":"Commerce","tier":"pro","url":"https://lodeui.com/blocks/shopping-cart","markdown":"https://lodeui.com/blocks/shopping-cart/markdown","install":"npx shadcn@latest add @lode/shopping-cart","useCases":["Cart pages and drawers in stores."],"avoidWhen":["Single-product purchases: go straight to checkout."],"keywords":["Commerce","shopping","cart","with","free","shipping","goal"],"notes":["Undo keeps the item for 5 seconds; persist removals after that."],"builtFrom":["number-ticker"],"dependencies":["motion","lucide-react"],"related":["checkout","product-detail","product-card"]},{"name":"order-tracking","kind":"block","title":"Order tracking","description":"Shipment tracking with a route map, moving van, stepper and event timeline.","tagline":"Where's my order?","category":"Commerce","tier":"pro","url":"https://lodeui.com/blocks/order-tracking","markdown":"https://lodeui.com/blocks/order-tracking/markdown","install":"npx shadcn@latest add @lode/order-tracking","useCases":["Order status pages and post-purchase emails' landing pages."],"avoidWhen":["Real-time fleet tracking: use a map library."],"keywords":["Commerce","order","tracking","where"],"notes":["Remove the stage preview buttons in production; drive current from your carrier's status."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["timeline","stepper","shopping-cart"]},{"name":"sign-up","kind":"block","title":"Sign up","description":"Three-step sign-up: account, password with live rules and email code verification.","tagline":"Account, password, verify","category":"Auth","tier":"pro","url":"https://lodeui.com/blocks/sign-up","markdown":"https://lodeui.com/blocks/sign-up/markdown","install":"npx shadcn@latest add @lode/sign-up","useCases":["Your product's sign-up page."],"avoidWhen":["Sign-in: use the sign-in block."],"keywords":["Auth","sign","up","account","password","verify"],"notes":["Wire steps to your auth: create the user at step 2 and verify the code at step 3. Demo code: 123456."],"builtFrom":["otp-input","password-strength"],"dependencies":["motion","lucide-react"],"related":["sign-in","two-factor","password-strength","forgot-password"]},{"name":"forgot-password","kind":"block","title":"Forgot password","description":"Password reset: request link, resend timer, new password and done state.","tagline":"Reset in four steps","category":"Auth","tier":"pro","url":"https://lodeui.com/blocks/forgot-password","markdown":"https://lodeui.com/blocks/forgot-password/markdown","install":"npx shadcn@latest add @lode/forgot-password","useCases":["The reset-password page of any app with email and password."],"avoidWhen":["Passwordless apps."],"keywords":["Auth","forgot","password","reset","four","steps"],"notes":["The \"Open the link\" button stands in for the emailed link; route your real link to the reset stage with its token."],"builtFrom":["password-strength"],"dependencies":["motion","lucide-react"],"related":["sign-in","sign-up","password-strength"]},{"name":"onboarding-wizard","kind":"block","title":"Onboarding wizard","description":"Welcome flow for role, goals, team size and invites, ending with confetti.","tagline":"Welcome, tailored","category":"SaaS","tier":"pro","url":"https://lodeui.com/blocks/onboarding-wizard","markdown":"https://lodeui.com/blocks/onboarding-wizard/markdown","install":"npx shadcn@latest add @lode/onboarding-wizard","useCases":["Right after sign-up, to personalize the product."],"avoidWhen":["More than five questions: people drop off."],"keywords":["SaaS","onboarding","wizard","welcome","tailored"],"notes":["Save answers to the user profile to tailor templates and docs."],"builtFrom":["confetti","tag-input"],"dependencies":["motion","lucide-react"],"related":["onboarding-checklist","product-tour","confetti","tag-input"]},{"name":"settings-account","kind":"block","title":"Account settings","description":"Profile with inline edits, security toggles, active sessions and guarded delete.","tagline":"Profile, security, sessions","category":"SaaS","tier":"pro","url":"https://lodeui.com/blocks/settings-account","markdown":"https://lodeui.com/blocks/settings-account/markdown","install":"npx shadcn@latest add @lode/settings-account","useCases":["The account page of a SaaS app."],"avoidWhen":["Team or billing settings: use their own blocks."],"keywords":["SaaS","settings","account","profile","security","sessions"],"notes":["Throw from onSave with your API's message, e.g. \"That username is taken\"."],"builtFrom":["dialog","inline-edit","switch"],"dependencies":["motion","lucide-react"],"related":["inline-edit","notification-preferences","team-members","billing-settings"]},{"name":"notification-preferences","kind":"block","title":"Notification preferences","description":"Channel-by-event matrix with column toggles, quiet hours and unsaved-changes bar.","tagline":"Where and when to notify","category":"SaaS","tier":"pro","url":"https://lodeui.com/blocks/notification-preferences","markdown":"https://lodeui.com/blocks/notification-preferences/markdown","install":"npx shadcn@latest add @lode/notification-preferences","useCases":["Notification settings in any product that emails, pushes or posts to chat."],"avoidWhen":["One or two toggles: use switches."],"keywords":["SaaS","notification","preferences","where","when","notify"],"notes":["Security emails are locked on by design; keep at least one required channel for them."],"builtFrom":["checkbox","select","switch"],"dependencies":["motion","lucide-react"],"related":["checkbox","switch","settings-account"]},{"name":"integrations-gallery","kind":"block","title":"Integrations gallery","description":"Searchable integrations with categories and connect / disconnect in place.","tagline":"Connect your stack","category":"Developer","tier":"pro","url":"https://lodeui.com/blocks/integrations-gallery","markdown":"https://lodeui.com/blocks/integrations-gallery/markdown","install":"npx shadcn@latest add @lode/integrations-gallery","useCases":["App marketplaces and integration settings."],"avoidWhen":["One or two integrations: put them in settings."],"keywords":["Developer","integrations","gallery","connect","your","stack"],"notes":["The sample brands are fictional; use your partners' real names and logos with permission."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["animated-beam","api-keys-manager","webhook-logs"]},{"name":"ai-image-generator","kind":"block","title":"AI image generator","description":"Prompt to images with style and ratio, shimmer placeholders, likes and a lightbox.","tagline":"Prompt to pictures","category":"AI","tier":"pro","url":"https://lodeui.com/blocks/ai-image-generator","markdown":"https://lodeui.com/blocks/ai-image-generator/markdown","install":"npx shadcn@latest add @lode/ai-image-generator","useCases":["Image generation tools and creative assistants."],"avoidWhen":["Stock photo search: use a search grid."],"keywords":["AI","ai","image","generator","prompt","pictures"],"notes":["Replace the timeout with your image API and pass returned URLs as src."],"builtFrom":["lightbox","segmented-control"],"dependencies":["motion","lucide-react"],"related":["lightbox","prompt-input","ai-playground"]},{"name":"ai-search","kind":"block","title":"AI search","description":"Answer engine with streamed reasoning, inline citations, sources and follow-ups.","tagline":"Answers with sources","category":"AI","tier":"pro","url":"https://lodeui.com/blocks/ai-search","markdown":"https://lodeui.com/blocks/ai-search/markdown","install":"npx shadcn@latest add @lode/ai-search","useCases":["Docs search, research assistants and knowledge bases."],"avoidWhen":["Open-ended chat: use the AI chat block."],"keywords":["AI","ai","search","answers","with","sources"],"notes":["Return citations as indices into your sources array, as in ANSWER."],"builtFrom":["ai-reasoning","citation-list"],"dependencies":["motion","lucide-react"],"related":["ai-reasoning","citation-list","ai-chat"]},{"name":"meeting-scheduler","kind":"block","title":"Meeting scheduler","description":"Book a call: host card, calendar, time slots and confirmation.","tagline":"Book a call","category":"Productivity","tier":"pro","url":"https://lodeui.com/blocks/meeting-scheduler","markdown":"https://lodeui.com/blocks/meeting-scheduler/markdown","install":"npx shadcn@latest add @lode/meeting-scheduler","useCases":["Demo booking, consultations and interviews."],"avoidWhen":["Internal calendars: use the week calendar."],"keywords":["Productivity","meeting","scheduler","book","call"],"notes":["Fetch free/busy for the visible month and mark unavailable slots."],"builtFrom":["calendar","time-slot-picker"],"dependencies":["motion","lucide-react"],"related":["calendar","time-slot-picker","week-calendar"]},{"name":"file-manager","kind":"block","title":"File manager","description":"File browser with folders, grid / list views, search, stars and right-click actions.","tagline":"Files, folders, actions","category":"Productivity","tier":"pro","url":"https://lodeui.com/blocks/file-manager","markdown":"https://lodeui.com/blocks/file-manager/markdown","install":"npx shadcn@latest add @lode/file-manager","useCases":["Document storage, asset libraries and attachments."],"avoidWhen":["Code repositories: use the tree view."],"keywords":["Productivity","file","manager","files","folders","actions"],"notes":["Load folder contents lazily when opened."],"builtFrom":["context-menu","progress"],"dependencies":["motion","lucide-react"],"related":["context-menu","tree-view","file-dropzone"]},{"name":"team-chat","kind":"block","title":"Team chat","description":"Team chat with channels, reactions, mentions, typing indicator and mobile drawer.","tagline":"Channels and reactions","category":"Productivity","tier":"pro","url":"https://lodeui.com/blocks/team-chat","markdown":"https://lodeui.com/blocks/team-chat/markdown","install":"npx shadcn@latest add @lode/team-chat","useCases":["Collaboration tools and in-app messaging."],"avoidWhen":["Customer support threads: use the support ticket block."],"keywords":["Productivity","team","chat","channels","reactions"],"notes":["Replace the simulated reply with your realtime channel (WebSocket or SSE)."],"builtFrom":["mention-input","typing-indicator"],"dependencies":["motion","lucide-react"],"related":["mention-input","typing-indicator","chat-message","inbox-triage"]},{"name":"crypto-wallet","kind":"block","title":"Crypto wallet","description":"Wallet balance, portfolio chart, holdings with sparklines and a slide-to-send flow.","tagline":"Balance, chart, send","category":"Finance","tier":"pro","url":"https://lodeui.com/blocks/crypto-wallet","markdown":"https://lodeui.com/blocks/crypto-wallet/markdown","install":"npx shadcn@latest add @lode/crypto-wallet","useCases":["Crypto and fintech apps."],"avoidWhen":["Trading with order books: use the trading terminal."],"keywords":["Finance","crypto","wallet","balance","chart","send"],"notes":["Fetch prices server-side and stream updates; never trust client prices for transfers."],"builtFrom":["area-chart","dialog","number-ticker","segmented-control","slide-to-confirm","sparkline"],"dependencies":["motion","lucide-react"],"related":["slide-to-confirm","area-chart","payment-card","trading-terminal"]},{"name":"expense-tracker","kind":"block","title":"Expense tracker","description":"Spending by category, budget bars that warn, quick add and recent expenses.","tagline":"Where the money went","category":"Finance","tier":"pro","url":"https://lodeui.com/blocks/expense-tracker","markdown":"https://lodeui.com/blocks/expense-tracker/markdown","install":"npx shadcn@latest add @lode/expense-tracker","useCases":["Personal finance, team spend and budgeting tools."],"avoidWhen":["Accounting ledgers: use a data table."],"keywords":["Finance","expense","tracker","where","money","went"],"notes":["Generate the tip from real month-to-date data."],"builtFrom":["donut-chart","number-ticker"],"dependencies":["motion","lucide-react"],"related":["donut-chart","treemap","progress"]},{"name":"help-center","kind":"block","title":"Help center","description":"Help center with instant search, topics, article reader and feedback.","tagline":"Self-serve answers","category":"Support","tier":"pro","url":"https://lodeui.com/blocks/help-center","markdown":"https://lodeui.com/blocks/help-center/markdown","install":"npx shadcn@latest add @lode/help-center","useCases":["Self-serve support and knowledge bases."],"avoidWhen":["Developer API docs: use a docs layout with a table of contents."],"keywords":["Support","help","center","self","serve","answers"],"notes":["Track \"Was this helpful?\" votes per article."],"builtFrom":[],"dependencies":["motion","lucide-react"],"related":["faq-section","ai-search","table-of-contents"]},{"name":"realtime-analytics","kind":"block","title":"Realtime analytics","description":"Live visitors counter, per-second bars, event feed, top pages and devices.","tagline":"Who's here right now","category":"Analytics","tier":"pro","url":"https://lodeui.com/blocks/realtime-analytics","markdown":"https://lodeui.com/blocks/realtime-analytics/markdown","install":"npx shadcn@latest add @lode/realtime-analytics","useCases":["Launch days, live events and ops dashboards."],"avoidWhen":["Historical reporting: use the metrics dashboard."],"keywords":["Analytics","realtime","analytics","here","right"],"notes":["Feed it from a WebSocket and batch updates to about once a second."],"builtFrom":["animated-list","number-ticker"],"dependencies":["motion","lucide-react"],"related":["animated-list","metrics-dashboard","number-ticker"]},{"name":"lead-detail","kind":"block","title":"Lead detail","description":"CRM lead with deal stage, AI lead score, activity timeline, notes and next steps.","tagline":"Everything about a deal","category":"CRM","tier":"pro","url":"https://lodeui.com/blocks/lead-detail","markdown":"https://lodeui.com/blocks/lead-detail/markdown","install":"npx shadcn@latest add @lode/lead-detail","useCases":["CRM record pages."],"avoidWhen":["Lists of leads: use CRM contacts."],"keywords":["CRM","lead","detail","everything","about","deal"],"notes":["Explain the score with factors, as in the list under the gauge."],"builtFrom":["badge","gauge","select","tabs"],"dependencies":["motion","lucide-react"],"related":["crm-contacts","crm-pipeline","gauge","timeline"]},{"name":"ai-landing","kind":"template","title":"AI startup landing","description":"A landing page for an AI assistant: streaming chat hero, animated data-flow diagram, features, pricing and FAQ.","tagline":"Launch an AI assistant","category":"AI","tier":"pro","url":"https://lodeui.com/templates/ai-landing","markdown":"https://lodeui.com/templates/ai-landing/markdown","install":"npx shadcn@latest add @lode/ai-landing","useCases":["Launching an AI assistant, copilot or knowledge product."],"avoidWhen":["Products where AI isn't the main story."],"keywords":["AI","ai","landing","launch","assistant"],"notes":["Installs with landing-kit.tsx (the shared header and section heading); edit the header links there or via props.","Rename \"Atlas\" and replace the sample Q&A in AssistantPreview."],"builtFrom":["animated-beam","chat-message","cta-section","faq-section","feature-bento","footer-section","hero-section","logo-cloud","pricing-section","testimonials-wall","voice-orb"],"dependencies":["lucide-react"],"related":["hero-section","voice-orb","animated-beam","chat-message"]},{"name":"fintech-landing","kind":"template","title":"Fintech landing","description":"A neobank landing page: stacked holographic cards, rates, budget rings, trust stats and FAQ.","tagline":"A neobank homepage","category":"Fintech","tier":"pro","url":"https://lodeui.com/templates/fintech-landing","markdown":"https://lodeui.com/templates/fintech-landing/markdown","install":"npx shadcn@latest add @lode/fintech-landing","useCases":["Banking, cards, savings and payments products."],"avoidWhen":["B2B finance tools: use the CRM or analytics pages as a base."],"keywords":["Fintech","fintech","landing","neobank","homepage"],"notes":["Installs with landing-kit.tsx (the shared header and section heading); edit the header links there or via props.","Have compliance review rates, insurance and legal lines before publishing."],"builtFrom":["activity-rings","cta-section","faq-section","footer-section","hero-section","number-ticker","payment-card","stats-section","testimonials-wall"],"dependencies":["motion","lucide-react"],"related":["payment-card","activity-rings","stats-section","crypto-wallet"]},{"name":"devtool-landing","kind":"template","title":"Developer tool landing","description":"An API platform landing page: terminal hero, code sample, features grid, plan comparison and changelog.","tagline":"An API platform homepage","category":"Developer","tier":"pro","url":"https://lodeui.com/templates/devtool-landing","markdown":"https://lodeui.com/templates/devtool-landing/markdown","install":"npx shadcn@latest add @lode/devtool-landing","useCases":["SDKs, APIs, infrastructure and developer tools."],"avoidWhen":["Consumer apps."],"keywords":["Developer","devtool","landing","platform","homepage"],"notes":["Installs with landing-kit.tsx (the shared header and section heading); edit the header links there or via props.","Replace CODE with your real quickstart snippet."],"builtFrom":["changelog","code-viewer","cta-section","footer-section","grid-pattern","hero-section","logo-cloud","pricing-comparison","terminal"],"dependencies":["motion","lucide-react"],"related":["terminal","code-viewer","pricing-comparison","changelog"]},{"name":"ecommerce-landing","kind":"template","title":"E-commerce landing","description":"A storefront landing page: perks ticker, editorial hero, product grid with cart, story and reviews.","tagline":"A brand storefront","category":"Ecommerce","tier":"pro","url":"https://lodeui.com/templates/ecommerce-landing","markdown":"https://lodeui.com/templates/ecommerce-landing/markdown","install":"npx shadcn@latest add @lode/ecommerce-landing","useCases":["Direct-to-consumer brands and small stores."],"avoidWhen":["Large catalogs: add search and filters."],"keywords":["Ecommerce","ecommerce","landing","brand","storefront"],"notes":["Installs with landing-kit.tsx (the shared header and section heading); edit the header links there or via props.","Pass real product images via the ProductCard image prop."],"builtFrom":["cta-section","footer-section","marquee","product-card","testimonials-wall"],"dependencies":["motion","lucide-react"],"related":["product-card","shopping-cart","product-detail","marquee"]},{"name":"agency-landing","kind":"template","title":"Agency landing","description":"A studio landing page: word-by-word headline, capabilities ticker, morphing case studies and services.","tagline":"A studio portfolio","category":"Marketing","tier":"pro","url":"https://lodeui.com/templates/agency-landing","markdown":"https://lodeui.com/templates/agency-landing/markdown","install":"npx shadcn@latest add @lode/agency-landing","useCases":["Design and development studios, freelancers and portfolios."],"avoidWhen":["Product companies."],"keywords":["Marketing","agency","landing","studio","portfolio"],"notes":["Installs with landing-kit.tsx (the shared header and section heading); edit the header links there or via props.","Swap gradient covers for project images with the MorphingDialog image prop."],"builtFrom":["cta-section","footer-section","marquee","morphing-dialog","stats-section","testimonials-wall","text-reveal"],"dependencies":["motion","lucide-react"],"related":["text-reveal","morphing-dialog","marquee","testimonials-wall"]},{"name":"app-landing","kind":"template","title":"Mobile app landing","description":"A mobile app landing page: phone mockup, store buttons, scroll-stacked features and reviews.","tagline":"A mobile app homepage","category":"Marketing","tier":"pro","url":"https://lodeui.com/templates/app-landing","markdown":"https://lodeui.com/templates/app-landing/markdown","install":"npx shadcn@latest add @lode/app-landing","useCases":["iOS and Android apps."],"avoidWhen":["Web-only SaaS: use the analytics or AI pages."],"keywords":["Marketing","app","landing","mobile","homepage"],"notes":["Installs with landing-kit.tsx (the shared header and section heading); edit the header links there or via props.","Use the official store badges from Apple and Google in production."],"builtFrom":["activity-rings","cta-section","faq-section","footer-section","scroll-stack","testimonials-wall"],"dependencies":["motion","lucide-react"],"related":["scroll-stack","activity-rings","faq-section"]},{"name":"crm-landing","kind":"template","title":"CRM landing","description":"A CRM landing page: live pipeline hero, feature bento, results stats and plan comparison.","tagline":"A sales tool homepage","category":"CRM","tier":"pro","url":"https://lodeui.com/templates/crm-landing","markdown":"https://lodeui.com/templates/crm-landing/markdown","install":"npx shadcn@latest add @lode/crm-landing","useCases":["Sales, CRM and revenue tools."],"avoidWhen":["Consumer products."],"keywords":["CRM","crm","landing","sales","tool","homepage"],"notes":["Installs with landing-kit.tsx (the shared header and section heading); edit the header links there or via props.","Replace STAGES with a screenshot-like preview of your own product."],"builtFrom":["cta-section","feature-bento","footer-section","hero-section","logo-cloud","number-ticker","pricing-comparison","stats-section"],"dependencies":["motion","lucide-react"],"related":["crm-pipeline","feature-bento","pricing-comparison"]},{"name":"analytics-landing","kind":"template","title":"Analytics landing","description":"An analytics SaaS landing page with an embedded live realtime dashboard demo.","tagline":"An analytics homepage","category":"SaaS","tier":"pro","url":"https://lodeui.com/templates/analytics-landing","markdown":"https://lodeui.com/templates/analytics-landing/markdown","install":"npx shadcn@latest add @lode/analytics-landing","useCases":["Analytics, monitoring and dashboard products."],"avoidWhen":["Products without a visual dashboard to show."],"keywords":["SaaS","analytics","landing","homepage"],"notes":["Installs with landing-kit.tsx (the shared header and section heading); edit the header links there or via props.","Point the live demo at a public demo account when you have one."],"builtFrom":["cta-section","faq-section","feature-bento","footer-section","hero-section","logo-cloud","pricing-section","realtime-analytics","testimonials-wall"],"dependencies":["lucide-react"],"related":["realtime-analytics","hero-section","pricing-section"]},{"name":"waitlist-landing","kind":"template","title":"Waitlist landing","description":"A one-screen waitlist page: particles, countdown, email capture, referral link and signup count.","tagline":"Collect signups before launch","category":"SaaS","tier":"pro","url":"https://lodeui.com/templates/waitlist-landing","markdown":"https://lodeui.com/templates/waitlist-landing/markdown","install":"npx shadcn@latest add @lode/waitlist-landing","useCases":["Pre-launch pages and private betas."],"avoidWhen":["After launch: use a full landing page."],"keywords":["SaaS","waitlist","landing","collect","signups","before","launch"],"notes":["Store signups server-side and generate a unique referral code per person."],"builtFrom":["avatar-group","flip-clock","gradient-text","number-ticker","particles"],"dependencies":["motion","lucide-react"],"related":["flip-clock","particles","cta-section"]},{"name":"conference-landing","kind":"template","title":"Conference landing","description":"An event landing page: countdown, speakers, day-by-day schedule, tickets and FAQ.","tagline":"An event homepage","category":"Marketing","tier":"pro","url":"https://lodeui.com/templates/conference-landing","markdown":"https://lodeui.com/templates/conference-landing/markdown","install":"npx shadcn@latest add @lode/conference-landing","useCases":["Conferences, meetups, workshops and launches."],"avoidWhen":["Recurring classes: use a calendar-based page."],"keywords":["Marketing","conference","landing","event","homepage"],"notes":["Installs with landing-kit.tsx (the shared header and section heading); edit the header links there or via props.","Replace gradient speaker portraits with photos and alt text."],"builtFrom":["cta-section","faq-section","flip-clock","footer-section","grid-pattern","logo-cloud","tabs"],"dependencies":["motion","lucide-react"],"related":["flip-clock","tabs","faq-section","grid-pattern"]}]}