Button
Displays a button or a component that looks like a button.
Components
Every card runs the real component. 106 are free under MIT, 36 come with Blank Pro.
Forms31
Button Group
Joins related buttons into one segmented control.
Calendar
A date field for picking single dates, ranges and multiples.
Checkbox
A control for a single on/off choice, with an indeterminate state.
Chipnew
A compact, selectable tag with an optional avatar and a dismiss button.
Color Pickernew
A popover with a saturation area, hue slider, hex/RGB/HSL input, presets and an eyedropper where the browser has one.
Combobox
An input that filters a list and lets the user pick from it.
Copy Buttonnew
Copies text to the clipboard and confirms it with an icon morph, a tooltip and a live-region announcement.
Field
Labels, descriptions and errors for any form control.
File Uploadnew
A dropzone with a file list, previews, upload progress, removal and accept/size/count validation.
Form
react-hook-form bindings for the field primitives.
Input
A single-line text field.
Input Filenew
A drag-and-drop file field with previews, built on the native file input.
Input Group
Attaches icons, text and buttons to an input.
Input Otp
A field for one-time codes, one character per slot.
Input Pricenew
A currency amount field that accepts only digits and a capped decimal.
Label
An accessible label for a form control.
Multi Selectnew
A searchable multi-select built on cmdk, with badges in the field, grouped options, a create row and a selection limit.
Native Select
The platform select element, styled to match the system.
Quantity Steppernew
A number field with decrement and increment buttons, clamped to a range.
Radio Group
A set of options where exactly one can be selected.
Ratingnew
A star rating with radio-group semantics, optional half values and a read-only mode.
Select
A trigger and listbox for choosing one option.
Slider
A control for picking a value, or a range, from an interval.
Social Button
A sign-in button carrying a provider's mark.
Switch
A control that toggles a setting on or off immediately.
Tags Inputnew
A text field that turns entries into removable tags: Enter or comma adds, Backspace removes, paste splits.
Textarea
A multi-line text field.
Time Pickernew
A segmented time field: hours, minutes, optional seconds and AM/PM, each a keyboard-steppable spin button.
Toggle
A two-state button that stays pressed.
Toggle Group
A set of toggles that act as one control.
Overlays11
Alert Dialog
A modal that interrupts the user and asks for confirmation.
Command
A searchable command palette.
Context Menu
A menu opened by right-clicking an element.
Dialog
A window overlaid on the page, holding focus until dismissed.
Drawer
A panel that slides in from an edge of the screen.
Dropdown Menu
A menu of actions opened by a trigger.
Hover Card
A card that previews content when a link is hovered.
Menubar
A horizontal bar of application menus.
Popover
A floating panel anchored to a trigger.
Sheet
A dialog that slides in from the side of the screen.
Tooltip
A short hint shown on hover or focus.
Navigation6
Breadcrumb
Shows where the current page sits in the hierarchy.
Navigation Menu
A site navigation menu with expandable panels.
Pagination
Navigation between pages of a result set.
Sidebar
A collapsible application sidebar with its own layout primitives.
Steppernew
Numbered steps for a multi-part flow, horizontal or vertical, with completed, active, loading and disabled states.
Tabs
Panels of content shown one at a time.
Data display21
Accordion
A vertically stacked set of headings that each reveal a section of content.
Aspect Ratio
Constrains its content to a fixed width-to-height ratio.
Avatar
An image with a text fallback, for representing a user.
Badge
A small label for status, counts and categories.
Bar Listnew
Ranked horizontal bars with a label and a formatted value on each row.
Card
A raised surface that groups related content and actions.
Carousel
A horizontally scrollable set of slides with previous and next controls.
Chart
Recharts primitives wired to the system's theme and tooltip.
Code Blocknew
A code panel with tabs, line numbers, highlighted lines and a copy button.
Collapsible
Shows and hides a section of content.
Data GridPronew
A TanStack Table v9 grid on Blank's Table: sortable column headers with menus, debounced global search, column visibility, shift-click range selection, pagination, a density toggle, and skeleton, empty and no-results states.
Expandablenew
A surface that springs open in place to reveal more content.
File Treenew
An accessible file and folder tree with arrow-key navigation, type-ahead, selection and animated folders.
Item
A row that pairs media, text and actions.
KanbanPronew
A drag-and-drop board of sortable columns and cards: pointer, touch and keyboard sensors, screen reader announcements that name cards and columns, Escape restores a cancelled move, and a lifted overlay copy. Controlled through a map of columns to items.
Kbd
Renders a keyboard key or a chord.
Revenue CardPronew
A dashboard stat card with a value, a trend and a sparkline.
Snippetnew
An install command with package-manager tabs and a copy button.
Table
A data table with header, body and footer sections.
Timelinenew
A vertical or horizontal sequence of dated events with indicators, titles and content.
Trackernew
An uptime strip of status blocks with tooltips and keyboard navigation.
Feedback7
Alert
A short, prominent message about the state of the page.
Bannernew
A page-level announcement strip with actions and a dismiss button.
Empty
A placeholder for a view with nothing in it yet.
Progress
Shows completion of a task.
Skeleton
A placeholder shown while content loads.
Sonner
Toast notifications.
Spinner
An indeterminate loading indicator.
Layout4
Direction
Sets text direction for every component below it.
Resizable
Panels the user can resize by dragging a handle.
Scroll Area
A scrollable region with a styled scrollbar.
Separator
A line that separates content, horizontally or vertically.
Bento25
Bento ActionsPronew
A bento visual: a context menu of inbox actions with a collaborator's cursor moving through it.
Bento ApprovalPronew
A bento visual: an app tile, a timer that runs to the decision time and a status pill that lands when it stops.
Bento Checklistnew
A bento visual: a cascade of checks that tick one by one on view, the latest lifting off the stack.
Bento CodePronew
A bento visual: an editor window with line numbers where a query types into the find field and a highlight scans down to the match.
Bento CommandPronew
A bento visual: a command palette lit from above. The query types itself, the actions settle in and the selection follows hover.
Bento DeployPronew
A bento visual: a success toast that drops in with a drawn check, over a row of stats that count up.
Bento DirectoryPronew
A bento visual: a workspace search that types its query, settles people and companies under their groups and lights the matching row.
Bento GaugePronew
A bento visual: a speedometer whose needle sweeps to a value over a tick ring, with a readout that counts up. Ink by default; follows the card's --bento-light when set.
Bento Gridnew
The Blank bento system: a six-column grid and a lit card with a visual stage, light and copy.
Bento Growthnew
A bento visual: a big number counting up in a framed display, with a pill over it and rails out to two lamps.
Bento HealthPronew
A bento visual: a system health panel with counting numbers, bars filling over a hatched track and a live status pill.
Bento HubPronew
A bento visual: a central AI node wired to capability chips by lines that draw themselves in.
Bento InboxPronew
A bento visual: a notification inbox with counted tabs running off the card, where new notifications land on top while it is on screen.
Bento IntegrationsPronew
A bento visual: a list of integrations where one connects, its button running from Connect to Connected and lights up.
Bento Orbit IconPronew
A bento visual: one large round icon on concentric rings with a light that runs around its rim.
Bento PaymentsPronew
A bento visual: a hub with up to five payment methods wired into it and payments pulsing along the wires.
Bento PipelinePronew
A bento visual: a URL, a passing check and a terminal command joined by a line that draws itself, with the command typing out last.
Bento PlannerPronew
A bento visual: a daily planner board whose top card lifts off its slot and tilts in depth, with status badges, assignees and progress.
Bento PlansPronew
A bento visual: a plan picker built on Radio Group whose selection travels to the chosen plan and lights it up.
Bento Presencenew
A bento visual: a team list hanging from a lit edge, with a pill counting who is online and live status dots.
Bento PromptPronew
A bento visual: an AI prompt box with its mode menu open and a cursor choosing a mode, over a soft bloom of light.
Bento SchedulePronew
A bento visual: a term track that fills stop by stop to a check, the chosen term and a note hanging off it.
Bento ShieldPronew
A bento visual: a shield with a lock that snaps shut as data runs in from two wired nodes.
Bento TemplatesPronew
A bento visual: a template picker where the hovered option lifts toward the cursor, with a window peeking out behind.
Bento WorkflowPronew
A bento visual: trigger, condition and action nodes on a rail, with a marker that runs down and lifts each node in turn.
Animations19
Animated Backgroundnew
A highlight that slides behind the active or hovered item: tabs, menus, segmented controls.
Animated Beamnew
A curved path between two elements with a beam of light running along it.
Blur Fadenew
Fades content in from a blur and a small offset, on mount or on scroll.
Dot Patternnew
A dot grid for section backgrounds, with an optional slow pulse.
Dynamic IslandPronew
A pill that springs between size presets (default, compact, large, tall or your own) with a content view per size that blurs in once the surface has room, controlled or uncontrolled.
Floating PanelPronew
A button that morphs into a floating panel and back.
Glide MenuPronew
A menu whose submenus open in place: panels glide with a blur, the height follows, nested panels can filter.
Grid Patternnew
A static SVG grid for section backgrounds, with optional highlighted cells.
Marqueenew
An endless horizontal or vertical strip of content with edge fade, reverse, pause on hover, an off-screen pause and a reduced-motion pause.
Morph SurfacePronew
A compact dock that unfolds into a panel on the same surface.
Morphing DialogPronew
A card that grows into a dialog with a shared layout animation (image, title and subtitle travel with it) on Radix Dialog for focus trap, Escape, outside click, scroll lock and focus return.
Noise Texturenew
A static SVG film-grain overlay for flat fills and gradients.
Number Tickernew
Counts up to a number on a spring, with tabular digits.
Progressive Blurnew
A blur that ramps up toward the edge of a scrolling container.
Scroll Progressnew
A hairline that fills as the page or a container scrolls.
Scroll Text RevealPronew
Text that brightens word by word or letter by letter as it scrolls through view: in flow or pinned, against the window or any scroll container, with a fade or blur-to-focus effect and a static fallback for reduced motion.
Shiny Textnew
Muted text with a highlight sweeping across it.
Text Animatenew
Reveals text by word, character or line with ten motion presets.
Text RotatePronew
Rotates through texts with staggered per-character, per-word or per-line animation: six presets, custom keyframes, a controllable index and a ref with next, previous, jumpTo, pause and play. Pauses offscreen, in background tabs and on hover.
Marketing9
Announcementnew
A pill above a hero headline: an optional tag, a title and an arrow, rendered as a link with asChild.
Compare Slidernew
A before/after comparison with a draggable divider, arrow-key control and a vertical option.
Feature Cardnew
A plain feature: an icon, a title and a line of copy, on a raised card or straight on the page.
Floating NavbarPronew
A pill navbar that hides on scroll down, returns on scroll up, tightens past the fold and glides an active pill between links.
Hero Video DialogPronew
A video thumbnail with a play button that opens an accessible dialog player: morphs out of the poster or enters with one of eight animations, plays embeds or video files, and shows the poster until the player is ready.
Preview Card SlideshowPronew
A cover image that scrubs through a gallery as the pointer moves across it.
Pricing Cardnew
A plan card with a price, a feature list and a call to action.
Product CardPronew
A storefront card for a product: media, price, badges and actions.
Task CardPronew
A board card for a task with priority, labels, assignees and meta.
Mockups9
Android Framenew
A Pixel-style handset drawn in CSS with a punch-hole camera and right-side buttons, at true proportions at any width.
Browser Windownew
Browser chrome around a screenshot or a live page, for product visuals.
Code Windownew
Editor chrome with switchable file tabs and numbered lines, with no syntax-highlighting dependency.
Device Stacknew
The hero composition: a MacBook with an iPhone standing in front of one corner, each taking its own screen content.
iPad Framenew
A tablet drawn in CSS with even bezels, in portrait or landscape through the orientation prop.
iPhone Framenew
A modern iPhone drawn in CSS: titanium rim, even bezels, Dynamic Island and side buttons, at true proportions at any width.
MacBook Framenew
An open laptop drawn in CSS (lid, hinge and base) around a 16:10 screen for screenshots or live UI.
Safari Framenew
macOS Safari window chrome (traffic lights, address field with lock and host, optional tab strip) around a viewport for screenshots, video or live UI.
Terminal Windownew
Terminal chrome with a title bar, prompt-led command lines, coloured output lines and an optional typing animation.