# fetaUI

> fetaUI is an animated icon system and UI component library. 5,987 icons in 10 styles, 347 documented UI components and blocks (194 Free, 153 Pro), shipped as React components animated with Motion, a shadcn registry and static SVG packs.

Every icon exists in all 10 styles under the same name, sorted into 34 categories. Interface Essential (744 icons) is Free in every style; every other category is Pro. UI components are Free except Charts, AI, Blocks and Templates, which are Pro. Every icon and component respects prefers-reduced-motion.

Pro names, tiers and descriptions are public. Pro install commands, registry items and source need a Pro key: see [Pricing](/pricing). Every component page also has a Markdown version at its URL plus /markdown.

## Getting started

- [Introduction](/docs): what fetaUI is and what ships
- [Installation](/docs/installation): React package, shadcn registry and static SVG
- [Styles](/docs/styles): the 10 styles side by side
- [Motion](/docs/motion): motion presets, triggers and reduced motion
- [Usage](/docs/usage): size, color, triggers, presets and the imperative handle
- [License](/docs/license): what each plan covers, and third-party notices
- [Pricing](/pricing): Free, Pro and Pro + Figma plans

Free icons: install `@fetaui/react` with its peer `motion` (`npm install @fetaui/react motion`), then import from a style entry point, for example `import { Notification03Icon } from '@fetaui/react/rounded'`.

Free registry items: copy an icon into your project as source with `npx shadcn add @fetaui/<style>-<icon>`, for example `npx shadcn add @fetaui/riso-bell`. Free components install the same way by their page slug, for example `npx shadcn add @fetaui/button`.

Icon props: size, color, trigger, preset (default draw), speed and SVG props. Icons are aria-hidden by default and become role="img" when given an aria-label.

## Icons

- [Icon browser](/icons/rounded): all 5,987 icons. Search with ?q=<words>, filter with ?category=<name> or ?plan=free, for example [/icons/rounded?q=bell](/icons/rounded?q=bell)

### Styles

- [Rounded](/icons/rounded): import path @fetaui/react/rounded, registry prefix rounded-
- [Outlined](/icons/outlined): import path @fetaui/react/outlined, registry prefix outlined-
- [Filled](/icons/filled): import path @fetaui/react/filled, registry prefix filled-
- [Sharp](/icons/sharp): import path @fetaui/react/sharp, registry prefix sharp-
- [Two tone](/icons/two-tone): import path @fetaui/react/two-tone, registry prefix two-tone-
- [Hand drawn](/icons/hand-drawn): import path @fetaui/react/hand-drawn, registry prefix hand-drawn-
- [Riso](/icons/riso): import path @fetaui/react/riso, registry prefix riso-
- [Pixel](/icons/pixel): import path @fetaui/react/pixel, registry prefix pixel-
- [Glass](/icons/glass): import path @fetaui/react/glass, registry prefix glass-
- [Neon](/icons/neon): import path @fetaui/react/neon, registry prefix neon-

### Categories

- [Interface Essential](/icons/rounded?category=Interface%20Essential): 744 icons, Free
- [Arrows Diagrams](/icons/rounded?category=Arrows%20Diagrams): 290 icons, Pro
- [Technology](/icons/rounded?category=Technology): 302 icons, Pro
- [Computers Devices Electronics](/icons/rounded?category=Computers%20Devices%20Electronics): 222 icons, Pro
- [Coding Apps Websites](/icons/rounded?category=Coding%20Apps%20Websites): 102 icons, Pro
- [Internet Network Servers](/icons/rounded?category=Internet%20Network%20Servers): 84 icons, Pro
- [Business Products](/icons/rounded?category=Business%20Products): 297 icons, Pro
- [Work Office Companies](/icons/rounded?category=Work%20Office%20Companies): 208 icons, Pro
- [Money Payments Finance](/icons/rounded?category=Money%20Payments%20Finance): 225 icons, Pro
- [Shopping Ecommerce](/icons/rounded?category=Shopping%20Ecommerce): 223 icons, Pro
- [Shipping Delivery](/icons/rounded?category=Shipping%20Delivery): 110 icons, Pro
- [Content](/icons/rounded?category=Content): 172 icons, Pro
- [Design](/icons/rounded?category=Design): 631 icons, Pro
- [Images Photography](/icons/rounded?category=Images%20Photography): 83 icons, Pro
- [Music Audio](/icons/rounded?category=Music%20Audio): 38 icons, Pro
- [Video Movies TV](/icons/rounded?category=Video%20Movies%20TV): 50 icons, Pro
- [Files Folders](/icons/rounded?category=Files%20Folders): 225 icons, Pro
- [Users](/icons/rounded?category=Users): 88 icons, Pro
- [Emojis Expressions](/icons/rounded?category=Emojis%20Expressions): 63 icons, Pro
- [Emails](/icons/rounded?category=Emails): 57 icons, Pro
- [Phone Mobile Devices](/icons/rounded?category=Phone%20Mobile%20Devices): 56 icons, Pro
- [Messages Chat](/icons/rounded?category=Messages%20Chat): 154 icons, Pro
- [Social Media Rewards](/icons/rounded?category=Social%20Media%20Rewards): 203 icons, Pro
- [Hands Gestures](/icons/rounded?category=Hands%20Gestures): 171 icons, Pro
- [Maps Navigation](/icons/rounded?category=Maps%20Navigation): 120 icons, Pro
- [Date Time Calendar](/icons/rounded?category=Date%20Time%20Calendar): 113 icons, Pro
- [Security Lock](/icons/rounded?category=Security%20Lock): 111 icons, Pro
- [Weather Nature](/icons/rounded?category=Weather%20Nature): 119 icons, Pro
- [Food Drink](/icons/rounded?category=Food%20Drink): 192 icons, Pro
- [Health Medical](/icons/rounded?category=Health%20Medical): 93 icons, Pro
- [Sports Fitness](/icons/rounded?category=Sports%20Fitness): 56 icons, Pro
- [Entertainment Games](/icons/rounded?category=Entertainment%20Games): 169 icons, Pro
- [Mathematics](/icons/rounded?category=Mathematics): 170 icons, Pro
- [Religion](/icons/rounded?category=Religion): 46 icons, Pro

## Components

### Buttons

- [Button](/docs/components/button) (Free, `npx shadcn add @fetaui/button`): One family for every action, with a label, optional icons and a shortcut key.
- [Icon Button](/docs/components/icon-button) (Free, `npx shadcn add @fetaui/icon-button`): The round sibling of Button, for an action one icon can explain.
- [Button Group](/docs/components/button-group) (Free, `npx shadcn add @fetaui/button-group`): Related actions in one shape: Segmented, Attached or Toolbar. For a main action with a menu, use Split Button.
- [Split Button](/docs/components/split-button) (Free, `npx shadcn add @fetaui/split-button`): A main action and a chevron that opens a menu of related ones, joined into one control.
- [Toggle](/docs/components/toggle) (Free, `npx shadcn add @fetaui/toggle`): A button that stays pressed.
- [Toggle Group](/docs/components/toggle-group) (Free, `npx shadcn add @fetaui/toggle-group`): Toggles on one tray, for a single choice or several.
- [Voice Control](/docs/components/voice-control) (Free, `npx shadcn add @fetaui/voice-control`): Round controls for voice and call surfaces, with a live level meter while listening.
- [Command Button](/docs/components/command-button) (Free, `npx shadcn add @fetaui/command-button`): A button with its shortcut drawn as keycaps that sink as the real keys go down.
- [Slide Text Button](/docs/components/slide-text-button) (Free, `npx shadcn add @fetaui/slide-text-button`): The label slides up one row on hover or focus while a second label rises in.
- [Gradient Button](/docs/components/gradient-button) (Free, `npx shadcn add @fetaui/gradient-button`): An accent button that keeps its color in Light and Dark. Hover sweeps a sheen.
- [Undo Button](/docs/components/undo-button) (Free, `npx shadcn add @fetaui/undo-button`): An action with a window to take it back.
- [Save Button](/docs/components/save-button) (Free, `npx shadcn add @fetaui/save-button`): A bookmark that files into collections.
- [Add to Cart Button](/docs/components/add-to-cart-button) (Free, `npx shadcn add @fetaui/add-to-cart-button`): Add opens into a quantity stepper in place.
- [Cart Button](/docs/components/cart-button) (Free, `npx shadcn add @fetaui/cart-button`): A mini cart with item rows, a rolling subtotal and a Checkout that stays disabled while empty.
- [Morph Popover](/docs/components/morph-popover) (Free, `npx shadcn add @fetaui/morph-popover`): A feedback pill that grows into its own form.
- [Particle Button](/docs/components/particle-button) (Free, `npx shadcn add @fetaui/particle-button`): An async button that walks Idle, Pending, Success and Error.
- [Bell Button](/docs/components/bell-button) (Free, `npx shadcn add @fetaui/bell-button`): A subscribe toggle with a bell that swings on two coupled springs.
- [Slide To Confirm](/docs/components/slide-to-confirm) (Free, `npx shadcn add @fetaui/slide-to-confirm`): Drag the thumb across to confirm. Past 90% or a fast flick, it commits.
- [Attract Button](/docs/components/attract-button) (Free, `npx shadcn add @fetaui/attract-button`): A button in a field of iron filings that turn toward the pointer and pull in on press.
- [Metallic Link](/docs/components/metallic-link) (Free, `npx shadcn add @fetaui/metallic-link`): A link styled as a pill inside a chrome rim.
- [Hold To Confirm](/docs/components/hold-to-confirm) (Free, `npx shadcn add @fetaui/hold-to-confirm`): Press and hold: a sweep crosses the button and the action fires when it reaches the far edge. Let go early and it springs back.
- [Expanding Arrow Button](/docs/components/expanding-arrow-button) (Free, `npx shadcn add @fetaui/expanding-arrow-button`): A wide call to action where a chip opens across the button as its chevrons run.
- [Color Selector](/docs/components/color-selector) (Free, `npx shadcn add @fetaui/color-selector`): A single choice among color swatches, on a native radio group.
- [Tear Button](/docs/components/tear-button) (Free, `npx shadcn add @fetaui/tear-button`): A ticket you confirm by tearing off its stub.
- [Pull-chain light](/docs/components/pull-chain-light) (Free, `npx shadcn add @fetaui/pull-chain-light`): A pendant lamp you switch by tugging its pull chain. Space toggles it from the keyboard.
- [Theme Toggle](/docs/components/theme-toggle) (Free, `npx shadcn add @fetaui/theme-toggle`): A light and dark switch that shows a sun or a moon, so the value reads at a glance.

### Forms

- [Label](/docs/components/label) (Free, `npx shadcn add @fetaui/label`): The name of a control, tied to it so a click on the label focuses the field.
- [Input](/docs/components/input) (Free, `npx shadcn add @fetaui/input`): The single line text control: a pill on the tray fill that lifts onto the surface when focused.
- [Textarea](/docs/components/textarea) (Free, `npx shadcn add @fetaui/textarea`): Multi line text with a mono character count.
- [Field](/docs/components/field) (Free, `npx shadcn add @fetaui/field`): Label, control and help text as one unit, so they read, validate and announce together.
- [Fieldset](/docs/components/fieldset) (Free, `npx shadcn add @fetaui/fieldset`): Fields grouped under a legend, in an inset card on the tray.
- [Input Group](/docs/components/input-group) (Free, `npx shadcn add @fetaui/input-group`): Icons, text and actions inside the same ring as the input, so the group focuses and validates as one.
- [Checkbox](/docs/components/checkbox) (Free, `npx shadcn add @fetaui/checkbox`): Toggles between checked and not checked, with an indeterminate value for parents of a list.
- [Radio Group](/docs/components/radio) (Free, `npx shadcn add @fetaui/radio`): Pick exactly one. A surface circle that fills to an ink disc with a dot.
- [Switch](/docs/components/switch) (Free, `npx shadcn add @fetaui/switch`): Turns a setting on or off and applies it at once.
- [Slider](/docs/components/slider) (Free, `npx shadcn add @fetaui/slider`): Pick a value or a range by dragging. Line for forms, Bold for a headline value, Field for dense inspectors, all with one or two thumbs.
- [Select](/docs/components/select) (Free, `npx shadcn add @fetaui/select`): Choose one value from a list. The list grows out of the trigger and the highlight glides.
- [Combobox](/docs/components/combobox) (Free, `npx shadcn add @fetaui/combobox`): An input that filters a list as you type, for one value or many.
- [Calendar](/docs/components/calendar) (Free, `npx shadcn add @fetaui/calendar`): Pick a date, a range, or a date and a time. Six rows always, so the height never jumps.
- [Date Picker](/docs/components/date-picker) (Free, `npx shadcn add @fetaui/date-picker`): A pill field that opens a month in a floating surface.
- [Amount Pad](/docs/components/amount-pad) (Free, `npx shadcn add @fetaui/amount-pad`): A send money keypad. The amount grows as you type and the send button carries it.
- [Attachment](/docs/components/attachment) (Free, `npx shadcn add @fetaui/attachment`): A file on its way up or already there, with a drop zone and an upload queue.
- [Detent Dial](/docs/components/detent-dial) (Free, `npx shadcn add @fetaui/detent-dial`): A rotary control that clicks into steps.
- [Search](/docs/components/search) (Free, `npx shadcn add @fetaui/search`): A search field and a command palette for finding anything and running commands.
- [Signature Pad](/docs/components/signature-pad) (Free, `npx shadcn add @fetaui/signature-pad`): A surface to sign on with a mouse, pen or finger.
- [Time Field](/docs/components/time-field) (Free, `npx shadcn add @fetaui/time-field`): A segmented time input. Each part is a spin button you can type into or step.
- [Day Strip](/docs/components/day-strip) (Free, `npx shadcn add @fetaui/day-strip`): Pick a day from a strip of soft capsules. The selected day grows and fills with ink.
- [Theme Switch](/docs/components/theme-switch) (Free, `npx shadcn add @fetaui/theme-switch`): Switches between light and dark. The sun folds into the moon as the theme spreads.
- [Billing Switch](/docs/components/billing-switch) (Free, `npx shadcn add @fetaui/billing-switch`): Monthly and Yearly on one tray. The active pill slides across and the price rolls.
- [Attachment Group](/docs/components/attachment-group) (Free, `npx shadcn add @fetaui/attachment-group`): A scrolling row of files above a composer. It fades where it overflows.
- [Input OTP](/docs/components/input-otp) (Free, `npx shadcn add @fetaui/input-otp`): Separate slots that behave like one input. Typing moves forward, paste fills every slot.
- [OTP Form](/docs/components/otp-form) (Free, `npx shadcn add @fetaui/otp-form`): A one time code card. Verify waits for all six digits, and a wrong code keeps them to fix.
- [Padlock](/docs/components/padlock) (Free, `npx shadcn add @fetaui/padlock`): A gunmetal padlock whose shackle lifts as a code is checked and pops free when it is right.
- [Liquid Slider](/docs/components/liquid-slider) (Free, `npx shadcn add @fetaui/liquid-slider`): A glass that fills as you drag, with a surface that behaves like water.
- [Wheel Picker](/docs/components/wheel-picker) (Free, `npx shadcn add @fetaui/wheel-picker`): Three wheels for a time. Set time waits until every wheel has settled.
- [Stay Picker](/docs/components/stay-picker) (Free, `npx shadcn add @fetaui/stay-picker`): Pick a stay night by night, with prices in the grid. A range cannot cross a booked night.
- [Slot Picker](/docs/components/slot-picker) (Free, `npx shadcn add @fetaui/slot-picker`): Book a time by placing a block on a day. It snaps to 15 minutes and avoids busy time.
- [Tip Selector](/docs/components/tip-selector) (Free, `npx shadcn add @fetaui/tip-selector`): A tape measure for tipping. Drag it under a fixed needle, or pick a chip.
- [Calendar Schedule](/docs/components/calendar-schedule) (Free, `npx shadcn add @fetaui/calendar-schedule`): A month with its events in the grid, and the picked day's agenda beside it.
- [Meeting Finder](/docs/components/meeting-finder) (Free, `npx shadcn add @fetaui/meeting-finder`): Ask for a meeting in plain words, then compare ranked times on everyone's timeline.
- [Availability Cell](/docs/components/availability-cell) (Free, `npx shadcn add @fetaui/availability-cell`): One month of availability, used six at a time in the Availability Strip.
- [Availability Strip](/docs/components/availability-strip) (Free, `npx shadcn add @fetaui/availability-strip`): Six months of availability beside a label.
- [Calendar Event](/docs/components/calendar-event) (Free, `npx shadcn add @fetaui/calendar-event`): An event block for week views: colour tag, title, time and attendees.

### Overlays

- [Tooltip](/docs/components/tooltip) (Free, `npx shadcn add @fetaui/tooltip`): A short label that names a control on hover, focus or long press, in Ink, Soft or a rich tab shape.
- [Popover](/docs/components/popover) (Free, `npx shadcn add @fetaui/popover`): Anchored context that stays close to its trigger: a pill, a Soft two part panel and a nub pointing back.
- [Hover Card](/docs/components/hover-card) (Free, `npx shadcn add @fetaui/hover-card`): A preview of what sits behind a link: it loads as a skeleton of the same shape and can be pinned open.
- [Dialog](/docs/components/dialog) (Free, `npx shadcn add @fetaui/dialog`): A window over the page for one focused task, with the page behind made inert. On Mobile it is a bottom sheet.
- [Alert Dialog](/docs/components/alert-dialog) (Free, `npx shadcn add @fetaui/alert-dialog`): A modal that interrupts with something important and waits for an answer.
- [Sheet](/docs/components/sheet) (Free, `npx shadcn add @fetaui/sheet`): Content that complements the page, sliding in from an edge and floating 8 px in from it.
- [Drawer](/docs/components/drawer) (Free, `npx shadcn add @fetaui/drawer`): A panel from the edge of the screen: a floating side panel on Web and a bottom sheet on Mobile.
- [Bottom Sheet](/docs/components/bottom-sheet) (Free, `npx shadcn add @fetaui/bottom-sheet`): A panel that slides up for one focused task. Mobile docks with a grabber, and Web floats at 480.
- [Smooth Drawer](/docs/components/smooth-drawer) (Free, `npx shadcn add @fetaui/smooth-drawer`): A drawer with heights to drag between: Peek shows the total and Pay, Expanded shows everything.
- [Dropdown Menu](/docs/components/dropdown-menu) (Free, `npx shadcn add @fetaui/dropdown-menu`): A list of actions behind a button, with shortcuts, toggles, submenus and a red destructive action at the end.
- [Menubar](/docs/components/menubar) (Free, `npx shadcn add @fetaui/menubar`): A persistent row of menus, like a desktop app. The open tab slides between triggers, and holding Alt shows every access key.
- [Command](/docs/components/command) (Free, `npx shadcn add @fetaui/command`): A keyboard first menu for every action in the product, with fuzzy search, submenus and inline confirmation.
- [Dropdown](/docs/components/dropdown) (Free, `npx shadcn add @fetaui/dropdown`): Picks one option from a short list of one line text or emoji labels.

### Navigation

- [Breadcrumb](/docs/components/breadcrumb) (Free, `npx shadcn add @fetaui/breadcrumb`): Shows where the current page sits and lets people step back up.
- [Pagination](/docs/components/pagination) (Free, `npx shadcn add @fetaui/pagination`): Seven ways to move through pages. The current page lifts onto surface and slides to where you clicked.
- [Number Stepper](/docs/components/number-stepper) (Free, `npx shadcn add @fetaui/number-stepper`): Minus, value and plus Icon Buttons in a 10% ink pill.
- [Tabs](/docs/components/tabs) (Free, `npx shadcn add @fetaui/tabs`): Switch between views of the same thing. Panels swipe with the finger and the indicator follows.
- [Profile Dropdown](/docs/components/profile-dropdown) (Free, `npx shadcn add @fetaui/profile-dropdown`): The account menu behind your avatar, with status, theme and a hold to sign out.
- [Lens Pager](/docs/components/lens-pager) (Free, `npx shadcn add @fetaui/lens-pager`): Paging through a lens, for moments where paging is the experience.
- [Editor Tabs](/docs/components/editor-tabs) (Free, `npx shadcn add @fetaui/editor-tabs`): File tabs for editors: the active tab sits on the surface, and unsaved files carry a warning dot.
- [Navigation Menu](/docs/components/navigation-menu) (Free, `npx shadcn add @fetaui/navigation-menu`): A tray pill of triggers with soft panels that morph as you move across them.
- [Sidebar](/docs/components/sidebar) (Free, `npx shadcn add @fetaui/sidebar`): Nav Items on a tray, with the active page lifted onto surface. Collapses to an icon rail.
- [Tab Bar](/docs/components/tab-bar) (Free, `npx shadcn add @fetaui/tab-bar`): Three to five top destinations on Mobile, as a labeled bar or a floating dock.
- [Tree](/docs/components/tree) (Free, `npx shadcn add @fetaui/tree`): Hierarchies in a Soft card: files, navigation with counts, checkboxes with parent states, and indent guides.
- [File Tree](/docs/components/file-tree) (Free, `npx shadcn add @fetaui/file-tree`): A file explorer: folders with chevrons, files with type icons, git marks and a selected row.
- [Status Island](/docs/components/status-island) (Free, `npx shadcn add @fetaui/status-island`): A floating pill that reports background work. It stacks what is waiting and opens into a tray of every task.
- [Stack Panel](/docs/components/stack-panel) (Free, `npx shadcn add @fetaui/stack-panel`): A settings panel that drills into pages and back. Swipe back reveals the parent underneath.
- [Marking Menu](/docs/components/marking-menu) (Free, `npx shadcn add @fetaui/marking-menu`): A radial menu for people who learn it. Hold for eight targets, or flick the same way to pick without looking.
- [Toolbar](/docs/components/toolbar) (Free, `npx shadcn add @fetaui/toolbar`): A floating tool dock for canvas apps. It holds the current tool on an ink plate and redocks to any edge.

### Feedback

- [Spinner](/docs/components/spinner) (Free, `npx shadcn add @fetaui/spinner`): Says something is happening when the wait is short or unknown. Four kinds at five sizes.
- [Skeleton](/docs/components/skeleton) (Free, `npx shadcn add @fetaui/skeleton`): A placeholder in the shape of content on its way, so nothing jumps when it arrives.
- [Alert](/docs/components/alert) (Free, `npx shadcn add @fetaui/alert`): A callout that asks for attention without taking over the page. Card, Inline and Banner in six tones.
- [Toast](/docs/components/toast) (Free, `npx shadcn add @fetaui/toast`): A short message that melts from a pill into a card. Eight kinds, with stacking and swipe.
- [Progress](/docs/components/progress) (Free, `npx shadcn add @fetaui/progress`): Shows how far a task has come, with states for done, paused, failed and unknown length, plus nine recipes.
- [Empty](/docs/components/empty) (Free, `npx shadcn add @fetaui/empty`): Says what is missing and offers the one next step. Eight kinds, from a drop area to a 404.
- [Vote Button](/docs/components/vote-button) (Free, `npx shadcn add @fetaui/vote-button`): A chevron over a count. Voting inverts the tile and rolls the count up by one.
- [Rating](/docs/components/rating) (Free, `npx shadcn add @fetaui/rating`): Five stars with a label and value. Hover previews up to the pointer.
- [Feedback Prompt](/docs/components/feedback-prompt) (Free, `npx shadcn add @fetaui/feedback-prompt`): A yes or no question. Yes opens a note, No adds reason chips, and sending says thanks.
- [NPS Scale](/docs/components/nps-scale) (Free, `npx shadcn add @fetaui/nps-scale`): Eleven equal boxes from 0 to 10 with end labels. Choosing one reveals Submit.
- [Feature Voting](/docs/components/feature-voting) (Free, `npx shadcn add @fetaui/feature-voting`): A feature request board. Compact is a short top list, Board adds descriptions, categories and authors.
- [Order Tracking](/docs/components/order-tracking) (Free, `npx shadcn add @fetaui/order-tracking`): Stage and ETA, a five stage track, a timeline of updates, the items and the address.
- [Goals Check-in](/docs/components/goals-check-in) (Free, `npx shadcn add @fetaui/goals-check-in`): Quarterly goals with owner, status and progress. Check in opens a goal with a key result, status and a note.

### Display

- [Badge](/docs/components/badge) (Free, `npx shadcn add @fetaui/badge`): A short label that names a status or a category. The pill stays ink and the mark carries the tone.
- [Kbd](/docs/components/kbd) (Free, `npx shadcn add @fetaui/kbd`): A keycap for showing keyboard input. One key per cap, grouped as a combo, chord or sequence.
- [Separator](/docs/components/separator) (Free, `npx shadcn add @fetaui/separator`): A quiet divider between content: plain rule, fading edges, soft dots, a labelled break or an icon knot.
- [Item](/docs/components/item) (Free, `npx shadcn add @fetaui/item`): A row that shows one thing: media, a title, a description and an optional action.
- [Avatar](/docs/components/avatar) (Free, `npx shadcn add @fetaui/avatar`): A person or workspace as an illustrated photo, initials or an icon, with presence, a story ring and overlapping groups.
- [Aspect Ratio](/docs/components/aspect-ratio) (Free, `npx shadcn add @fetaui/aspect-ratio`): Holds an image or video at a fixed ratio, so layouts never jump while media loads.
- [Accordion](/docs/components/accordion) (Free, `npx shadcn add @fetaui/accordion`): Stacked headings that each reveal a panel, in three looks: Classic, Soft and Editorial.
- [Collapsible](/docs/components/collapsible) (Free, `npx shadcn add @fetaui/collapsible`): A trigger on the Soft tray and an inset card that opens in place.
- [Scroll Area](/docs/components/scroll-area) (Free, `npx shadcn add @fetaui/scroll-area`): Custom scrolling that keeps the native feel: an overlay bar, edge fades and the Soft tray shell.
- [Avatar Picker](/docs/components/avatar-picker) (Free, `npx shadcn add @fetaui/avatar-picker`): Spin a coin or pick a face. It lands on the nearest one with real physics.
- [Avatar Upload](/docs/components/avatar-upload) (Free, `npx shadcn add @fetaui/avatar-upload`): A profile photo with drop, progress, replace and clear errors, or a sample face.
- [Expandable Card](/docs/components/expandable-card) (Free, `npx shadcn add @fetaui/expandable-card`): A task summary that opens into steps, with a ring that fills to a success mark.
- [Expandable Text](/docs/components/expandable-text) (Free, `npx shadcn add @fetaui/expandable-text`): Copy clamped on a line boundary that unrolls from where you were reading.
- [Review Card](/docs/components/review-card) (Free, `npx shadcn add @fetaui/review-card`): A customer review with ink stars, a headline and three lines that open in place.
- [Product Details](/docs/components/product-details) (Free, `npx shadcn add @fetaui/product-details`): Expandable Text and Review Card composed into a product block.
- [Code Block](/docs/components/code-block) (Free, `npx shadcn add @fetaui/code-block`): Code on the Soft tray: file name and Copy above, numbered lines in an inset card, with highlights and diffs.
- [Code Output](/docs/components/code-output) (Free, `npx shadcn add @fetaui/code-output`): A command and its output, streaming while it runs, then a settled mark.
- [JSON View](/docs/components/json-view) (Free, `npx shadcn add @fetaui/json-view`): An API response explorer: a tree you can fold, search and copy from.
- [Carousel](/docs/components/carousel) (Free, `npx shadcn add @fetaui/carousel`): A rail of tall cards. The centred card grows to 106% and shows its price.
- [Metal Frame](/docs/components/metal-frame) (Free, `npx shadcn add @fetaui/metal-frame`): Rings any box in liquid chrome: bands drift round the edge, the edge swells toward the pointer, and thinking runs them faster.
- [Liquid Ring](/docs/components/liquid-ring) (Free, `npx shadcn add @fetaui/liquid-ring`): Wraps the prompt composer in a liquid metal ring with an orbiting glow and a voice beam.
- [Bezel Frame](/docs/components/bezel-frame) (Free, `npx shadcn add @fetaui/bezel-frame`): Seats a single prompt in a bezel ringed in sky chrome, for a hero search.
- [Aura Frame](/docs/components/aura-frame) (Free, `npx shadcn add @fetaui/aura-frame`): Warm and cool light leaking from a prompt, for a louder composer.
- [Frame Rule](/docs/components/frame-rule) (Free, `npx shadcn add @fetaui/frame-rule`): The hairlines of a framed section, drawn in once.
- [Clip Trimmer](/docs/components/clip-trimmer) (Free, `npx shadcn add @fetaui/clip-trimmer`): Keep part of a clip with an ink range over a filmstrip.
- [Focal Point Picker](/docs/components/focal-point-picker) (Free, `npx shadcn add @fetaui/focal-point-picker`): Sets the point every crop keeps.
- [Photo Straighten](/docs/components/photo-straighten) (Free, `npx shadcn add @fetaui/photo-straighten`): Levels a tilted horizon with a degree ruler.
- [Rich Text Editor](/docs/components/rich-text-editor) (Free, `npx shadcn add @fetaui/rich-text-editor`): Short structured writing that exports clean Markdown and HTML.
- [Type Writer](/docs/components/type-writer) (Free, `npx shadcn add @fetaui/type-writer`): Types words like a person: typos, a selection and a blinking caret.
- [Glitch Text](/docs/components/glitch-text) (Free, `npx shadcn add @fetaui/glitch-text`): Red and cyan slices tear a word on hover, or when a status changes.
- [Split Flap Text](/docs/components/split-flap-text) (Free, `npx shadcn add @fetaui/split-flap-text`): An airport board: each cell flips through the alphabet until it lands.
- [Swoosh Text](/docs/components/swoosh-text) (Free, `npx shadcn add @fetaui/swoosh-text`): Extruded letters lit by the pointer.
- [Marker Text](/docs/components/marker-text) (Free, `npx shadcn add @fetaui/marker-text`): Marks drawn by hand over copy: highlight, underline, circle, box and strike.
- [Logo Tile](/docs/components/logo-tile) (Free, `npx shadcn add @fetaui/logo-tile`): A neutral placeholder for a customer or partner logo.
- [Table](/docs/components/table) (Free, `npx shadcn add @fetaui/table`): Native table parts on one cell component, in Compact or Comfortable density and Plain or Grid style.
- [Data Table](/docs/components/data-table) (Free, `npx shadcn add @fetaui/data-table`): Sort, search, filter, page and act in bulk on one set of records, with Data Table Header and Table Toolbar on the tray.
- [Tree Table](/docs/components/tree-table) (Free, `npx shadcn add @fetaui/tree-table`): Rows that roll up, with guides for depth. Selecting rows totals their spend in the footer.
- [Tree View](/docs/components/tree-view) (Free, `npx shadcn add @fetaui/tree-view`): A file tree with guides, inline renaming and the selected path in the footer.
- [Sortable List](/docs/components/sortable-list) (Free, `npx shadcn add @fetaui/sortable-list`): Reorderable cards with a grip and a mono position. The item lifts at −2° over a dashed slot.
- [Comparison Table](/docs/components/comparison-table) (Free, `npx shadcn add @fetaui/comparison-table`): Plans as columns with the home column washed, grouped features, yes, no and partial marks, and a switch for only differences.
- [Data Grid](/docs/components/data-grid) (Free, `npx shadcn add @fetaui/data-grid`): A spreadsheet grid for large data: pinned columns, range selection, editing, and live Sum and Avg.
- [Inbox Bulk Actions](/docs/components/inbox-bulk-actions) (Free, `npx shadcn add @fetaui/inbox-bulk-actions`): A message list with checkboxes. Selecting rows swaps the header for a washed bulk toolbar.

### Product

- [Spend Alerts](/docs/components/spend-alerts) (Free, `npx shadcn add @fetaui/spend-alerts`): Budget alert settings: a budget, a threshold, channels, a hard stop and a live preview of the alert.
- [Checkout](/docs/components/checkout) (Free, `npx shadcn add @fetaui/checkout`): Express pay, billing period, plan options, seats, add-ons, billing and card fields, and a live order summary.
- [Credit Top-up](/docs/components/credit-top-up) (Free, `npx shadcn add @fetaui/credit-top-up`): Balance with runway and a 14 day trend, credit packs, a custom amount, auto top-up and Buy.
- [Plan Card](/docs/components/plan-card) (Free, `npx shadcn add @fetaui/plan-card`): One plan: name, price, pitch, features and a full width Button.
- [Payment Method](/docs/components/payment-method) (Free, `npx shadcn add @fetaui/payment-method`): A saved card: brand tile, label and expiry, status and a menu. Add is a dashed row.
- [Usage Meter](/docs/components/usage-meter) (Free, `npx shadcn add @fetaui/usage-meter`): A metric against its limit, with an 8 px track and a plain hint. State comes from the numbers.
- [Invoice Row](/docs/components/invoice-row) (Free, `npx shadcn add @fetaui/invoice-row`): Receipt tile, invoice number and date, plan, amount, status Badge and a download action.
- [Webhooks](/docs/components/webhooks) (Free, `npx shadcn add @fetaui/webhooks`): Endpoints with health, a delivery histogram, recent deliveries with Retry, and an open delivery with its payload.
- [Integrations](/docs/components/integrations) (Free, `npx shadcn add @fetaui/integrations`): A list of tools with search, category Tabs and Connect, Configure or a Connected Badge.
- [API Key](/docs/components/api-key) (Free, `npx shadcn add @fetaui/api-key`): A key on a well with reveal and copy. Copied confirms for 2 s and Revoked removes the actions.
- [Endpoint](/docs/components/endpoint) (Free, `npx shadcn add @fetaui/endpoint`): A method Badge in a fixed column, a mono path and a one line summary.
- [Request Log](/docs/components/request-log) (Free, `npx shadcn add @fetaui/request-log`): One request in mono, and a windowed list for live tails of any length.
- [Kanban Card](/docs/components/kanban-card) (Free, `npx shadcn add @fetaui/kanban-card`): One card: tag and id, a two line title, then assignee, due date, comments and subtasks.
- [Kanban Column](/docs/components/kanban-column) (Free, `npx shadcn add @fetaui/kanban-column`): A 4% ink tray with a status dot, title and count, holding Kanban Cards. It can open a drop slot, show an empty hint, or collapse to its header.
- [Members](/docs/components/members) (Free, `npx shadcn add @fetaui/members`): Workspace members: seat usage, an invite row, the member list with activity and roles, and pending invites.
- [Member Row](/docs/components/member-row) (Free, `npx shadcn add @fetaui/member-row`): One member: avatar, name and email, last activity, a role Select and a menu. Pending adds Invited and Resend, and Deactivated locks the role.
- [Invite Field](/docs/components/invite-field) (Free, `npx shadcn add @fetaui/invite-field`): A wrapping box of email chips, a role Select and Send. Send waits until every address is valid.
- [Invite Teammates](/docs/components/invite-teammates) (Free, `npx shadcn add @fetaui/invite-teammates`): An invite panel with a seat bar split by members, pending and new. At the seat limit, the action becomes an upgrade.
- [Questionnaire](/docs/components/questionnaire) (Free, `npx shadcn add @fetaui/questionnaire`): Asks one question at a time in a soft tray, with single or multiple answers, shortcuts, validation, restore, and conditional steps.
- [Cancel Flow](/docs/components/cancel-flow) (Free, `npx shadcn add @fetaui/cancel-flow`): A three step cancellation: a reason with an optional note, a retention offer, then a final confirm.
- [Onboarding Question](/docs/components/onboarding-question) (Free, `npx shadcn add @fetaui/onboarding-question`): One onboarding question: progress, Skip, four choice cards with number keys, and Continue.

### Charts

- [Area](/docs/components/area-chart) (Pro, needs a Pro key, see [Pricing](/pricing)): Volume over time: a natural spline, 1 px stroke, a flat or gradient fill, revealed left to right.
- [Line](/docs/components/line-chart) (Pro, needs a Pro key, see [Pricing](/pricing)): Trends over time: a 2 px line trimmed on from the left, then dots and labels fade in. Includes Forecast and Multiples.
- [Bar](/docs/components/bar-chart) (Pro, needs a Pro key, see [Pricing](/pricing)): Categories compared: 10% category gap, 4 px bar gap, grown from the baseline. Includes Share and Race.
- [Budget vs Actual](/docs/components/budget-vs-actual) (Pro, needs a Pro key, see [Pricing](/pricing)): A bullet table: each department shows actual against a budget marker and a 90 to 110% band, in danger when over.
- [Pie](/docs/components/pie-chart) (Pro, needs a Pro key, see [Pricing](/pricing)): Parts of one whole, in layered Soft rings with a raised centre cap. Includes Donut, Stacked and Sunburst.
- [Radar](/docs/components/radar-chart) (Pro, needs a Pro key, see [Pricing](/pricing)): Profiles across five to eight criteria: first axis at 12 o'clock, polygon or circle grid, shapes grow out of the centre.
- [Radial](/docs/components/radial-chart) (Pro, needs a Pro key, see [Pricing](/pricing)): Radial bars on muted tracks against a shared max, and gauges with a centred number and a half donut stack.
- [Chart Tooltip](/docs/components/chart-tooltip) (Pro, needs a Pro key, see [Pricing](/pricing)): The hover readout for every chart: label on the tray, series rows in an inset card, values in mono so digits line up.
- [Funnel](/docs/components/funnel-chart) (Pro, needs a Pro key, see [Pricing](/pricing)): A conversion funnel: stage numbers over one eased band, a stacked Split, the step loss under each column line and dots for visitors.
- [Signup Funnel](/docs/components/signup-funnel) (Pro, needs a Pro key, see [Pricing](/pricing)): A stepped funnel with stage bars, drop columns with the median wait, a headline rate and segment Tabs.
- [Flow](/docs/components/flow-chart) (Pro, needs a Pro key, see [Pricing](/pricing)): A Sankey of how people move between stages: ink nodes with mono values, eased links, and hover that traces a path.
- [Heatmap](/docs/components/heatmap-chart) (Pro, needs a Pro key, see [Pricing](/pricing)): A year of activity in five ink levels, months above and weekdays beside, with a month calendar for small screens.
- [Cohort Retention](/docs/components/cohort-retention) (Pro, needs a Pro key, see [Pricing](/pricing)): Rows are signup cohorts, columns months since signup, and cells step through five ink tones. Detailed adds KPIs and a scale, and both looks switch to a curve view.
- [Horizon Chart](/docs/components/horizon-chart) (Pro, needs a Pro key, see [Pricing](/pricing)): Each market folds its daily deviation into stepped warm and cool bands, so twelve rows of time fit in one view.
- [Scatter](/docs/components/scatter) (Pro, needs a Pro key, see [Pricing](/pricing)): The small Soft plots: single, bubble, multiple series, trend line with a band, quadrants and labeled points.
- [Scatter Chart](/docs/components/scatter-chart) (Pro, needs a Pro key, see [Pricing](/pricing)): Accounts on a log scale with filter Tabs. Dragging draws a lasso, and a summary card reads what you selected.
- [Timeline](/docs/components/timeline) (Pro, needs a Pro key, see [Pricing](/pricing)): Timelines in the Soft card: Vertical with Timeline Item, Horizontal steps, Activity with avatars and a Compact log.
- [Timeline Item](/docs/components/timeline-item) (Pro, needs a Pro key, see [Pricing](/pricing)): A 20 px marker on a 2 px rail, a title, a time and one line of detail. Four states.
- [Event Timeline](/docs/components/event-timeline) (Pro, needs a Pro key, see [Pricing](/pricing)): Swimlanes for deploys, config changes and incidents, with counts per day, a range stepper and the event list.
- [Candlestick](/docs/components/candlestick) (Pro, needs a Pro key, see [Pricing](/pricing)): Candlesticks in the Soft card: filled, with a volume row, OHLC ticks, hollow up candles and a moving average.
- [Candlestick Chart](/docs/components/candlestick-chart) (Pro, needs a Pro key, see [Pricing](/pricing)): The full price chart: candles, volume, 20 and 50 day averages, a last price tag, range Tabs and zoom.

### AI

- [Marker](/docs/components/marker) (Pro, needs a Pro key, see [Pricing](/pricing)): Quiet notes between turns: system notes, progress, separators and links. Markers stay small and tertiary, so they never compete with messages.
- [Message and Bubble](/docs/components/message-and-bubble) (Pro, needs a Pro key, see [Pricing](/pricing)): Conversation rows. Message carries the full turn with header, reply and actions. Bubble is the plain version for simple threads and support widgets.
- [Trace](/docs/components/trace) (Pro, needs a Pro key, see [Pricing](/pricing)): Agent steps. Trace Line is one call, Trace groups them on the tray, and Chain of Thought is the bare version for surfaces that have their own background.
- [Orb](/docs/components/orb) (Pro, needs a Pro key, see [Pricing](/pricing)): The dotted agent mark. Nine states, each with its own shape, alone or in a status pill with what the agent is doing right now.
- [Text Loading](/docs/components/text-loading) (Pro, needs a Pro key, see [Pricing](/pricing)): Inline thinking labels for the moment before an answer, from a quiet shimmer to a pill with a working Orb and a timer.
- [Loading](/docs/components/loading) (Pro, needs a Pro key, see [Pricing](/pricing)): Step by step progress for a long answer. The header holds the current step and a timer, and the list shows every step on a rail with its status.
- [Voice](/docs/components/voice) (Pro, needs a Pro key, see [Pricing](/pricing)): A voice note recorder. A main button sits over a mono timer and a waveform, and review adds Discard and Send. This is the interface only, you wire the audio.
- [Model Selector](/docs/components/model-selector) (Pro, needs a Pro key, see [Pricing](/pricing)): Model and effort picker for the composer. A compact pill opens a floating panel with the model list and an effort control.
- [Context Meter](/docs/components/context-meter) (Pro, needs a Pro key, see [Pricing](/pricing)): Context window meter for the composer. A ring and a percent warn before the window fills, and a panel shows where the tokens went.
- [Autocomplete](/docs/components/autocomplete) (Pro, needs a Pro key, see [Pricing](/pricing)): Inline completion in a compose field. The suggestion trails the caret in tertiary, and shortcuts live in the tray footer.
- [Citations](/docs/components/citations) (Pro, needs a Pro key, see [Pricing](/pricing)): Answers with inline citations. Each claim ends in a pill with the source, a preview card shows what is behind it, and the footer lists every source.
- [Prompt](/docs/components/prompt) (Pro, needs a Pro key, see [Pricing](/pricing)): Two composers. AI Prompt is the lighter chat composer with commands, files and hints. Prompt Input is the agent composer, where the header names the mode: ask, responding, voice or actions.
- [Input Search](/docs/components/input-search) (Pro, needs a Pro key, see [Pricing](/pricing)): A composer that says which tool will answer, and shows the sources it read, live and afterwards.
- [Approval](/docs/components/approval) (Pro, needs a Pro key, see [Pricing](/pricing)): Ask before a tool runs. The header names the tool, the card shows the exact command and the reason, and the footer holds Deny and Allow.
- [Branches](/docs/components/branches) (Pro, needs a Pro key, see [Pricing](/pricing)): Branching conversations. Edited questions keep their earlier versions: a pill steps through them, a rail draws the tree on Web and a list shows every branch.
- [Diff Review](/docs/components/diff-review) (Pro, needs a Pro key, see [Pricing](/pricing)): Review what the agent changed, file by file, with accept and reject on every file and for the whole change. Version History does the same for documents.
- [Memory](/docs/components/memory) (Pro, needs a Pro key, see [Pricing](/pricing)): Memory you can see and edit. The chat and the memory panel sit side by side on Web, and changes show in both places at once.
- [Message Queue](/docs/components/message-queue) (Pro, needs a Pro key, see [Pricing](/pricing)): Queue follow-ups while an agent works. Queued messages wait in their own card and run in order when the agent is free.
- [Redact](/docs/components/redact) (Pro, needs a Pro key, see [Pricing](/pricing)): Masks the entities you pass in before text leaves the browser, then fills them back into the reply. It detects nothing itself. You see one view, and the model sees another.
- [Token Alternatives](/docs/components/token-alternatives) (Pro, needs a Pro key, see [Pricing](/pricing)): Shows the words the model was unsure about and lets people swap them. A confidence view tints every uncertain word.
- [Chat Alert](/docs/components/chat-alert) (Pro, needs a Pro key, see [Pricing](/pricing)): A notice in the thread that says what happened and what to do next, in one shape for every tone.
- [Todo List](/docs/components/todo-list) (Pro, needs a Pro key, see [Pricing](/pricing)): The agent plan as a checklist with progress. Finished tasks keep their time.
- [Inline Edit](/docs/components/inline-edit) (Pro, needs a Pro key, see [Pricing](/pricing)): Edit a selection with AI without leaving the document. The change is written inline, so people see exactly what moves.
- [Agent Lanes](/docs/components/agent-lanes) (Pro, needs a Pro key, see [Pricing](/pricing)): Parallel agents on one shared timeline, with hand-off curves from the Lead, merges back into the write and a now line.
- [Agent Activity](/docs/components/agent-activity) (Pro, needs a Pro key, see [Pricing](/pricing)): What the agent is doing, inline in the thread. One component, many renderers: reasoning, steps, sources and tool calls.
- [Message Scroller](/docs/components/message-scroller) (Pro, needs a Pro key, see [Pricing](/pricing)): A scrolling thread that follows the newest turn, offers a way back and gives Web a rail of ticks to jump between questions.
- [MCP](/docs/components/mcp) (Pro, needs a Pro key, see [Pricing](/pricing)): Manage the MCP servers an agent can use, with the context each one costs in plain view.
- [Agent Tasks](/docs/components/agent-tasks) (Pro, needs a Pro key, see [Pricing](/pricing)): Background coding tasks: a composer with repo, branch and model, filters, and rows with status, diff, checks and one action.
- [Task Breakdown](/docs/components/task-breakdown) (Pro, needs a Pro key, see [Pricing](/pricing)): An AI planner: a goal, a task count with the projected ship date, an effort timeline, and ordered tasks with dependencies and owners.
- [Image Generation](/docs/components/image-generation) (Pro, needs a Pro key, see [Pricing](/pricing)): Image generation in place. A tile grid shows progress on the canvas until the image arrives.
- [Setup](/docs/components/setup) (Pro, needs a Pro key, see [Pricing](/pricing)): Three step setup for an assistant: connect sources, choose how it behaves, test it on a real question.
- [Side View](/docs/components/side-view) (Pro, needs a Pro key, see [Pricing](/pricing)): An assistant beside a document that proposes edits you apply yourself, alone as a panel or with the page on one tray.
- [Doc Extraction](/docs/components/doc-extraction) (Pro, needs a Pro key, see [Pricing](/pricing)): Pull structured fields out of a document, with every value traceable to where it came from on the page.
- [Models Dual Run View](/docs/components/models-dual-run-view) (Pro, needs a Pro key, see [Pricing](/pricing)): Run one prompt on two models side by side and vote blind before the names are shown.
- [Chat Widget](/docs/components/chat-widget) (Pro, needs a Pro key, see [Pricing](/pricing)): A floating help chat assembled from Message, Prompt Input and Chat Alert, opened from a launcher.
- [Agent View](/docs/components/agent-view) (Pro, needs a Pro key, see [Pricing](/pricing)): Shows a page the way an AI agent reads it, so people can check what an agent will take from their site.
- [Orchestrator](/docs/components/orchestrator) (Pro, needs a Pro key, see [Pricing](/pricing)): A lead model splits a goal into a plan, runs helpers in parallel, then merges what they found.
- [Eval](/docs/components/eval) (Pro, needs a Pro key, see [Pricing](/pricing)): Compare an agent version against its baseline on a test suite, and see exactly which cases got worse.
- [Transcript](/docs/components/transcript) (Pro, needs a Pro key, see [Pricing](/pricing)): A transcript that follows the audio word by word, with the player below the card.
- [Call Summary](/docs/components/call-summary) (Pro, needs a Pro key, see [Pricing](/pricing)): A recorded sales call after the meeting: talk time, key moments with a clip player, the AI summary and next steps.
- [Knowledge Base](/docs/components/knowledge-base) (Pro, needs a Pro key, see [Pricing](/pricing)): Sources that ground an assistant, each with a visible ingestion pipeline and a way to test what it retrieves.
- [Running Jobs](/docs/components/running-jobs) (Pro, needs a Pro key, see [Pricing](/pricing)): Scheduled agent jobs with their next run, where they post and how the last runs went.

### Cards

- [Card](/docs/components/card) (Free, `npx shadcn add @fetaui/card`): The container most of fetaUI is built on: an inset card on a soft tray, with actions on the tray.
- [Card Pattern](/docs/components/card-pattern) (Free, `npx shadcn add @fetaui/card-pattern`): Ready made cards for common flows: sign in, order summary, onboarding, stepper and two-factor.
- [Consent Card](/docs/components/consent-card) (Free, `npx shadcn add @fetaui/consent-card`): Asks once whether analytics may run, then folds to a one line confirmation.
- [Uptime Card](/docs/components/uptime-card) (Free, `npx shadcn add @fetaui/uptime-card`): Daily status bars per service. Hover shows a day's story and a click pins it.
- [Spending Ring](/docs/components/spending-ring) (Free, `npx shadcn add @fetaui/spending-ring`): A monochrome donut. The selected category is ink and thicker, and the center reads it.
- [Metric Card](/docs/components/metric-card) (Free, `npx shadcn add @fetaui/metric-card`): One number with its trend, a period switch, and the segments behind it.
- [Activity Rings](/docs/components/activity-rings) (Free, `npx shadcn add @fetaui/activity-rings`): Three goal rings in ink tones. Hover isolates one ring and its legend, and closing all three shows a success Badge.
- [Boarding Pass](/docs/components/boarding-pass) (Free, `npx shadcn add @fetaui/boarding-pass`): A flight pass as an inset card over a stub. The Badge stamps a new status and the field that changed sits in a chip.
- [Card Flip](/docs/components/card-flip) (Free, `npx shadcn add @fetaui/card-flip`): A ticket that turns in 3D. Both sides are the same size, and a shade peaks halfway round.
- [Card Stack](/docs/components/card-stack) (Free, `npx shadcn add @fetaui/card-stack`): A fanned stack of prints. Drag the top card to skip, or open it for specs and Add to cart.
- [Currency Transfer](/docs/components/currency-transfer) (Free, `npx shadcn add @fetaui/currency-transfer`): A money transfer and its steps: recipient, amount, and a timeline that ticks in sequence.
- [Lightbox Grid](/docs/components/lightbox-grid) (Free, `npx shadcn add @fetaui/lightbox-grid`): A photo grid that opens into a viewer. The photo zooms out of its tile and returns to it.
- [Liquid Gauge](/docs/components/liquid-gauge) (Free, `npx shadcn add @fetaui/liquid-gauge`): A quota as liquid in a circle: it rises to its level, sloshes and settles.
- [Now Playing](/docs/components/now-playing) (Free, `npx shadcn add @fetaui/now-playing`): A music player on the Card tray, with an equalizer, live progress and a compact mini player.
- [Notification Stack](/docs/components/notification-stack) (Free, `npx shadcn add @fetaui/notification-stack`): Notifications as inset cards on the tray. They fan when collapsed, list when expanded, and swipe away.
- [Page Flip](/docs/components/page-flip) (Free, `npx shadcn add @fetaui/page-flip`): A book you leaf through, like a menu or a lookbook: spreads on Web and one page at a time on Mobile.
- [Receipt Printer](/docs/components/receipt-printer) (Free, `npx shadcn add @fetaui/receipt-printer`): A receipt that feeds out of a slot line by line, hangs, and tears off on a pull.
- [Activity Terrain](/docs/components/activity-terrain) (Free, `npx shadcn add @fetaui/activity-terrain`): A contribution grid in five ink steps that rises into an isometric terrain.
- [Bento Widget](/docs/components/bento-widget) (Free, `npx shadcn add @fetaui/bento-widget`): One dashboard tile in three sizes: Revenue, Active users, Activity, Notes, Uptime and Storage, in ink steps.
- [Bento Grid](/docs/components/bento-grid) (Free, `npx shadcn add @fetaui/bento-grid`): Bento Widgets on the Soft tray with 4 px gutters, for dashboards people arrange themselves.
- [Rail Card](/docs/components/rail-card) (Free, `npx shadcn add @fetaui/rail-card`): A trip card for horizontal rails: a scene, a nights tag, a heart that saves, then title, place, rating and the total.
- [Promo Card](/docs/components/promo-card) (Free, `npx shadcn add @fetaui/promo-card`): One offer in a quiet spot: brand on the tray, the offer in an inset card and one Primary Pill Button.
- [Card Field](/docs/components/card-field) (Free, `npx shadcn add @fetaui/card-field`): A card payment in one field. Pay stays disabled until number, expiry and code are all valid.
- [Cookie Banner](/docs/components/cookie-banner) (Free, `npx shadcn add @fetaui/cookie-banner`): Asks once at the bottom of the page. Reject all and Accept all carry the same weight.
- [Cookie Preferences](/docs/components/cookie-preferences) (Free, `npx shadcn add @fetaui/cookie-preferences`): Choose which optional cookies run. A popover on Web and a bottom sheet on Mobile.
- [Account Health](/docs/components/account-health) (Free, `npx shadcn add @fetaui/account-health`): A customer health card: score gauge, renewal countdown, five signals, an AI risk summary and the next step.

### Blocks

- [Airplane - scroll animation](/docs/components/exploded-airplane) (Pro, needs a Pro key, see [Pricing](/pricing)): A line art jet drawn in WebGL that comes apart as you scroll and floats in the air. Drag to look around it.
- [Patch Panel - scroll animation](/docs/components/exploded-patch-panel) (Pro, needs a Pro key, see [Pricing](/pricing)): A 2U patch panel in isometric that comes apart as you scroll: the cables unplug and float out, the faceplate lifts off the jacks, and the rear cable bar drops back.
- [Keyboard - scroll animation](/docs/components/exploded-keyboard) (Pro, needs a Pro key, see [Pricing](/pricing)): A 65% keyboard in isometric line art that comes apart as you scroll: keycaps, switches, plate, PCB and case.
- [Footer](/docs/components/footer) (Pro, needs a Pro key, see [Pricing](/pricing)): A page footer: a quote that writes itself in a handwriting face, two hands reaching for each other in live ASCII, links whose labels resolve out of noise on hover, a credit and an edge to edge wordmark cut by the bottom edge.
- [App Download Footer](/docs/components/app-download-footer) (Pro, needs a Pro key, see [Pricing](/pricing)): A display line, two download buttons and the requirements beside an app tile whose heading arrow turns to face the pointer, then three link columns and a bottom bar.
- [Statement Footer](/docs/components/statement-footer) (Pro, needs a Pro key, see [Pricing](/pricing)): A question set in display type that answers the pointer like a reading light, a brief button and a copy email button, then name, links, a live local clock and legal links.
- [Watermark Footer](/docs/components/watermark-footer) (Pro, needs a Pro key, see [Pricing](/pricing)): Brand and tagline, two link columns and a get in touch block, above the brand word drawn in live characters across the full width on a horizon line. It rises and resolves as it scrolls into view, and answers the pointer anywhere over the footer.
- [Newsletter Footer](/docs/components/newsletter-footer) (Pro, needs a Pro key, see [Pricing](/pricing)): A newsletter footer set as type: one display sentence with the email field inside it, the last three issues as quiet rows that show an excerpt on hover, and one line of links.
- [Studio Footer](/docs/components/studio-footer) (Pro, needs a Pro key, see [Pricing](/pricing)): A studio sign off: a display line, the email at display size with a quiet copy action and a magnetic button, an index of recent work whose preview trails the pointer, and one mono line with the local time.
- [Dispatch Footer](/docs/components/dispatch-footer) (Pro, needs a Pro key, see [Pricing](/pricing)): A freight operator footer: a ticker bar, socials, a link grid and payments, the work by tab in a drifting marquee, the home port and desk on a dotted world map, and a dotted wordmark that scatters around the pointer.
- [Mono Footer](/docs/components/mono-footer) (Pro, needs a Pro key, see [Pricing](/pricing)): A developer kit footer as a terminal session: the about text, a subscribe prompt and the link lists type themselves out, then a prompt waits with a blinking cursor.
- [Grid Wordmark Footer](/docs/components/grid-wordmark-footer) (Pro, needs a Pro key, see [Pricing](/pricing)): A ruled grid of statement, link and contact cells over a wordmark built from a live grid of cells. A lens under the pointer carves the letters and lights the grid.
- [Logistics Footer](/docs/components/logistics-footer) (Pro, needs a Pro key, see [Pricing](/pricing)): A live shipment tracker across the top, with the route set large, stop cards and a ship you can drag along its rail, then links, office, contact and payment details, the work by tab and a dotted wordmark cropped by the bottom edge.
- [Landscape Footer](/docs/components/landscape-footer) (Pro, needs a Pro key, see [Pricing](/pricing)): Brand, pitch and three link columns over a light watercolor of farmland that paints itself in the first time it scrolls into view.
- [Directory Footer](/docs/components/directory-footer) (Pro, needs a Pro key, see [Pricing](/pricing)): A typeset index: a large promise and an A to Z strip, then numbered sections of entries with dotted leaders and counts. A letter brings its entries forward and quiets the rest.
- [Clock Footer](/docs/components/clock-footer) (Pro, needs a Pro key, see [Pricing](/pricing)): A large headline over four analog city clocks with ticking second hands. Point at a dial to wake it, or drag across the row to scrub time for every city at once.
- [Gradient Footer](/docs/components/gradient-footer) (Pro, needs a Pro key, see [Pricing](/pricing)): A slow colour mesh that leans toward the pointer, with the tagline, a tour button and an oversized wordmark set into its lower edge, then four link columns and legal links.
- [Link Rows Footer](/docs/components/link-rows-footer) (Pro, needs a Pro key, see [Pricing](/pricing)): A large call to start with download Buttons, then big numbered rows for help, contact, social and legal. Ink rises into a row under the pointer and its links come forward.
- [Dot Field](/docs/components/dot-field) (Pro, needs a Pro key, see [Pricing](/pricing)): A halftone membrane of dots that follow slow noise, with a wake on a fast swipe and a shockwave on click.
- [Background Paths](/docs/components/background-paths) (Pro, needs a Pro key, see [Pricing](/pricing)): A ribbon of 42 hairlines that keeps flowing and parts around the cursor.
- [Shape Hero](/docs/components/shape-hero) (Pro, needs a Pro key, see [Pricing](/pricing)): A hero where pills and dots drop into a pile you can grab and throw.
- [Flow Field](/docs/components/flow-field) (Pro, needs a Pro key, see [Pricing](/pricing)): About 700 particles ride a noisy wind that parts around the cursor and swirls in its wake.
- [Topo Background](/docs/components/topo-background) (Pro, needs a Pro key, see [Pricing](/pricing)): A living contour map. The cursor raises a hill and a click drops a ripple.
- [Drape Background](/docs/components/drape-background) (Pro, needs a Pro key, see [Pricing](/pricing)): A hanging curtain drawn as a lit heightfield. Tight pleats and small pinches gather at the rod and fan out into billows of uneven width, with a few sharp diagonal crease breaks and a turned hem that hangs lower where a fold comes forward.
- [Halftone Background](/docs/components/halftone-background) (Pro, needs a Pro key, see [Pricing](/pricing)): A print accurate halftone screen under a slowly moving light. Round dots grow, join at 50% and become round holes in the shadows, and their area is solved in linear light so tones read true from afar.
- [Ink Background](/docs/components/ink-background) (Pro, needs a Pro key, see [Pricing](/pricing)): A headline written in ink, run as a real fluid. Stir it and it gathers back into words.
- [Caustics Background](/docs/components/caustics-background) (Pro, needs a Pro key, see [Pricing](/pricing)): Sunlight on a pool floor, a drifting web of light that bends around rings you drop.
- [Rain Glass Background](/docs/components/rain-glass-background) (Pro, needs a Pro key, see [Pricing](/pricing)): Rain on a window over a soft, out of focus view. Beads of every size refract the view, flipped and shrunk as a real drop does, over a fine mist and patchy condensation. Drag to wipe the glass.
- [Particles](/docs/components/particles) (Pro, needs a Pro key, see [Pricing](/pricing)): A field of drifting dots that lean away from the pointer.
- [Network Graph](/docs/components/network-graph) (Pro, needs a Pro key, see [Pricing](/pricing)): Groups of items as a network on a slowly turning sphere, over a layer of drifting motes. Drag to turn it, point at a node to light its links.
- [ASCII Art](/docs/components/ascii-art) (Pro, needs a Pro key, see [Pricing](/pricing)): Any picture as live characters, each picked by its brightness, that reveal from a point, flicker now and then and scramble under the pointer.
- [Progressive Blur](/docs/components/progressive-blur) (Pro, needs a Pro key, see [Pricing](/pricing)): Edges that blur from 0 to 10 px, so content scrolls into a soft haze at the top, bottom or both.
- [Weather Sky](/docs/components/weather-sky) (Pro, needs a Pro key, see [Pricing](/pricing)): One sky for every kind of weather: an aurora night, rain, snow, clouds, sun rays and sunset. Scrolling turns the weather, and the pointer plays with it.
- [Cylinder Carousel](/docs/components/cylinder-carousel) (Pro, needs a Pro key, see [Pricing](/pricing)): Items rolling around a cylinder: inside it the centre is smallest and dipped; outside it the centre is largest and raised.
- [Infinite Masonry](/docs/components/infinite-masonry) (Pro, needs a Pro key, see [Pricing](/pricing)): A scrollable wall of tiles placed from a design and scaled with the box. Under 640 px they flow into two columns.
- [Pixel Reveal](/docs/components/pixel-reveal) (Pro, needs a Pro key, see [Pricing](/pricing)): A photo that clears in a ripple of tiles and then takes on its colour.
- [Reveal Image](/docs/components/reveal-image) (Pro, needs a Pro key, see [Pricing](/pricing)): A photo that resolves out of a dither field the first time it scrolls into view, then assembles into colour.
- [Inline Video](/docs/components/inline-video) (Pro, needs a Pro key, see [Pricing](/pricing)): A muted, looping clip that fetches nothing until it nears the screen and plays only while in view.
- [OTP Lock](/docs/components/otp-lock) (Pro, needs a Pro key, see [Pricing](/pricing)): A padlock over a code field. It opens when the code is right.
- [OTP Vault](/docs/components/otp-vault) (Pro, needs a Pro key, see [Pricing](/pricing)): A code picked from a turning sphere of digits, or dialled on tumbler wheels.
- [Timezone Planner](/docs/components/timezone-planner) (Pro, needs a Pro key, see [Pricing](/pricing)): Find a meeting time across zones. Each ring is one person's day.
- [People Directory](/docs/components/people-directory) (Pro, needs a Pro key, see [Pricing](/pricing)): Search, team tabs, a list with presence and a detail pane with a copy email button.
- [Roles and Permissions](/docs/components/roles-and-permissions) (Pro, needs a Pro key, see [Pricing](/pricing)): A permission matrix: roles as columns, grouped permissions with mixed group rows, a locked Owner column, and held changes with Save.
- [Profile](/docs/components/profile) (Pro, needs a Pro key, see [Pricing](/pricing)): A profile page: cover, avatar, bio, links and counts, with tabs between an activity feed and projects.
- [Seat Map](/docs/components/seat-map) (Pro, needs a Pro key, see [Pricing](/pricing)): A cinema seat picker. Click a seat or drag along a row, with priced tiers, a lone seat warning and a booking limit.
- [Kanban](/docs/components/kanban) (Pro, needs a Pro key, see [Pricing](/pricing)): A board of Kanban Columns you drag Kanban Cards between, in Issues, Tasks and Points styles, with a full keyboard path.
- [Webhook Tester](/docs/components/webhook-tester) (Pro, needs a Pro key, see [Pricing](/pricing)): Send a signed test event, check the JSON, and follow signed, sent and response steps.
- [Invoice Editor](/docs/components/invoice-editor) (Pro, needs a Pro key, see [Pricing](/pricing)): Editable line items with quantity, rate and amount, live totals and draft actions.
- [Billing Overview](/docs/components/billing-overview) (Pro, needs a Pro key, see [Pricing](/pricing)): Billing settings: current plan, card on file, usage meters and invoices.
- [Usage Overview](/docs/components/usage-overview) (Pro, needs a Pro key, see [Pricing](/pricing)): Spend against budget with a projection, the plan, and metered usage with warning and danger states.
- [Section Heading](/docs/components/section-heading) (Pro, needs a Pro key, see [Pricing](/pricing)): The heading every template block opens with: eyebrow, title, subtitle and actions.
- [Pricing Card](/docs/components/pricing-card) (Pro, needs a Pro key, see [Pricing](/pricing)): A plan card with name, price, description, features and one Button.
- [Plan Option](/docs/components/plan-option) (Pro, needs a Pro key, see [Pricing](/pricing)): A selectable plan or pack. Selected washes the Row and rings the Card.
- [Hero · Demo](/docs/components/hero-demo) (Pro, needs a Pro key, see [Pricing](/pricing)): Landing hero with a live agent demo, from the request to the approval.
- [Features · Control](/docs/components/features-control) (Pro, needs a Pro key, see [Pricing](/pricing)): Five feature cells on a 4% tray about staying in control of agents.
- [Features · Details](/docs/components/features-details) (Pro, needs a Pro key, see [Pricing](/pricing)): Four feature cells for the small details: sign-ins, menu bar, shortcut and sharing.
- [Use Cases · Cards](/docs/components/use-cases-cards) (Pro, needs a Pro key, see [Pricing](/pricing)): Three real tasks with their agents, time, a small visual and the result.
- [Use Cases · Grid](/docs/components/use-cases-grid) (Pro, needs a Pro key, see [Pricing](/pricing)): A featured use case with stats, image cards and compact thumbnails.
- [Testimonials · Cards](/docs/components/testimonials-cards) (Pro, needs a Pro key, see [Pricing](/pricing)): Three short reviews with stars and authors, plus the store rating.
- [FAQ · Split](/docs/components/faq-split) (Pro, needs a Pro key, see [Pricing](/pricing)): Questions on the right, heading and support note on the left.
- [FAQ · Numbered](/docs/components/faq-numbered) (Pro, needs a Pro key, see [Pricing](/pricing)): Centered heading and numbered questions.
- [FAQ · Boxed](/docs/components/faq-boxed) (Pro, needs a Pro key, see [Pricing](/pricing)): Centered heading and boxed questions.
- [Logo Cloud · Grid](/docs/components/logo-cloud-grid) (Pro, needs a Pro key, see [Pricing](/pricing)): A caption beside a wrapping grid of logo placeholders.
- [Showcase · Craft](/docs/components/showcase-craft) (Pro, needs a Pro key, see [Pricing](/pricing)): Five interaction pieces with their reason and timing.
- [Showcase · Media Bento](/docs/components/showcase-media-bento) (Pro, needs a Pro key, see [Pricing](/pricing)): A bento of media, live stats and a voice player.
- [Models · Row](/docs/components/models-row) (Pro, needs a Pro key, see [Pricing](/pricing)): Six model tiles with vendor and context size.
- [Features · Pillars](/docs/components/features-pillars) (Pro, needs a Pro key, see [Pricing](/pricing)): Four product pillars, each with a small visual.
- [Steps · How It Works](/docs/components/steps-how-it-works) (Pro, needs a Pro key, see [Pricing](/pricing)): Three image step cards with checklists and a call to action.
- [Hero · Media](/docs/components/hero-media) (Pro, needs a Pro key, see [Pricing](/pricing)): A centered hero with feature pills, a hint line and a large media frame whose picture and caption follow the picked pill.
- [Hero · Globe](/docs/components/hero-globe) (Pro, needs a Pro key, see [Pricing](/pricing)): A regions hero: eyebrow, title, lead and Buttons beside a dotted globe whose routes carry packets between three region chips.
- [Hero · Product Stage](/docs/components/hero-product-stage) (Pro, needs a Pro key, see [Pricing](/pricing)): Title and Buttons over the app on a 4% stage: top bar, sidebar, grouped issues and a detail panel.
- [Hero · Agent Graph](/docs/components/hero-agent-graph) (Pro, needs a Pro key, see [Pricing](/pricing)): Title and Buttons over a run bar and a canvas of agent nodes and connectors.
- [Hero · Analytics](/docs/components/hero-analytics) (Pro, needs a Pro key, see [Pricing](/pricing)): Title, lead and Buttons over a dashboard card with stats and deltas, range Tabs and an area chart with a launch tooltip.
- [Hero · Terminal](/docs/components/hero-terminal) (Pro, needs a Pro key, see [Pricing](/pricing)): Title and Buttons over a terminal window with a deploy run.
- [Hero · Breathe](/docs/components/hero-breathe) (Pro, needs a Pro key, see [Pricing](/pricing)): A centered wellness hero: rings with a progress arc and countdown, breathing phases, pattern Tabs and Buttons.
- [Studio · Hero](/docs/components/studio-hero) (Pro, needs a Pro key, see [Pricing](/pricing)): Studio mark and availability, an oversized title, image and ruled columns.
- [Studio · Work Index](/docs/components/studio-work-index) (Pro, needs a Pro key, see [Pricing](/pricing)): Title and Outline Button over a media card and a ruled client list.
- [About · Intro](/docs/components/about-intro) (Pro, needs a Pro key, see [Pricing](/pricing)): A display title, lead, paragraphs and contact details.
- [About · Principles](/docs/components/about-principles) (Pro, needs a Pro key, see [Pricing](/pricing)): Three numbered working principles.
- [About · Services](/docs/components/about-services) (Pro, needs a Pro key, see [Pricing](/pricing)): Three service cards on a 4% tray.
- [About · Experience](/docs/components/about-experience) (Pro, needs a Pro key, see [Pricing](/pricing)): Experience rows beside tool chips.
- [Pricing · Services](/docs/components/pricing-services) (Pro, needs a Pro key, see [Pricing](/pricing)): Three service plans with the Featured one first.
- [Pricing · Plans](/docs/components/pricing-plans) (Pro, needs a Pro key, see [Pricing](/pricing)): Three subscription plans with the Popular one in the middle.
- [Pricing · Layers](/docs/components/pricing-layers) (Pro, needs a Pro key, see [Pricing](/pricing)): Plans as stacked layers beside plan details and Buttons.
- [Pricing · Tiers](/docs/components/pricing-tiers) (Pro, needs a Pro key, see [Pricing](/pricing)): Section Heading with billing Tabs, three Pricing Cards and a seat calculator.
- [Pricing · Compare](/docs/components/pricing-compare) (Pro, needs a Pro key, see [Pricing](/pricing)): A plan comparison table with plan headers and feature rows.
- [Pricing · Credits](/docs/components/pricing-credits) (Pro, needs a Pro key, see [Pricing](/pricing)): A credit purchase card: balance, packs and a summary.
- [Pricing · Single](/docs/components/pricing-single) (Pro, needs a Pro key, see [Pricing](/pricing)): One plan on a 4% tray with billing Tabs, price and features.
- [Upgrade · Summary](/docs/components/upgrade-summary) (Pro, needs a Pro key, see [Pricing](/pricing)): An upgrade review card: plan path, Plan Option cards, Usage Meters and totals.
- [App · Team Calendar](/docs/components/app-team-calendar) (Pro, needs a Pro key, see [Pricing](/pricing)): A team calendar app with sidebar, Calendar and a day, week or month of Calendar Events.

## Optional

- [llms-full.txt](/llms-full.txt): every component page as prose, with when to use, props, keyboard and accessibility
- [Blocks](/blocks): page sections (Pro)
- [Templates](/templates): full page templates (Pro)