Primitives
60
AccordionFree
A vertically stacked set of interactive headings that each reveal a section of content.
AlertFree
Displays a callout for user attention, with an optional icon, title and description.
- Alert Dialog
Alert DialogFree
A modal dialog that interrupts the user with important content and expects a response.
- Aspect Ratio
Aspect RatioFree
Displays content within a desired ratio.
AttachmentFree
A file chip for composers and messages, with media, title, description, actions and upload states.
- Avatar
AvatarFree
An image element with a fallback for representing the user, with sizes, a status badge and groups.
BadgeFree
Displays a badge or a component that looks like a badge.
- Breadcrumb
BreadcrumbFree
Displays the path to the current resource using a hierarchy of links.
BubbleFree
A chat bubble with variants, alignment, grouping and reactions.
- Button
ButtonFree
Displays a button or a component that looks like a button.
- Button Group
Button GroupFree
A container that groups related buttons together with consistent styling.
CalendarFree
A date field component that allows users to enter and edit a date.
CardFree
Displays a card with header, content and footer.
- Carousel
CarouselFree
A carousel with motion and swipe built using Embla.
- Chart
ChartFree
Beautiful charts built using Recharts, themed with CSS variables.
CheckboxFree
A control that allows the user to toggle between checked and not checked.
CollapsibleFree
An interactive component which expands and collapses a panel.
- Command
CommandFree
Fast, composable, unstyled command menu for React.
- Context Menu
Context MenuFree
Displays a menu of actions or functions, triggered by a right click or long press.
Data TableFree
A sortable, filterable, paginated data table with row selection and column visibility, built with TanStack Table and the Table primitive.
- Date Picker
Date PickerFree
A date picker and a date range picker composed from Popover, Button and Calendar.
- Dialog
DialogFree
A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
- Drawer
DrawerFree
A drawer component for React, built on Vaul.
- Dropdown Menu
Dropdown MenuFree
Displays a menu to the user, such as a set of actions or functions, triggered by a button.
EmptyFree
Use the Empty component to display an empty state.
FormFree
Building forms with React Hook Form and Zod, wired to accessible labels, descriptions and errors.
- Hover Card
Hover CardFree
For sighted users to preview content available behind a link.
- Input
InputFree
Displays a form input field or a component that looks like an input field.
Input GroupFree
Display additional information or actions alongside an input or textarea.
- Input OTP
Input OTPFree
Accessible one-time password component with copy paste functionality.
ItemFree
A versatile component for displaying content with media, title, description and actions.
- Label
LabelFree
Renders an accessible label associated with controls.
- Menubar
MenubarFree
A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
MessageFree
Lays out one chat turn (avatar, header, bubbles and footer) aligned to either side.
Message ScrollerFree
A chat transcript scroller that stays pinned to the latest message and offers a jump-to-latest button.
- Native Select
Native SelectFree
A styled native HTML select element with consistent design.
- Navigation Menu
Navigation MenuFree
A collection of links for navigating websites.
- Pagination
PaginationFree
Pagination with page navigation, next and previous links.
- Popover
PopoverFree
Displays rich content in a portal, triggered by a button.
- Progress
ProgressFree
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
QuestionnaireFree
A step-by-step question flow with single and multiple choice answers, keyboard shortcuts, skip and validation.
Radio GroupFree
A set of checkable buttons, known as radio buttons, where no more than one can be checked at a time.
- Resizable
ResizableFree
Accessible resizable panel groups and layouts with keyboard support.
Scroll AreaFree
Augments native scroll functionality for custom, cross-browser styling.
- Select
SelectFree
Displays a list of options for the user to pick from, triggered by a button.
SeparatorFree
Visually or semantically separates content.
- Sheet
SheetFree
Extends the Dialog component to display content that complements the main content of the screen.
SidebarFree
A composable, themeable and customizable sidebar component.
- Skeleton
SkeletonFree
Use to show a placeholder while content is loading.
- Slider
SliderFree
An input where the user selects a value from within a given range.
- Sonner
SonnerFree
An opinionated toast component for React. This is the toast primitive for Radix-based projects.
- Switch
SwitchFree
A control that allows the user to toggle between checked and not checked.
TableFree
A responsive table component.
TabsFree
A set of layered sections of content, known as tab panels, that are displayed one at a time.
- Textarea
TextareaFree
Displays a form textarea or a component that looks like a textarea.
- Toggle
ToggleFree
A two-state button that can be either on or off.
- Toggle Group
Toggle GroupFree
A set of two-state buttons that can be toggled on or off.
- Tooltip
TooltipFree
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
TraceFree
A compact activity log for agent and job steps, with status, timing and expandable detail.
TypographyFree
Styles for headings, paragraphs, lists, quotes, tables and inline code, written as plain Tailwind utilities.
Building blocks
8
OTP InputPro
A one-time passcode field with auto-advance and paste support.
Tag InputPro
Turn typed text into removable chips.
Password StrengthPro
A heuristic password strength meter.
Empty StateFree
A centered placeholder for screens with no content yet.
Stat CardPro
A metric card with a signed trend.
File DropzonePro
An accessible drag-and-drop file upload area.
Color SwatchPro
A palette picker of selectable color circles.
Range SliderPro
A single-thumb slider with a filled track.
Overlays and disclosure
25
Action BarPro
A floating toolbar for bulk actions that appears when items are selected, announces the count and clears with Escape.
Confirm ButtonPro
A two-press button for a small risky action: the first press arms it, the second runs it, and it disarms on timeout, blur and Escape.
Cursor TooltipPro
A tooltip that follows the pointer across a large target such as a chart bar or map region, flips at the viewport edge and appears beside the element on keyboard focus.
Data MenuPro
A dropdown menu described by data: actions, checkable items, radio groups, labels, separators and nested submenus in one array.
Dialog ProviderPro
Promise-based confirm, alert and prompt dialogs: await dialog.confirm() anywhere, with a queue so requests never overlap.
- Disclosure
DisclosurePro
A single show/hide region whose closed content stays findable: it uses hidden=until-found, so find-in-page and fragment links open it by themselves.
Editable TabsPro
Tabs the person can add and close, like editor or browser tabs, with Delete to close, neighbour focus and selection, and pinned tabs that cannot be closed.
Focus ScopePro
A focus boundary for custom panels: moves focus in on mount, optionally traps Tab, and restores focus to where it came from on unmount.
Found AccordionPro
An accordion whose closed panels stay searchable with find-in-page, with single or multiple open panels and Arrow, Home and End navigation between headers.
- Hover Menu
Hover MenuPro
A menu that opens when the mouse rests on its trigger and stays open while the pointer travels to it, with click, keyboard and touch opening it as well.
ListboxPro
An always-visible list of options with one tab stop, aria-activedescendant navigation, typeahead, grouping and single or multiple selection.
Live RegionPro
Two persistent screen-reader announcers (polite and assertive) with a useAnnounce hook that also repeats identical messages.
- Nested Dialog
Nested DialogPro
A dialog that can open another dialog on top of itself: each level keeps its own focus trap and Escape, and the covered dialog scales back and dims.
Overflow TabsPro
Tabs that never wrap or scroll: tabs that do not fit collapse into a More menu while the selected tab always stays visible.
Password RulesPro
A live requirements checklist for a new password that states met or not met in text and announces the summary only when the count changes.
Pin InputPro
A short secret code in separate masked cells with auto-advance, Backspace stepping back, arrow navigation, paste spreading and a hidden form field.
Read MorePro
Long text clamped to a set number of lines with a Read more button that appears only when the text is cut off and keeps aria-expanded in sync.
- Resizable Sheet
Resizable SheetPro
A side sheet with a draggable, keyboard-operable edge: a separator with value, min and max, logical start or end side, built on the Radix dialog.
Secret FieldPro
A read-only secret such as an API key, masked by default, with timed Reveal and Copy buttons that never reveal it and announce what happened.
Selection PopoverPro
A small toolbar that appears above text selected inside its content, keeps the selection while used and is reachable with Alt+F10.
Split ButtonPro
One main action plus a menu of related ones, as two buttons in a group: the main part acts at once, the arrow only opens the menu.
Step DialogPro
A multi-step flow in one dialog with per-step validation, a progress list, focus moved to each new step heading and a final action that locks the dialog while it runs.
- Toggletip
ToggletipPro
Help text that opens on click or tap and is announced through a live region, for the small "i" button where a hover tooltip would be unreachable on touch.
Tooltip GroupPro
A shared delay for a row of tooltips: the first one waits, its neighbours open instantly, and the group cools down when the pointer leaves.
Truncate TipPro
Single-line text that ends in an ellipsis and shows the full text in a tooltip only when it is really cut off, becoming focusable only then.
Signature
22- Image Comparison
Image ComparisonPro
A before and after comparison with a draggable divider that works as a keyboard-accessible slider, for photos, edits and redesigns.
Expandable CardPro
A card that morphs into a dialog with shared-layout motion, while Radix Dialog handles focus trapping, Escape and focus return.
Pricing TablePro
Marketing pricing tiers with a monthly and yearly switch, prices that roll digit by digit, a featured plan with a glowing ring, and included or excluded features.
- Hover Highlight
Hover HighlightPro
One highlight that glides between items as they are hovered or focused, then settles on the current item. For nav bars, menus, lists and card grids.
Sortable ListPro
A vertical list reordered by dragging a handle or entirely from the keyboard, with spring layout motion and polite screen reader announcements.
Swipe DeckPro
A stack of cards decided one at a time by dragging left or right, with buttons, arrow keys, undo and an empty state.
Hold to ConfirmPro
A button that runs its action only after being held, with a fill that sweeps across while pressed, for destructive actions without a confirmation modal.
- Morph Popover
Morph PopoverPro
A trigger button that morphs into a floating panel with a shared layout animation, for quick forms such as feedback or quick add.
Testimonial WallPro
A wall of testimonial cards in up to three columns that drift vertically at different speeds, with avatars, ratings, a pause button and a static fallback for reduced motion.
Feature TabsPro
An auto-advancing feature list with a timer bar on the active item and a crossfading media panel, built as accessible vertical tabs.
Scroll TimelinePro
A changelog or roadmap timeline whose beam fills with a gradient as you scroll, lighting each entry as it is reached, with a sticky date column on wide screens.
Mesh GradientPro
An animated mesh gradient background of soft drifting blobs that uses your theme colours by default, with optional film grain and a still fallback for reduced motion.
Filter BarPro
A toolbar for lists and tables with a search field, faceted filter popovers with counts, and the active filters as animated, removable chips.
File UploadPro
A dropzone with a full upload queue, per-file progress, cancel, retry and remove, image previews, validation messages and screen reader announcements.
- Onboarding Dialog
Onboarding DialogPro
A multi-step dialog for first-run tours and feature announcements, with a media area, direction-aware transitions, step dots and arrow key paging.
LightboxPro
A thumbnail grid that opens a full-screen viewer, zooming the image out of its thumbnail, with arrow keys, swipe, captions, a counter and a thumbnail strip.
State ViewPro
One wrapper for every state a data surface can be in, with skeleton loading, empty and filtered-empty, error with retry, offline and no-access presets, and a small async hook.
Site FooterPro
A marketing site footer with a brand block, link columns that collapse on narrow screens, a validated newsletter form, social links, legal links, a status pill and a slot for locale or theme controls.
Product TourPro
An onboarding spotlight tour. A dimmed overlay cuts out each target and glides to the next, with a step card that stays on screen and works from the keyboard.
Month Year PickerPro
A date picker whose caption drills from days to months to years, so a birthday in 1990 takes two clicks. Also picks just a month and year, with min and max limits.
Tag ComboboxPro
An accessible multi-select combobox with typeahead, inline chips, grouped and disabled options, create-on-type, selection limits and native form submission.
Form WizardPro
A multi-step form for react-hook-form and zod that validates one step at a time, focuses the first invalid field, and handles review, async submit and saved progress.
tealmac originals
14
Prism TextPro
Text filled with an animated multi-hue prism gradient driven by theme tokens.
Glow TextPro
Text with a soft, optionally pulsing coloured halo built from layered text-shadows.
Reveal TextPro
Reveals text word- or character-by-character with a staggered blurred rise.
Wave TextPro
Text whose letters bob in a travelling wave.
Flip TextPro
Reveals text by flipping each character up from its edge in sequence.
Typewriter TextPro
Types and deletes phrases in sequence with a blinking caret.
Tilt CardPro
A card that rotates in 3D toward the pointer with an optional cursor-tracking glare.
Clip CardPro
A card with a clipped silhouette, animated prism border, and a cursor-following highlight.
Spotlight CardFree
A card with a soft radial highlight that follows the pointer.
Gradient BorderPro
An animated conic prism gradient border that rotates around its content.
Magnetic ButtonPro
A button that drifts toward the pointer while hovered and springs back on leave.
Countdown TimerPro
A live days/hours/minutes/seconds countdown to a target date, accurate across tab sleeps.
Command PalettePro
A ⌘K spotlight dialog with fuzzy search, grouped commands, full keyboard navigation, match highlighting, and motion-powered open/close transitions.
KbdFree
A keyboard key primitive for rendering shortcuts, with size variants and a KbdGroup helper for multi-key combinations.
Forms and feedback
31
Floating Label InputPro
A text field whose label floats above it on focus.
Segmented ControlFree
A single-select toggle with a sliding indicator.
- Combobox
ComboboxPro
A searchable single-select built on Command and Popover, with keyboard navigation and a filtered list.
DirectionPro
An RTL/LTR direction provider that feeds reading direction to every Radix-based primitive beneath it.
MarkerPro
A small line primitive for notes, metadata, and separators, with default, separator, and border variants.
Star RatingPro
An accessible, keyboard-navigable star rating input.
StepperPro
A horizontal or vertical step progress indicator.
Loading DotsPro
A compact loading indicator of bouncing dots.
Animated CheckboxPro
A checkbox whose checkmark draws itself in with a small bounce; built on a real native input.
Radio CardsPro
A single-select group of clickable cards with roving focus and arrow-key navigation.
Quantity InputPro
A minus / value / plus stepper backed by an ARIA spinbutton that clamps to its range.
SpinnerFree
A single-element loading ring drawn with a conic-gradient mask, with a polite status role.
BannerFree
A page-wide announcement bar with a tone icon, title, description, optional action and an optional dismiss button.
CalloutFree
A boxed note for documentation and settings pages, with a kind label, title, body and optional action.
Inline AlertPro
A compact one-line message for form and status feedback, with info, success and error tones.
Progress StepsPro
A vertical list of numbered steps that marks completed, current and upcoming steps, with optional links back to completed ones.
Status DotFree
A colored dot next to a text label that shows online, busy, away or offline status.
Toast StackPro
A stack of toast notifications with tones, optional actions, auto-dismiss that pauses on hover or focus, and Escape to dismiss.
Shortcut HintPro
An action label followed by its keyboard shortcut keys, read by screen readers as one phrase.
Color PickerPro
A color field that pairs the native color chooser with an editable hex value and a live swatch.
Alert (status tones)Free
An alert with default, destructive, info, success, warning and inverted tones, a title, a description and an action slot.
Currency InputPro
A text input that formats a number as currency when idle and lets you edit the plain number on focus.
Date Range PickerPro
A pair of native date inputs for a start and end date, with optional preset buttons.
Multi SelectPro
A popover list of checkboxes with search for picking several options, with an optional selection limit.
Phone InputPro
A phone number field with a country dialing code select joined to a telephone input.
Search FieldFree
A search input with a leading icon, a clear button and an Enter-to-search callback.
Signature PadPro
A signature field where people draw with a pointer or type their name, stored as SVG paths or text.
Time PickerPro
A native time input with a clock icon and optional preset buttons for common times.
FieldFree
Form field layout with label, description and error that wire their ids to the control automatically, plus fieldset, legend, orientation and invalid/disabled state.
Password InputFree
A password field with a visibility toggle and a four-step strength guide that explains how to improve the entry.
Stepper FormPro
A guided multistep form shell with gated progression, review states, and keyboard-accessible navigation.
Text
44
Text AnimatePro
A text animation component that animates text using a variety of different animations.
Typing AnimationPro
Text that types itself out, character by character.
Number TickerFree
Counts up or down to a target number when it scrolls into view.
Word RotatePro
One word at a time, rotating vertically through a list.
Morphing TextPro
Words that blur and melt into one another in a loop.
Hyper TextPro
A text animation that scrambles letters before revealing the final text.
Text RevealPro
Paragraph text that brightens word by word as you scroll.
Dia Text RevealPro
A horizontal color band sweeps across text with a gradient shine, then settles on your theme foreground color.
Text HighlighterPro
A text highlighter that mimics the effect of a human-drawn marker stroke.
Text 3D FlipPro
A text effect that flips each letter in 3D with a staggered animation on hover.
Aurora TextPro
Text filled with slowly drifting aurora colors.
Sparkles TextPro
A dynamic text that generates continuous sparkles with smooth transitions, perfect for highlighting text with animated stars.
Line Shadow TextPro
Text with an animated, diagonally striped shadow.
Animated Shiny TextPro
A light glare effect which pans across text making it appear as if it is shimmering.
Animated Gradient TextFree
An animated gradient background which transitions between colors for text.
Spinning TextPro
The Spinning Text component animates text in a circular motion with customizable speed, direction, color, and transitions for dynamic and engaging effects.
Video TextPro
Large text that plays a video through its letterforms.
Scroll Based VelocityPro
Rows of text that scroll faster as the page scrolls.
Comic TextPro
Bold comic-book lettering with a halftone shadow.
Kinetic TextPro
A text component that animates font weight of characters on hover.
Scramble TextPro
Text that cycles each character through random glyphs before settling on the final string, on mount, in view or on hover.
Animated Number FlowFree
A number whose digits roll like an odometer to the new value, with Intl formatting for currency, percent and compact notation.
- Text Axis Proximity Field
Text Axis Proximity FieldPro
Font weight and width rise with each letter's closeness to a focus point that sweeps on its own or follows the pointer.
- Text Blur Resolve
Text Blur ResolvePro
A headline that comes into focus word by word, with a small overshoot as each word locks.
- Text Char Reorder Lock
Text Char Reorder LockPro
Letters shuffle among their own slots and lock into place one by one.
- Text Curve Marquee
Text Curve MarqueePro
A looping text ribbon that travels along an SVG curve.
- Text Decode Reveal
Text Decode RevealPro
Cipher glyphs that resolve into the real text from left to right.
- Text Departure Board
Text Departure BoardPro
A mechanical flap board that clicks through a list of phrases.
- Text Echo Trail
Text Echo TrailPro
Ghost copies trail a word and merge back into it in a loop.
- Text Focus Sequence
Text Focus SequencePro
Words come into focus one by one inside a moving corner frame while the rest blur.
- Text Fold Open
Text Fold OpenPro
Lines of text that unfold in 3D like a creased sheet as you scroll.
- Text Glyph Wave
Text Glyph WavePro
Text rendered in a grid of ASCII glyph cells that ripple.
- Text Jitter Fuzz
Text Jitter FuzzPro
Text whose edges vibrate like a worn print, using an SVG displacement filter.
- Text Layered Extrude
Text Layered ExtrudePro
Stacked copies of a word that slide apart with scroll, building and flattening an extrusion.
- Text Mesh Mask Reveal
Text Mesh Mask RevealPro
A headline cut out of a drifting colour field, revealed one word at a time.
- Text Outline Draw
Text Outline DrawPro
Outlined letters that draw themselves on, then fill.
- Text RGB Split Glitch
Text RGB Split GlitchPro
Red and cyan copies slice and jump behind a word in short bursts.
- Text Ribbon Loop Draggable
Text Ribbon Loop DraggablePro
A phrase that runs around a closed loop and can be nudged by dragging or with the arrow keys.
- Text Scroll Rise
Text Scroll RisePro
Letters float up in staggered rows tied to scroll.
- Text Scroll Unblur
Text Scroll UnblurPro
Paragraph words sharpen one after another as scroll advances.
- Text Stagger Split
Text Stagger SplitPro
Characters, words or lines that enter in turn, with seven effects and a choice of where the stagger starts.
- Text Trail Stamp
Text Trail StampPro
Opt-in pointer effect that leaves stamped copies of a word along the pointer path.
- Text Variable Weight Wave
Text Variable Weight WavePro
Font weight and width swept along a word by a travelling wave.
- Text Vector Dash Reveal
Text Vector Dash RevealPro
Wordmark outlines that dissolve into flowing dashed strokes as a scan line sweeps across.
Buttons
9
Shimmer ButtonPro
A button with a shimmering light which travels around the perimeter.
Rainbow ButtonPro
A button with a slowly cycling rainbow border and glow.
Ripple ButtonPro
A button that sends a ripple out from where it was pressed.
Shiny ButtonPro
A shiny button component with dynamic styles in the dark mode or light mode.
Pulsating ButtonPro
An animated pulsating button useful for capturing attention of users.
Interactive Hover ButtonPro
A visually engaging button component that responds to hover with dynamic transitions, adapting smoothly between light and dark modes for enhanced user interactivity.
Animated Theme TogglerPro
Animated theme toggle using the View Transitions API with configurable clip-path shapes and origin.
Like ButtonPro
A heart toggle with a pop and a one-shot burst of rays, plus an optional live count.
- Button Glass Specular
Button Glass SpecularPro
A frosted-glass button with a bright highlight that orbits its rim and a soft glint that crosses the surface.
Cards and borders
14
Magic CardPro
A spotlight effect that follows your mouse cursor and highlights borders on hover.
Neon Gradient CardPro
A card with a glowing, animated neon gradient border.
Bento GridPro
Bento grid is a layout used to showcase the features of a product in a simple and elegant way.
Tweet CardPro
A card that displays a tweet with the author's name, handle, and profile picture.
Border BeamFree
An animated beam of light which travels along the border of its container.
Shine BorderPro
A border with a band of light sweeping around it.
Glare HoverPro
A diagonal light glare on hover using a ::before gradient, CSS variables, and background-position animation—no extra global keyframes required.
BacklightPro
A soft colored glow behind a video, image, or SVG, sampled from it.
LensPro
A interactive component that enables zooming into images, videos and other elements.
Card FlipPro
A two-faced card that rotates in 3D on click, focus, or hover, as a real toggle button.
- Bento Live Artwork
Bento Live ArtworkPro
A bento grid whose tiles each hold a small looping drawing: orbiting rings, rising bars, travelling wave lines, ripples or a pulsing dot grid.
- Binder Open Swing
Binder Open SwingPro
A binder whose cover swings open on its hinge while the pages inside rise into a loose fan.
- Card Foil Shimmer
Card Foil ShimmerPro
A collectible-style card with a foil layer and a bright band that sweeps across it on a timer, with an opt-in pointer tilt.
- Card Metal Reflect
Card Metal ReflectPro
A brushed-metal identity card with a broad reflection that glides across the surface and back, no camera needed, with an opt-in pointer tilt.
Layout and data
24
MarqueeFree
An infinite scrolling component that can be used to display text, images, or videos.
TimelinePro
A vertical timeline for ordered events.
Animated ListPro
A list that animates each item in sequence with a delay. Used to showcase notifications or events on your landing page.
DockFree
An implementation of the MacOS dock using react + tailwindcss + framer motion
TerminalFree
An implementation of the MacOS terminal. Useful for showcasing a command line interface.
File TreePro
A component used to showcase the folder and file structure of a directory.
Code ComparisonPro
Two code snippets side by side, for before-and-after diffs.
Avatar CirclesPro
A row of overlapping avatars with an overflow count.
Orbiting CirclesPro
A collection of circles which move in orbit along a circular path
Icon CloudPro
A rotating 3D sphere of icons or images you can drag.
GlobeFree
An autorotating, interactive, and highly performant globe made using WebGL.
Dotted MapFree
A world map drawn in dots, with optional markers.
Hero Video DialogPro
A video thumbnail that opens into a full-screen player.
Animated Circular Progress BarPro
Animated Circular Progress Bar is a component that displays a circular gauge with a percentage value.
Scroll ProgressFree
A thin bar that shows how far down the page the reader is.
Progressive BlurPro
A blur that strengthens toward the edge of a scrolling area.
Blur FadeFree
Blur fade in and out animation. Used to smoothly fade in and out content.
Container ScrollPro
A showcase frame that starts tilted back in 3D and flattens to face the reader as it scrolls into view.
Sticky ScrollPro
A list of steps that scroll past while one pinned visual crossfades to match the active step.
MediaFree
A picture slot that reserves its space, lazy-loads, takes a URL, an image with alt text and a dark-mode file, or your own element, and falls back to artwork when there is no image or it fails.
App ShellPro
The frame of an application page: skip link, sticky header, sidebar that becomes a sheet on small screens, main area, optional aside and footer.
Split ViewPro
A master and detail layout with a keyboard-resizable divider. Panes sit side by side in wide containers and stack with a Back button in narrow ones.
Spring DrawerPro
A drawer with spring physics. Drag the handle to snap between heights or flick it closed, or slide it in from the left or right, on Radix Dialog for focus trapping and scroll lock.
Masonry GridPro
A gap-free multi-column layout for tiles of different heights, built on CSS columns so it never shifts on load, with responsive column counts and an optional reveal.
AI interfaces
18
Agent PlanPro
A step timeline for an agent's plan that shows pending, running, done, failed and skipped steps, nested substeps, expandable output and overall progress.
AI ChatFree
A chat layout with a message log that stays scrolled to the newest message while replies stream, a jump-to-latest button, an empty state with suggestions and a footer for the input.
AI MessageFree
A chat message with user, assistant and system roles, an avatar slot, an actions row with a copy button and a timestamp.
AI OrbPro
A round animated mark for a voice or chat assistant that changes speed with its state and grows with a live voice level.
Approval CardPro
A confirmation card for an agent action that shows what will run, its risk level and the exact command, with Approve, Deny and an optional countdown.
Artifact PanelFree
A panel for content an assistant generates, with Preview and Code tabs, version stepping, copy, download and a streaming state.
Chat AttachmentPro
File chips and image tiles for chat inputs and messages, with file type detection, sizes, upload progress, retry, remove and open actions.
CitationFree
An inline source marker for AI answers, shown as a numbered chip or a site pill, that opens a preview card with the title, excerpt and link on hover or focus.
Model PickerFree
A searchable model selector grouped by provider, with capability icons, locked models and a detail pane showing context window, cost and capabilities.
Prompt InputFree
A chat composer with an auto-growing textarea, file attachments and a send button that turns into Stop while a reply streams.
Reasoning DisclosureFree
A collapsible panel for a model's reasoning that opens while it thinks and collapses to "Thought for 12s" when done.
Sources ListPro
A numbered list of the pages an AI answer cited, collapsed behind a row of favicons, as compact rows or cards with excerpts.
Streaming TextFree
Text that shows a blinking caret while a reply arrives, and can type out finished text at a set speed for demos and replays.
Suggestion ChipsFree
Starter or follow-up prompts shown as wrapping pills, a single scrolling row, or cards with descriptions, with loading and refresh states.
Thinking IndicatorFree
A status line for an assistant that is working, with dots, bars, wave or shimmer animation, rotating labels and an optional timer.
Token MeterPro
A stacked bar showing how much of a model's context window each part of a conversation uses, with a compact ring that opens it in a popover.
Tool Call CardFree
A collapsible card for one AI tool call, showing its name, status and duration, with the input and result as formatted JSON.
Voice InputPro
A microphone button or recording bar with a live waveform, timer, discard and send, plus a hook that reads the real microphone level.
Developer
15
API EndpointFree
A collapsible card that documents one HTTP endpoint with its parameters, request example and responses.
API Key FieldPro
A read-only field that masks a secret key and has buttons to reveal, copy and regenerate it.
Code BlockFree
A code panel with a filename header, line numbers, line highlights, wrap toggle and copy button, plus a tabbed variant for several files.
Copy ButtonFree
A button that copies text to the clipboard and briefly shows a check mark.
Diff ViewerPro
A line-by-line diff of two strings with added and removed lines marked.
Env EditorPro
An editor for environment variables with masked values, validation, and import from pasted .env text.
Git GraphPro
A commit list with a lane graph showing branches and merges, selectable by mouse or keyboard.
JSON ViewerPro
A collapsible tree view of a JSON value.
Keyboard ShortcutsPro
A searchable list of keyboard shortcuts with platform-aware key labels, also available as a dialog.
Log StreamPro
A live log viewer with level filters, text search, pause and follow-tail scrolling.
Package BadgePro
A card or inline pill that shows an npm package's version, downloads, size, license and install command.
Snippet TabsFree
Tabbed code samples in several languages with syntax highlighting, a copy button and a remembered language choice.
Webhook CardPro
A card for a webhook endpoint with an on/off switch, signing secret, subscribed events and a list of recent deliveries.
Install TabsFree
Package-manager tabs for a CLI command (pnpm, npm, yarn, bun) with a copy button. Remembers the reader's choice and keeps every instance on the page in sync.
Status Badge RowPro
A status page block with an overall banner and one row per service, each with a status chip, uptime and a day-by-day history bar you can explore with the pointer or arrow keys.
SaaS
13
Billing CardPro
A subscription summary card that shows the plan, price, status, next charge date, payment method, seat usage and recent invoices.
Changelog FeedFree
A release notes feed with a date and version column, one card per release, change type labels, filter chips and a show more toggle for long releases.
Cookie ConsentPro
A cookie banner with Accept all, Reject non-essential and Customize choices, plus a preferences view with a switch per category.
Feedback WidgetPro
A feedback button that opens a popover with a five-face rating, optional topic chips, a comment box and a confirmation state.
Invite MembersPro
An invite form that turns typed or pasted email addresses into chips, flags invalid or duplicate ones, sets a role and lists pending invitations.
Notification CenterPro
A bell button with an unread badge that opens a popover of notifications grouped by day, with All and Unread tabs and per-row actions.
Onboarding ChecklistFree
A getting started checklist with a progress ring, a segmented progress bar, expandable steps with an action button and a completion state.
Plan SelectorPro
A pricing plan picker built on native radio buttons, with a monthly and yearly toggle that updates every price.
Settings PanelPro
A settings form made of titled sections and label-and-control rows, with a save bar that slides in when there are unsaved changes.
Usage MeterPro
A plan limit meter shown as a bar or ring, with normal, warning and over-limit states and an optional breakdown into segments.
User MenuPro
An account dropdown opened from an avatar, or an avatar with name and email, that shows a profile header, links, a theme picker and sign out.
Workspace CardPro
A card for a workspace or team with a generated cover and logo tile, plan, member faces, project and storage stats and an actions menu.
Team SwitcherPro
A workspace picker: the current team on a button, the others in a radio menu with logos and descriptions, an add-team row, and a compact icon mode.
Data display
13
Activity FeedPro
An ordered list of recent actions, each with an actor, an action, an optional subject and a timestamp.
Calendar AgendaPro
A single-day agenda that lists events for the selected date, with previous and next day buttons and a date input.
Comparison TablePro
A feature comparison table with an optional featured column, where boolean values render as check and cross icons.
Contribution GraphPro
A grid of daily squares, seven rows per week, shaded by count relative to the busiest day.
Description ListPro
A bordered list of label and value pairs that stacks on small screens and splits into two columns from the sm breakpoint.
File BrowserPro
A file manager panel with breadcrumb navigation, search, sortable columns, multi-select with bulk actions, and list or grid views.
Kanban BoardPro
A board of columns with cards that move by drag and drop, by arrow buttons on each card, or by Alt and arrow keys.
KPI RowPro
A row of metric cells with a label, a large value and an optional detail line, divided by borders.
SparklineFree
A small SVG line chart of a numeric series with an optional dot on the last value.
Audio PlayerFree
A podcast-style audio player with play and pause, skip back and forward, a scrubber with chapter ticks, the current chapter and a speed control. Works with a real file or as a silent demo.
Circular ProgressPro
Concentric progress rings or a 270 degree gauge in theme colors with animated fills, a legend and a center slot.
Avatar StackPro
An accessible compact row of people with initials, image support, and an overflow count.
- Filters
FiltersFree
A stepped filter builder with nested attributes, popover value editors and a boolean query tree, in a chip bar or an advanced builder.
Navigation
15
Animated TabsFree
Radix tabs with a pill or underline indicator that slides between triggers and panels that fade in.
Back To TopPro
A floating button that appears after scrolling, shows scroll progress in a ring, and returns the reader to the top.
Floating NavPro
A pill-shaped navigation bar that floats over the page, with an active indicator that slides between items and optional hide on scroll.
Section TabsPro
Sticky in-page tabs that highlight the section in view and scroll to a section when a tab is chosen.
- Pill Header
Pill HeaderPro
A flat header with brand, plain links, a search icon and one high-contrast pill button that inverts with the theme.
Table Of ContentsFree
An "On this page" list that marks the section in view and scrolls to a heading when a link is chosen.
- Glass Header
Glass HeaderPro
A rounded, frosted navigation bar that floats near the top edge and sits over any background.
Mega MenuFree
A data-driven header menu with wide panels of grouped, described links, an optional featured card, and an accordion list for small screens.
NavbarPro
A responsive site header that gains a border and shadow on scroll, can hide while scrolling down, and turns its links into a sheet menu on small screens.
- Promo Bar
Promo BarPro
A slim announcement strip with a message, an optional copy-to-clipboard code and a dismiss button.
- Browse Filter Bar
Browse Filter BarPro
Sort tabs, a scrolling row of category chips and a tier select in one bar, for browsing a catalogue.
Command BarPro
A command palette with pages: a search-field style trigger, grouped commands, drill-in pages with a breadcrumb, Backspace to go back and a footer of key hints.
- Nav Card Drawer
Nav Card DrawerPro
A navigation bar with one button that drops a drawer of link cards, which settle in one after another.
- Nav Line Ticks Sidebar
Nav Line Ticks SidebarPro
A sidebar list drawn like a ruler: the current item has the longest tick and its neighbours taper away.
- Nav Pill Fill Roll
Nav Pill Fill RollPro
A pill-shaped navigation: the current item fills with colour that rises from the bottom, and hovered labels roll up to a second copy.
Desktop
16
Mac WindowFree
A desktop-style window frame with traffic-light controls, a title bar, an optional toolbar and a translucent sidebar.
Mac IconsFree
Decorative SVG icons for desktop mockups, including folders, files with an extension badge, drives and rounded app tiles.
Finder WindowPro
A file browser window with a sidebar, back and forward navigation, icon and list views, multi-select, keyboard navigation and a path bar.
Dynamic IslandPro
A black pill or notch that morphs between views with a spring layout animation.
HUDPro
A volume or brightness overlay that pops in when a level changes and hides itself after a delay.
LaunchpadFree
A full-screen app launcher overlay with a search field, paged app grid and page dots.
Menu BarFree
A desktop-style menu bar built on Radix Menubar, with menus, submenus, checkbox items, shortcuts, status icons and a clock.
Notification StackPro
A group of notification cards that sits collapsed with cards peeking behind the newest one and springs open into a list.
Spotlight SearchPro
A translucent command palette built on cmdk, with a large search field, grouped results with icons and an optional dialog toggled by Cmd+K.
WidgetsFree
Desktop widgets for weather, a calendar day and device batteries, in small, medium and large sizes that scale with their width.
Window ManagerFree
A desktop area with draggable, resizable windows that raise on focus, zoom on double-click and minimize into a tray.
Lock ScreenPro
A lock screen in two flavors: macOS with a live clock, avatar and a password field that shakes when wrong, and iOS with a clock, notifications and swipe up to unlock.
Control CenterPro
A macOS-style Control Center panel in frosted glass with toggle tiles, grouped Wi-Fi, Bluetooth and AirDrop rows, pill sliders and a Now Playing tile.
Desktop IconsPro
A macOS-style desktop of icons with box selection, drag to move with grid snapping, double-click or Return to open, and arrow-key navigation.
Mac Context MenuPro
A right-click menu styled like macOS, with a frosted panel, key equivalents, checkmarks, submenus and a destructive item, on Radix for full keyboard support.
ToolbarPro
A frosted macOS-style toolbar with a title block, icon and labeled buttons, segmented view switches, an expanding search field, separators and spacers, built on Radix Toolbar so the whole bar is one tab stop.
Effects
28
Animated BeamFree
An animated beam of light which travels along a path. Useful for showcasing the "integration" features of a website.
MeteorsPro
Meteors streaking across a container, for hero and card backgrounds.
ConfettiPro
Confetti animations are best used to delight your users when something special happens
ParticlesPro
Particles are a fun way to add some visual flair to your website. They can be used to create a sense of depth, movement, and interactivity.
Cool ModePro
Bursts of particles from the pointer when you click a wrapped element.
PointerPro
A component that displays a pointer when hovering over an element
Smooth CursorPro
A customizable, physics-based smooth cursor animation component for React applications.
Pixel ImagePro
A component that displays your image with a pixelated effect, enhancing the visual appeal of any image in your website.
Glyph MatrixPro
An animated grid of subtly shifting glyphs on a canvas, with a theme-aware color driven by the consumer.
Stagger ListPro
A list whose items enter one after another and slide to their new positions when the list is filtered, sorted or changed.
- Fx Cube Field 3D
Fx Cube Field 3DPro
A board of outlined cubes turning in a travelling wave.
- Fx Fade In Wrapper
Fx Fade In WrapperPro
Fade content in on scroll as plain opacity, from under film grain, or behind a sweeping soft mask.
- Fx Focus Pull Shape
Fx Focus Pull ShapePro
Shapes that drift in and out of focus like a lens hunting for its subject.
- Fx Grid Trace Fade
Fx Grid Trace FadePro
Opt-in pointer effect: grid cells light behind the pointer and fade out.
- Fx Image Stamp Trail
Fx Image Stamp TrailPro
Opt-in pointer effect: images stamped along the pointer path.
- Fx Measure Guides Cursor
Fx Measure Guides CursorPro
Opt-in pointer effect: a crosshair with a live coordinate readout.
- Fx Media Frame Grow
Fx Media Frame GrowPro
A rounded media frame that grows to full bleed as you scroll.
- Fx Orbiting Spark Outline
Fx Orbiting Spark OutlinePro
A star that travels the outline of any box, with a fading tail.
- Fx Path Orbit Gallery
Fx Path Orbit GalleryPro
Items orbiting along an SVG path with CSS motion-path animation.
- Fx Peel Sticker
Fx Peel StickerPro
A die-cut sticker whose corner can be peeled back by dragging.
- Fx Pixel Cover Swap
Fx Pixel Cover SwapPro
A pixel dissolve between two faces, started by a button.
- Fx Pixel Wave Swap
Fx Pixel Wave SwapPro
Two faces swapped by a diagonal wave of square tiles, on a timer.
- Fx Pointer Glow Wake
Fx Pointer Glow WakePro
Opt-in pointer effect: a tapering wake of soft light that trails the pointer.
- Fx Scroll Reveal Wrapper
Fx Scroll Reveal WrapperPro
A wrapper that reveals content on scroll with slide, blur, tilt or wipe, optionally child by child.
- Fx Tap Spark Burst
Fx Tap Spark BurstPro
A burst of sparks where you click or tap, or from a control activated by keyboard.
- Fx Target Reticle
Fx Target ReticlePro
Opt-in pointer effect: a reticle that snaps onto the nearest target and onto whatever has keyboard focus.
- Grid Color Restore
Grid Color RestorePro
A grid of grey tiles in which a band of colour rolls diagonally across, bringing each tile back to life in turn.
- Surface Refract Glass
Surface Refract GlassPro
A glass panel that bends whatever sits behind it with an SVG displacement filter whose noise drifts slowly.
Backgrounds
129
Dot PatternPro
A background dot pattern made with SVGs, fully customizable using Tailwind CSS.
Grid PatternPro
A background grid pattern made with SVGs, fully customizable using Tailwind CSS.
Animated Grid PatternFree
A animated background grid pattern made with SVGs, fully customizable using Tailwind CSS.
Interactive Grid PatternPro
A interactive background grid pattern made with SVGs, fully customizable using Tailwind CSS.
Flickering GridPro
A flickering grid background made with SVGs, fully customizable using Tailwind CSS.
Retro GridPro
A perspective grid scrolling toward the horizon.
Hexagon PatternPro
A background hexagon pattern made with SVGs, fully customizable using Tailwind CSS.
Striped PatternPro
A background striped pattern made with SVGs, fully customizable using Tailwind CSS.
RipplePro
An animated ripple effect typically used behind elements to emphasize them.
Light RaysPro
A component with animated light rays which shine down from above.
Noise TexturePro
An SVG fractal noise layer using feTurbulence for subtle texture overlays.
Warp BackgroundPro
A container whose background warps toward the viewer.
Floating 3D ParticlesPro
A canvas-based pseudo-3D particle field with perspective projection, continuous rotation, buoyant drift and depth-aware rendering.
Aurora BackgroundFree
A background of blurred, slowly drifting colored light with vertical curtains, drawn with CSS layers.
Beams BackgroundFree
A canvas background of thin vertical rails with beams of light traveling along them over a soft glow.
- Mesh Gradient Drift
Mesh Gradient DriftPro
Four soft radial lights that slowly drift and rotate, for a calm mesh-gradient backdrop.
- Conic Sweep Background
Conic Sweep BackgroundPro
A blurred conic gradient that rotates behind your content like a slow searchlight.
- Dot Grid Glow
Dot Grid GlowPro
A fine dot grid with a soft light that wanders across it.
- Line Grid Fade
Line Grid FadePro
A drifting line grid that fades out toward the edges, with a tint from the top.
- Grain Gradient Background
Grain Gradient BackgroundPro
A shifting three-colour gradient with film grain over it, drawn with an inline SVG noise filter.
- Topographic Lines Background
Topographic Lines BackgroundPro
Contour rings drawn with repeating radial gradients that breathe slowly, like a map.
- Diagonal Stripes Background
Diagonal Stripes BackgroundPro
Two layers of diagonal stripes that slide past each other with a soft vignette.
- Ripple Rings Background
Ripple Rings BackgroundPro
Concentric rings that expand from the centre and fade, like a drop on water.
- Starfield Twinkle Background
Starfield Twinkle BackgroundPro
Three layers of stars that twinkle at different speeds over a faint nebula.
- Sunset Bands Background
Sunset Bands BackgroundPro
A banded sky with a striped sun that slowly sinks and rises above a dark horizon.
- Blob Morph Background
Blob Morph BackgroundPro
Three blurred blobs whose shapes morph and drift, with a soft glassy feel.
- Spotlight Beams Background
Spotlight Beams BackgroundPro
Soft light cones that sweep from the top edge like stage lights.
- Checker Diamond Background
Checker Diamond BackgroundPro
A rotated checkerboard that scrolls diagonally under a second, larger check in another colour.
- Halftone Dots Background
Halftone Dots BackgroundPro
Two halftone dot screens that fade across the frame in opposite directions.
- CRT Scanlines Background
CRT Scanlines BackgroundPro
Scanlines, a slow bright bar and a vignette over a phosphor glow, in the style of an old monitor.
- Wave Layers Background
Wave Layers BackgroundPro
Three layers of SVG waves that slide at different speeds along the bottom edge.
- Hex Grid Background
Hex Grid BackgroundPro
A honeycomb of fine lines, with a colour sweep passing through the cell edges.
- Circuit Traces Background
Circuit Traces BackgroundPro
Printed-circuit traces and solder pads, lit by a colour that runs along them.
- Isometric Grid Background
Isometric Grid BackgroundPro
A three-axis isometric line grid that drifts slowly and fades toward the edges.
- Plaid Weave Background
Plaid Weave BackgroundPro
Broad translucent bands and fine threads crossing like tartan cloth, drifting gently.
- Zigzag Chevron Background
Zigzag Chevron BackgroundPro
A tiled zigzag of chevrons that scrolls sideways with a fade at the edges.
- Rain Streaks Background
Rain Streaks BackgroundPro
Thin streaks that fall at staggered speeds, drawn with 40 small elements.
- Fireflies Background
Fireflies BackgroundPro
Twenty-four soft glowing points that wander and pulse like fireflies at dusk.
- Bokeh Circles Background
Bokeh Circles BackgroundPro
Large out-of-focus discs with bright rims that float upward at different speeds.
- Lava Goo Background
Lava Goo BackgroundPro
Blobs that merge and split like a lava lamp, using an SVG gooey filter.
- Light Leaks Background
Light Leaks BackgroundPro
Diagonal streaks of soft colour that slide across the frame like film light leaks.
- Smoke Warp Background
Smoke Warp BackgroundPro
A conic gradient bent into slow smoke by an animated SVG displacement filter.
- Pixel Pulse Background
Pixel Pulse BackgroundPro
A grid of square cells that pulse out of phase, like a quiet LED wall.
- Code Rain Background
Code Rain BackgroundPro
Columns of monospace characters that fall and fade, in your theme colours.
- Radar Sweep Background
Radar Sweep BackgroundPro
Range rings, a rotating sweep and a few pinging blips, like a radar display.
- Aurora Ribbons Background
Aurora Ribbons BackgroundPro
Three wide SVG ribbons that bend and drift under a heavy blur, like northern lights.
- Flow Lines Background
Flow Lines BackgroundPro
Thirty curved lines with a bright dash that travels along each one, like a flow field.
- Laser Grid Background
Laser Grid BackgroundPro
A dim grid crossed by thin bright beams that sweep along both axes.
- Dither Fade Background
Dither Fade BackgroundPro
A coarse pixel dither that fades from solid to nothing and slowly slides, in two colours.
- Gradient Orbs Background
Gradient Orbs BackgroundPro
Glossy spheres with a highlight and a soft shadow, floating at different depths.
- Liquid Chrome Background
Liquid Chrome BackgroundPro
A lit, rippling surface made with SVG turbulence and diffuse lighting, tinted by your colours.
- Paper Folds Background
Paper Folds BackgroundPro
Diagonal creases with a soft light on each fold, like a sheet of folded paper.
- Confetti Drift Background
Confetti Drift BackgroundPro
Thirty small tumbling pieces of paper that sink slowly through the frame.
- Equalizer Bars Background
Equalizer Bars BackgroundPro
A row of 32 bars that rise and fall out of phase, like an audio spectrum.
- Wire Lattice Background
Wire Lattice BackgroundPro
A triangular wireframe lattice lit by a colour sweep that crosses it, drawn as a CSS mask.
- Ridgeline Background
Ridgeline BackgroundPro
Fourteen stacked line profiles that each hide the one behind, swaying like a pulsar plot.
- Starburst Rays Background
Starburst Rays BackgroundPro
Sharp alternating rays that fan out from the centre and turn slowly, with a radial fade.
- Blueprint Background
Blueprint BackgroundPro
Fine and bold drafting lines with dimension marks and a scanning line, in an engineering style.
- Spotlight Reveal Background
Spotlight Reveal BackgroundPro
A dot grid that only appears inside a soft circle of light as it roams across the frame.
- Terminal Log Background
Terminal Log BackgroundPro
- Data Bus Background
Data Bus BackgroundPro
- Heatmap Grid Background
Heatmap Grid BackgroundPro
- Network Mesh Background
Network Mesh BackgroundPro
- Orbit Lines Background
Orbit Lines BackgroundPro
- Sparkline Field Background
Sparkline Field BackgroundPro
- Candlestick Drift Background
Candlestick Drift BackgroundPro
- Signal Waves Background
Signal Waves BackgroundPro
- Glass Panels Background
Glass Panels BackgroundPro
- Stripe Bands Background
Stripe Bands BackgroundPro
- Contribution Grid Background
Contribution Grid BackgroundPro
- Plus Grid Sweep Background
Plus Grid Sweep BackgroundPro
Aurora Noise BackdropPro
Northern-lights curtains computed from layered noise, with a bright lower edge, rays and colour that changes with height.
Bayer Wave Pattern BackdropPro
Slow bands of tone turned into chunky pixels with an ordered four-by-four dither, so waves read as a woven texture.
Blinds Gradient BackdropPro
A row of tall window-blind slats, each lit by its own gradient, that open and brighten one after another in a rolling wave.
Block Grid Warp BackdropPro
A picture cut into square blocks that slide, swell and shrink in waves; use your own image or the built-in colour picture.
Breathing Ring BackdropPro
A dial-like ring of fine ticks that slowly swells and relaxes, with a soft glow around it and a wave running round its edge.
Caustic Filaments BackdropPro
A bright network of thin light filaments, like sunlight bending through moving water onto a pool floor.
Chrome Pool BackdropPro
A pool of liquid chrome with sharp reflections of an invisible sky sliding over its slowly heaving surface.
Contour Terrain BackdropPro
Glowing contour lines of a landscape that slowly rises and sinks, coloured by height like a topographic map.
Corner Rays BackdropPro
Shafts of light that fan out from the top corners of the page and slowly sway, drawn with layered conic gradients and no canvas.
CRT Plasma BackdropPro
Rolling plasma on a curved screen with scanlines and a vignette, rendered on the CPU at a low resolution.
Dither Cloud BackdropPro
A drifting cloud made of chunky two-tone pixels, scattered with a random dither so its edges crackle as it moves.
Dot Lens Field BackdropPro
A regular field of small dots with a round lens drifting through it that magnifies and pushes the dots beneath it apart.
Energy Folds BackdropPro
Glowing filaments from a space that is folded over itself again and again, giving crisp, branching energy lines.
Fibre Ribbons BackdropPro
A fan of fine glowing fibres that sweep up from one corner, each ending in a bright point of light that slides along it.
Fibre Tunnel BackdropPro
A tunnel of radial light fibres and receding rings, with pulses of light racing outward along each fibre.
Field Lines BackdropPro
Hundreds of fine curves that trace an invisible force field, which churns and reshapes as it slowly evolves.
Flow Field Glow BackdropPro
Glowing particles that ride an invisible current and leave soft trails behind; optionally, the pointer stirs the flow.
Forked Bolts BackdropPro
Branching lightning that strikes down the page every few seconds, fades in gently and lingers before it dies away.
Glass Shard Ribbons BackdropPro
Translucent ribbons cut into triangular glass shards with bright edges that twist and drift across the page.
Glitch Terminal BackdropPro
A scrolling log of agent activity in monospace type, with an occasional horizontal glitch that splits the colours for a moment.
Glossy Tile Field BackdropPro
A grid of rounded glass tiles with a highlight on top, which ripple in size and gloss as a light source circles the page.
Glyph Flicker BackdropPro
A field of dim letters and symbols where single characters light up and change at random, like a board of idle terminal cells.
Glyph Gradient BackdropPro
A colour gradient drawn in a grid of text glyphs, where brighter areas use denser characters as the gradient drifts.
Grain Gradient BackdropPro
A smooth gradient that flows slowly across the page with a fine film grain over it that re-rolls many times a second.
Grid Room Scan BackdropPro
A wireframe room seen down its length, with grid lines on all four walls and a bright plane that scans from far to near.
Grid Water Ripple BackdropPro
A square mesh of fine lines that bends as ripples from falling drops spread across it and fade away.
Halftone Silk BackdropPro
A staggered halftone dot screen whose dot sizes follow the folds of a slowly draped piece of silk.
Highway Warp BackdropPro
Trails of light racing down a multi-lane road toward the horizon, with head and tail lights that stretch as they speed up.
Hue Sweep Bands BackdropPro
Broad bands of blended colour that bend and slide diagonally across the page, like a slow colour wash.
Iridescent Film BackdropPro
The shifting rainbow colours of a thin oily film, slowly flowing across the page and blended a little with your palette.
Lift Particles BackdropPro
Particles that rise from a ring lying on the floor, drift upward and fade; optionally, the pointer pushes them aside.
Light Column BackdropPro
A single pillar of light rising through the middle of the page, with striations that swirl upward as it climbs.
Light Streak Fall BackdropPro
Slim streaks of light that fall at different speeds, each with a glowing head and a long fading tail.
Line Swell BackdropPro
Rows of fine horizontal lines that rise in a travelling swell, which sweeps back and forth across the page.
Needle Field BackdropPro
A grid of slim needles that all swing together in a rolling wave; optionally they turn to point at the pointer instead.
Night Curtain Drift BackdropPro
Tall translucent curtains of colour that sway and drift sideways over a scatter of twinkling stars.
Physics Balls BackdropPro
Soft translucent balls that tumble and bounce off each other and the edges while gravity slowly turns around the page.
Pixel Snowfall BackdropPro
Snow drawn as crisp square pixels in three depth layers, falling at different speeds and swaying as they drop.
Pulse Rings BackdropPro
Rings that spread out from three quiet sources, thinning and fading as they go, each followed by a dashed echo.
Satin Folds BackdropPro
Smooth shaded folds of satin cloth, lit from one side so highlights slide along the creases as the fabric moves.
Satin Horizon BackdropPro
Layers of satin waves that stack toward a distant horizon, each hiding the one behind it and catching a bright edge.
Scan Interference BackdropPro
Two fine line gratings drifting against each other make moire bands, while a bright scan band sweeps down the page.
Scope Sweep BackdropPro
A radar-style scope with rings, ticks and a rotating beam that lights up blips on the page as it passes over them.
Shape Lattice BackdropPro
A triangular lattice of thin links with small triangles, squares and circles at the joints, all drifting gently out of true.
Shape Swell BackdropPro
A field of small diamonds that swell and brighten as waves travel out from a centre that wanders across the page.
Silk Lines BackdropPro
A dense curtain of hair-thin lines that hang from the top of the page and sway in a slow travelling wave.
Slat Sea BackdropPro
Rows of slats laid out in perspective that rise and fall in waves as they roll toward the viewer from the horizon.
Sliced Light Bars BackdropPro
Tall bars of uneven width, each cut into horizontal slices that light up and shift sideways one after another.
Spectral Facets BackdropPro
A turning prism of translucent facets that pulse in turn, with long beams of coloured light thrown outward.
Spectrum Burst BackdropPro
A burst of coloured rays that opens from the centre, breathes in and out, and fades to the edges of the page.
Spike Sea BackdropPro
Three rows of sharp spikes that bristle up in clusters and lean as invisible waves pass beneath them, like a magnetic fluid.
Starfield Flight BackdropPro
Stars streak past from the centre of the page as if flying through them, speeding up and slowing down in long breaths.
Swirl Paint BackdropPro
Marbled paint twisted into a slow whirlpool around the middle of the page, with colour bands that curl as they turn.
Thin Line Ribbons BackdropPro
Ribbons made of many parallel hairlines that twist and pinch to a point, the way a ribbon seems to when it turns edge-on.
Thread Weave BackdropPro
Glowing warp and weft threads that pass over and under each other like woven cloth, with light running along them.
Tilted Tile Wall BackdropPro
A wall of flat tiles laid out in 3D and tipped away from you, with a wave of tiles lifting toward the viewer across it.
Twin Plasma Ribbons BackdropPro
Two glowing ribbons that wind around each other like a double helix, swapping which one is in front as they cross.
Unravel Strands BackdropPro
A tight bundle of threads on one side that comes loose across the page, each strand wandering off and fading at its own point.
3D
77
Hero Scene 3DPro
A hero background of glossy shapes floating in 3D with pointer parallax, lit by a procedural studio environment in your theme colours.
Ring Carousel 3DPro
Cards arranged on a 3D ring that turns to the active card, with drag, click, arrow keys, buttons and autoplay.
- Morphing Blob
Morphing BlobPro
A liquid 3D sphere displaced by animated simplex noise in a custom shader, with a fresnel rim in your theme colours.
- Particle Field 3D
Particle Field 3DPro
Thousands of GPU-animated particles arranged as a spiral galaxy, a vortex or a breathing sphere, coloured from your theme.
- Text 3D
Text 3DPro
A heading extruded into real 3D geometry with bevelled edges that rocks gently and leans toward the pointer.
- Model Viewer 3D
Model Viewer 3DPro
An interactive glTF model viewer with orbit controls, procedural studio lighting and a contact shadow, or a built-in shape.
Wave Grid 3DPro
An endless shader-driven surface of rolling waves drawn as grid lines, points or terrain, rippling out from the pointer.
- Orbit Rings 3D
Orbit Rings 3DPro
A glowing nucleus with electrons racing around tilted orbits and leaving fading trails.
- Device Spin 3D
Device Spin 3DPro
A phone or tablet with a metal frame, glass screen and camera bump that turns under studio lights; drag to spin it.
Flip CubePro
A CSS 3D prism that turns to show one face at a time, for rotating words or features, with no WebGL.
Perspective MarqueePro
Rows of items scrolling across a tilted 3D plane, built with CSS transforms only.
- Stage 3D
Stage 3DPro
A lazily loaded WebGL canvas for react-three-fiber scenes that pauses offscreen, respects reduced motion, caps the pixel ratio and falls back to a static frame without WebGL.
- Cube Spin 3D
Cube Spin 3DPro
A glassy six-faced cube that turns slowly, built with CSS 3D transforms only.
- Triangle Prism 3D
Triangle Prism 3DPro
A three-sided prism with gradient faces that rotates around its vertical axis.
- Card Ring 3D
Card Ring 3DPro
Eight cards arranged in a ring that rotates in space.
- Flip Card 3D
Flip Card 3DPro
A two-sided card that flips on a timer, with a hidden back face.
- Tilt Card 3D
Tilt Card 3DPro
A card that tilts toward the pointer, with a light sheen that follows it.
- Layer Stack 3D
Layer Stack 3DPro
Five translucent layers exploded along the depth axis and slowly turning.
- Tunnel Rings 3D
Tunnel Rings 3DPro
Nested outlines that rush toward the viewer to make an endless tunnel.
- Synthwave Floor 3D
Synthwave Floor 3DPro
A perspective grid floor that scrolls toward a glowing horizon.
- Orbit System 3D
Orbit System 3DPro
A glowing core with three tilted orbits and planets moving at different speeds.
- Slat Cylinder 3D
Slat Cylinder 3DPro
A drum made of 24 vertical slats in three colours, turning on its axis.
- Pyramid 3D
Pyramid 3DPro
A four-sided pyramid with clipped faces that spins around its tip.
- Book Open 3D
Book Open 3DPro
A book whose cover swings open and closed on its spine.
- Isometric Blocks 3D
Isometric Blocks 3DPro
A three by three field of isometric blocks that rise and fall in a wave.
- Fold Panels 3D
Fold Panels 3DPro
Five hinged panels that fold and unfold like a screen.
- Helix Dots 3D
Helix Dots 3DPro
Two interleaved strands of glowing dots winding around a vertical axis.
- Tile Wave 3D
Tile Wave 3DPro
A tilted field of two-sided tiles that flip in a diagonal wave.
- Sphere Dots 3D
Sphere Dots 3DPro
Ninety points spread evenly over a sphere that turns in space.
- Torus Rings 3D
Torus Rings 3DPro
Sixteen thin rings arranged around a circle to make a hollow torus.
- Atom Orbits 3D
Atom Orbits 3DPro
Three crossing orbits with electrons around a bright nucleus, like an atom model.
- Card Fan 3D
Card Fan 3DPro
Five cards that fan open and closed from a shared pivot.
- Cover Flow 3D
Cover Flow 3DPro
A row of covers where the centre faces you and the rest angle away, sliding past in turn.
- Panorama Room 3D
Panorama Room 3DPro
Twelve panels on the inside of a ring, turning around a viewer at the centre.
- Spinning Coin 3D
Spinning Coin 3DPro
A thick coin built from stacked discs, with an emblem on each face.
- Dice Roll 3D
Dice Roll 3DPro
A six-sided die with pips that tumbles on all three axes.
- Diamond Gem 3D
Diamond Gem 3DPro
Two four-sided pyramids joined at the base to form a faceted gem.
- Parallax Frames 3D
Parallax Frames 3DPro
Four nested frames at different depths that shift against each other as the pointer moves.
- Card Wall 3D
Card Wall 3DPro
A tilted wall of cards whose columns slide up and down in opposite directions.
- Door Swing 3D
Door Swing 3DPro
A door on a hinge that swings open onto a glowing room, then closes.
- Spiral Steps 3D
Spiral Steps 3DPro
Twenty-four slabs climbing around a column like a spiral staircase.
- Flower Petals 3D
Flower Petals 3DPro
Eight petals that open and close around a centre while the flower turns.
- Neural Graph 3D
Neural Graph 3DPro
A layered neural network in 3D: glowing nodes, faint connections and pulses travelling between layers. Made for AI and ML products.
- Growth Chart 3D
Growth Chart 3DPro
A 3D bar chart whose glossy bars rise in turn over a floor grid, with a coin floating above the tallest bar. Made for founder and finance pages.
- Deal Pipeline 3D
Deal Pipeline 3DPro
Cubes that travel down a track through glowing stage gates, change colour at each one and flatten into a coin at the end. Made for sales and operations pages.
- Latent Dunes 3D
Latent Dunes 3DPro
A smooth, colour-graded landscape of rolling dunes that ripples in WebGL, with tokens floating up out of it and a glow on the horizon. Made for AI runtime and model pages.
- Runway 3D
Runway 3DPro
An airfield runway at night, with edge lights chasing toward the horizon and a growth line that climbs into the sky. Made for runway, launch and roadmap pages.
- Rubik Cube 3D
Rubik Cube 3DPro
A 3 by 3 by 3 cube of 27 small cubes whose top layer turns while the whole cube spins.
- Envelope Open 3D
Envelope Open 3DPro
An envelope whose flap swings open to let a letter slide out, then closes again.
- Phone Tilt 3D
Phone Tilt 3DPro
A phone with a layered interface that tilts side to side, with real thickness.
- Laptop Open 3D
Laptop Open 3DPro
A laptop whose lid opens and closes on its hinge, with a lit screen.
- Server Rack 3D
Server Rack 3DPro
A rack of eight servers with blinking status lights, turning slowly for a data-centre feel.
- Chip Die 3D
Chip Die 3DPro
A processor package built from floating layers: pins, substrate, a die with a circuit grid and a heat spreader.
- Neural Layers 3D
Neural Layers 3DPro
Four planes of nodes in depth with pulses travelling through them, like a small neural network.
- Voxel Lattice 3D
Voxel Lattice 3DPro
A five by five by five lattice of 125 points that pulse in a wave as the cube turns.
- Bar Chart 3D
Bar Chart 3DPro
Six isometric bars that grow from the ground in turn, like a revenue chart.
- Wire Globe 3D
Wire Globe 3DPro
A globe drawn only with meridian and latitude rings that spins on its axis.
- Coin Stacks 3D
Coin Stacks 3DPro
Five stacks of coins at different heights that rise in turn, seen from a raised angle.
- Ring Tower 3D
Ring Tower 3DPro
Nine thick rings stacked on an axis, each turning at its own speed like a gyroscope tower.
- Newton Cradle 3D
Newton Cradle 3DPro
Five hanging balls where the outer two swing in turn and pass their energy along the row.
- Prism Spectrum 3D
Prism Spectrum 3DPro
A glass prism that splits one beam of light into a fan of coloured rays.
- Keyboard Keys 3D
Keyboard Keys 3DPro
Three rows of raised keycaps that press down in a travelling wave.
- Terminal Window 3D
Terminal Window 3DPro
- Browser Stack 3D
Browser Stack 3DPro
- Shield 3D
Shield 3DPro
- Padlock 3D
Padlock 3DPro
- Gauge 3D
Gauge 3DPro
- Chat Bubbles 3D
Chat Bubbles 3DPro
- Card Stack 3D
Card Stack 3DPro
- Calendar Flip 3D
Calendar Flip 3DPro
- Skyline 3D
Skyline 3DPro
- Search Lens 3D
Search Lens 3DPro
- Hourglass 3D
Hourglass 3DPro
- Cloud Upload 3D
Cloud Upload 3DPro
- Carousel Helix 3D
Carousel Helix 3DPro
Cards wound round an upright spiral that turns for ever, each one a step higher than the last.
- Gallery Dome 3D
Gallery Dome 3DPro
Tiles laid over a dome that you turn by dragging or with the arrow keys.
- Wall Perspective Drift
Wall Perspective DriftPro
A tilted wall of tiles that drifts diagonally toward a vanishing point in a seamless loop.
Device mockups
9
SafariPro
A Safari browser frame for showing website screenshots or video.
iPhonePro
An iPhone frame for showing app screenshots or video.
AndroidPro
An Android phone frame for showing app screenshots or video.
Laptop FrameFree
A notched laptop drawn in CSS that shows children or an image on its screen and can open its lid on scroll.
Phone FrameFree
A modern phone drawn in CSS with a titanium band, side buttons, Dynamic Island, status bar and home indicator. Children render as the screen, laid out at phone resolution and scaled to fit.
Tablet FrameFree
A modern tablet drawn in CSS with an aluminum frame, thin bezel, front camera, status bar and home indicator, in landscape or portrait. Children render as the screen at tablet resolution, scaled to fit.
Watch FrameFree
A smartwatch drawn in CSS with an aluminum case, digital crown, curved glass and a sport, loop or leather strap. The screen is always dark and children render scaled to fit.
Android FramePro
A modern Android phone drawn in CSS with a satin frame, punch-hole camera, Material-style status bar and gesture or three-button navigation. Children render at phone resolution, scaled to fit.
Browser FrameFree
A Safari-style window with traffic lights, a padlocked address field and optional tabs. Children render as the page, at natural size or laid out at desktop width and scaled to fit.
Blocks: Dashboards
1
Blocks: Sidebars
16
Sidebar 01Free
A simple sidebar with navigation grouped by section.
Sidebar 02Free
A sidebar with collapsible sections.
Sidebar 03Free
A sidebar with submenus.
Sidebar 04Free
A floating sidebar with submenus.
Sidebar 05Free
A sidebar with collapsible submenus.
Sidebar 06Free
A sidebar with submenus as dropdowns.
Sidebar 07Free
A sidebar that collapses to icons.
Sidebar 08Free
An inset sidebar with secondary navigation.
Sidebar 09Free
Collapsible nested sidebars.
Sidebar 10Free
A sidebar in a popover.
Sidebar 11Free
A sidebar with a collapsible file tree.
Sidebar 12Free
A sidebar with a calendar.
Sidebar 13Free
A sidebar in a dialog.
Sidebar 14Free
A sidebar on the right.
Sidebar 15Free
A left and a right sidebar.
Sidebar 16Free
A sidebar with a sticky site header.
Blocks: Login
5
Blocks: Sign up
5
Status and presence
6
AnnouncementPro
A pill-shaped announcement banner with a tag and a title, for release notes and launches.
PillPro
A compact pill with avatars, status indicators, deltas, icons and a dismiss button.
StatusPro
A status badge with a pulsing indicator for online, offline, maintenance and degraded states.
TickerPro
A financial ticker showing a symbol, a formatted price and a signed change.
CursorPro
A collaborative cursor with a name and an optional message, for presence and live-editing UIs.
Badge (tones and appearances)Pro
A badge with solid, light and outline appearances in primary, info, success, warning, destructive, inverted and focus tones, five sizes and a pill radius.
Inputs and media
7
QR CodePro
A QR code rendered as SVG from any string, themed with the current colours.
Image ZoomPro
An image that expands to a full-screen view on click.
ChoiceboxPro
A radio group of rich option cards with a title, subtitle and description.
DropzonePro
A drag-and-drop upload area with file type, size and count limits.
Image CropPro
An image cropper with fixed or free aspect ratios and a cropped preview.
- Cascader
CascaderFree
A multi-level combobox with drill-down, column and tree modes, breadcrumbs, search, async levels and a virtualized list.
- Input Arc Bar
Input Arc BarPro
A semicircular range input: drag round the arc or use the keyboard to set a value.
Planning and calendars
5
Mini CalendarPro
A compact strip of days with previous and next navigation.
Calendar Month ViewFree
A month calendar that shows dated features and lets you jump by month and year.
Relative TimePro
Live-updating clocks and relative times across time zones.
Gantt ChartPro
A timeline of features across months, with a sidebar, markers and draggable bars.
Date SelectorPro
A date picker for days, months, quarters, half-years and years, with before, after and between filters and typed input.
Data grids
21
Data GridPro
A TanStack Table data grid with sorting, filtering, pinning, resizing, column menus, pagination and localizable labels.
Data Grid TablePro
The table body of the data grid: header, rows, selection, expansion, pinning, resizing and sticky edges.
Data Grid Scroll AreaPro
A scroll container for the data grid with a sticky header, overlay scrollbars and RTL support.
Data Grid PaginationPro
A data grid with a pagination footer, page sizes and a row count.
Data Grid Cell BordersPro
A data grid with a border around every cell.
Data Grid DensePro
A compact data grid with tight rows for dense lists.
Data Grid StripedPro
A data grid with alternating row backgrounds.
Data Grid Row SelectionPro
A data grid with checkboxes for selecting rows and a select-all control.
Data Grid Expandable RowsPro
A data grid whose rows expand to reveal more detail.
Data Grid Sortable ColumnsPro
A data grid with sortable columns and a sort menu on every header.
Data Grid Movable ColumnsPro
A data grid whose columns can be moved left and right from the header menu.
Data Grid Column ResizingPro
A data grid with drag-to-resize column edges.
Data Grid Pinned ColumnsPro
A data grid with columns that pin to the start or the end while the rest scrolls.
Data Grid Sticky HeaderPro
A scrolling data grid whose header stays in view.
Data Grid Column VisibilityPro
A data grid with a menu to show and hide columns.
Data Grid Loading SkeletonPro
A data grid that shows skeleton rows while data loads.
Data Grid Column TotalsPro
A data grid with a totals row in the footer.
Data Grid Row PinningPro
A data grid with rows that can be pinned to the top or the bottom.
Data Grid Tree RowsPro
A data grid with nested rows that expand like a tree.
Data Grid Localized LabelsPro
A data grid with every built-in label replaced through the i18n prop.
Data Grid Server PaginationPro
A data grid that pages, sorts and filters through a server-style data source.
Grid core
40- Grid Cell Actions
Grid Cell ActionsPro
A row action menu button with a separator before destructive items and a label that names the row.
- Grid Cell Avatar
Grid Cell AvatarPro
A person cell: a round initials badge or image beside the name and an optional second line.
- Grid Cell Badge
Grid Cell BadgePro
A status pill for grid cells with a tone per value, a dot and the text itself, so meaning never depends on colour.
- Grid Cell Delta
Grid Cell DeltaPro
A signed change with an arrow, colour and hidden words, with an invert option for measures where down is good.
- Grid Cell Link
Grid Cell LinkPro
A link cell that opens external URLs in a new tab with a hidden notice, and renders unsafe protocols as plain text.
- Grid Cell Progress
Grid Cell ProgressPro
A thin progress bar with the percentage beside it, clamped to 0 to 100 and exposed as a progressbar.
- Grid Cell Rating
Grid Cell RatingPro
A read-only star rating for a cell with the text alternative '3 of 5'.
- Grid Cell Sparkline
Grid Cell SparklinePro
A tiny line chart for a cell, coloured by direction and described to screen readers by its start, end, low and high.
- Grid Checkbox Editor
Grid Checkbox EditorPro
A boolean cell that is always editable: a checkbox that saves as soon as it changes, with no edit mode.
- Grid Clipboard
Grid ClipboardPro
Copy a range of cells as tab separated text and paste into editable cells, using browser copy and paste events so no permission prompt appears.
- Grid Column Chooser
Grid Column ChooserPro
A popover with a checkbox per column, a visible count on the button, locked columns and a guard that keeps at least one column on screen.
- Grid Column Order
Grid Column OrderPro
A column order list with move up and move down buttons that announce the new position, as the keyboard friendly alternative to dragging headers.
- Grid Column Resizer
Grid Column ResizerPro
A drag handle and keyboard separator for resizing a column: arrow keys, Shift for bigger steps, Home and End for the limits, double click to reset.
- Grid Context Menu
Grid Context MenuPro
A right click menu for grid cells with copy cell, copy row, filter by this value and sort by this column.
- Grid Date Editor
Grid Date EditorPro
An in-cell date editor on a native date field with earliest and latest limits and an inline error when the date is out of range.
- Grid Date Filter
Grid Date FilterPro
A date column filter with after, before and between, using native date fields and ISO dates.
- Grid Density Toggle
Grid Density TogglePro
A compact, default and comfortable row density switch built as a radio group with arrow key navigation, paired with row heights for the grid.
- Grid Editable View
Grid Editable ViewPro
An editable grid: Enter, F2 or double click opens the editor for the column kind, with Delete to clear, undo and redo, an edited-cell mark and validation.
- Grid Export Menu
Grid Export MenuPro
An export menu that downloads the visible columns as CSV, TSV or JSON for all rows or for the selection, with spreadsheet formula protection.
- Grid Filter Chips
Grid Filter ChipsPro
One removable chip per active filter written in words, plus a Clear all button, so people always see why rows are missing.
- Grid Filter Panel
Grid Filter PanelPro
A header filter button that opens the right filter for the column kind (text, number, date or value list) and marks itself when a filter is active.
- Grid Floating Filters
Grid Floating FiltersPro
A row of compact filter inputs sitting under the header, one per column and sized to the column widths.
- Grid Footer Aggregates
Grid Footer AggregatesPro
A footer row of totals aligned to the column widths: sum, average, minimum, maximum, count or distinct count per column.
- Grid Group Bar
Grid Group BarPro
Chips for the columns a grid is grouped by, with move earlier, move later and remove buttons and a select to add another level.
- Grid Group Row
Grid Group RowPro
The header row of a group: a disclosure button with the group value, row count and per-group aggregates, indented by depth.
- Grid Grouped View
Grid Grouped ViewPro
A virtualised grid grouped by one or more columns, with expandable group rows, row counts and per-group aggregates.
- Grid Header Menu
Grid Header MenuPro
A column header with a menu to sort ascending or descending, clear the sort, pin to either edge, autosize and hide the column.
- Grid List View
Grid List ViewPro
The list layout of a grid: one card per row, virtualised, with arrow, Home, End and Page key navigation and position announcements.
- Grid Number Editor
Grid Number EditorPro
An in-cell number editor with minimum, maximum and step, an empty field that saves null, and range errors announced in place.
- Grid Number Filter
Grid Number FilterPro
A number column filter with equals, comparisons and a between range that shows a second field.
- Grid Pagination Bar
Grid Pagination BarPro
A pagination footer with a range label, a rows per page select and previous and next buttons, for grids that page instead of scrolling.
- Grid Quick Filter
Grid Quick FilterPro
A search field that filters every column at once, with a clear button, Escape to clear and a polite match count.
- Grid Range View
Grid Range ViewPro
A grid with spreadsheet style range selection: drag, Shift-click, Shift+arrows, Ctrl+A, and a status line that sums the numbers in the range.
- Grid Select Editor
Grid Select EditorPro
An in-cell select that saves on change, cancels with Escape or when focus leaves, and takes plain strings or value and label pairs.
- Grid Set Filter
Grid Set FilterPro
A searchable checklist of a column's distinct values with row counts, select shown and clear, for status, team and category columns.
- Grid Status Bar
Grid Status BarPro
A footer line with the row count, the selected count and, for a numeric column, the sum, average, minimum and maximum of the selection.
- Grid Text Editor
Grid Text EditorPro
An in-cell text editor: Enter saves and moves down, Tab saves and moves on, Escape cancels, leaving saves, and a failed check keeps it open with an alert.
- Grid Text Filter
Grid Text FilterPro
A text column filter with an operator select (contains, equals, starts with, ends with, blank) and a field that clears the filter when emptied.
- Grid Textarea Editor
Grid Textarea EditorPro
A multi-line cell editor that opens as a small panel over the cell: Enter adds a line, Ctrl+Enter or Cmd+Enter saves, Escape cancels.
- Grid View
Grid ViewPro
A virtualised data grid with ARIA grid roles, one tab stop, arrow and page key navigation, sortable headers, pinned columns, row selection and full-width rows.
Surfaces and icons
4
FrameFree
A muted frame that holds one or more panels with a header and footer, with nested corners that stay concentric.
Icon TileFree
A square tile that gives icons a consistent surface, in outline, elevated, soft, solid and framed styles.
Icon StackPro
An isometric stack of layers with an icon on top, for feature lists and empty states.
File Type IconFree
A file type icon for 99 extensions in brand and family colours, with outline, solid, light and mono variants, six sizes and a lookup from a file name, URL or MIME type.
Navigation helpers
1
Form patterns
25
Input With Character CounterPro
A labelled text input with a live character counter and a maximum length.
Input With Required IndicatorPro
A labelled input that marks the field as required.
Multi-Field FormPro
A compact form with several inputs, a select and a submit button.
Password Input With Reveal TogglePro
A password field with a forgot-password link and a show or hide toggle.
Password Strength HintPro
A password input with a dynamic hint and icons that list unmet rules.
Password Strength MeterPro
A password input with a progress meter and a live checklist of requirements.
Range Input With ValuePro
A range slider input that shows its current value.
Textarea With Character LimitPro
A textarea input group with a character limit that updates as you type.
AI Prompt Textarea With ToolbarPro
A prompt textarea with attach, model and send actions in a toolbar.
AI Prompt With AttachmentsPro
A prompt box with file and context attachments and a menu of actions.
Member Row With RolePro
An input group with an avatar, a name and a role menu.
Project Save BarPro
An input group with a status indicator and save actions.
API Request InputPro
An input group with a method selector and a send action.
Order Search With Status FilterPro
A search input group with a popover of status filters.
Share Link InputPro
A share link field with a visibility selector and a copy button.
Settings Form With ValidationPro
A settings form with inputs, a textarea, a checkbox and a switch.
Permission SettingsPro
A group of permission checkboxes with descriptions.
Notification PreferencesPro
A notification preferences form with grouped switches and checkboxes.
Form With Validation ErrorsPro
A form that shows field-level errors and descriptions.
Card Checkbox GroupPro
A group of selectable card checkboxes.
Nested Checkbox GroupPro
A parent checkbox that selects and partially selects its children.
Access Level SelectPro
A select whose options carry a short description.
Timezone SelectPro
A select of time zones grouped by region with UTC offsets.
AutocompletePro
A text input that suggests matches as you type and lets you keep free text, built on Base UI.
Number FieldPro
A numeric input with increment and decrement buttons, a scrub area, min and max, and locale-aware formatting.
Carousel
18- Carousel Kit
Carousel KitFree
The parts every tealmac carousel is built from: a labelled carousel region, viewport, numbered slides, arrows, dots, a counter and the hooks to drive effects, on Embla.
Carousel ThumbsPro
A large carousel with a draggable thumbnail strip that follows it; choosing a thumbnail moves the main slide.
Carousel ParallaxPro
Slides whose background layer drifts against the slide as it scrolls, with the text staying put; flat when reduced motion is on.
Carousel ScaleFree
A centred looping carousel where the middle slide is full size and the slides beside it shrink as they move.
- Carousel Fade
Carousel FadePro
Slides stacked in one place that cross-fade: swipe, arrow keys, dots and buttons, with hidden slides inert.
Carousel AutoplayPro
A looping slide show with a Pause button, a progress bar, dots and arrows that holds still for the pointer, focus, a hidden tab or an off-screen carousel.
- Carousel Vertical
Carousel VerticalPro
A carousel on the vertical axis with Up and Down keys, side dots and buttons, and a configurable number of slides in view.
Carousel LoopPro
An endless carousel that wraps from the last slide to the first, centres the selected slide, scales its neighbours down and shows its position.
Carousel Free ScrollFree
A drag-and-fling row of cards that glides with momentum and stops anywhere, with edge fades, scroll buttons and a progress bar.
Carousel PeekFree
A responsive carousel with one slide and a peek of the next on phones, two or three per view on wider containers, paged dots and a "Showing 1-2 of 6" readout.
Carousel ARIAFree
The tabbed carousel from the WAI-ARIA Authoring Practices: optional rotation button, previous and next, and a roving tablist that selects one tabpanel slide.
Carousel SnapFree
A carousel with no carousel library: a native scroll-snap row with buttons that scroll by a page and a position readout.
Carousel Auto ScrollPro
A row that glides on its own and loops without a seam, with a Pause button, hold on hover or focus, drag to scrub and a plain scrollable row for reduced motion.
Carousel StackPro
A deck of cards: drag the top card away, or use the arrows, and it goes to the back of the pile; only the top card is exposed to assistive technology.
Carousel Lightbox GalleryPro
A thumbnail grid that opens a modal viewer holding a looping carousel with swipe, arrow keys, captions and a position readout; Escape closes it and focus returns to the thumbnail.
Carousel CoverflowPro
A cover-flow shelf where the centred cover faces you and the covers beside it turn away in 3D, flat with reduced motion.
- Carousel Depth Rail
Carousel Depth RailPro
A scroll-snap rail of cards that recede in depth as they leave the centre, driven by the scroll position.
- Carousel Glass Edge Flow
Carousel Glass Edge FlowPro
An endless row of cards whose left and right edges are frosted glass, so cards blur and fade as they enter and leave.
Comboboxes and pickers
18- Autocomplete History
Autocomplete HistoryPro
A search field that lists recent searches when empty and recents then suggestions while typing, with Delete to forget one, Clear history and optional localStorage.
Autocomplete InlinePro
A text field that completes your word in grey after the caret, accepted with Tab, Right Arrow or End and hidden with Escape, with no popup.
CascaderPro
Columns of options where choosing one opens its children in the next column, with keyboard navigation, lazy loading, hover expansion and a path value.
Cascader MultiPro
Columns of options with checkboxes for choosing several leaves from a tree, with checked, mixed and unchecked parents and a live count.
- Cascader Select
Cascader SelectPro
A dropdown for choosing a path through a tree: the field shows the full path, the panel is a column cascader, and typing switches to a flat list of full paths.
- Combobox Async
Combobox AsyncPro
A combobox whose options come from a request: debounced typing, a cancelled stale request, loading, empty and error states with Retry, and the selected option kept between searches.
- Combobox Chips
Combobox ChipsPro
A multi-select combobox that shows the picks as removable chips inside the field, with a selection limit and a live count, built on the Base UI Combobox.
- Combobox Creatable
Combobox CreatablePro
A multi-select combobox that creates what it does not have: a Create row for unmatched text, async creation, duplicate and validation checks.
- Combobox Field
Combobox FieldPro
A single-select combobox with a real input, type-to-filter, descriptions, disabled options, a clear button and form submission, built on the Base UI Combobox.
- Combobox Fuzzy
Combobox FuzzyPro
A single-select combobox with typo-tolerant ranking and highlighted matched letters, plus hidden keywords, using Fuse.js.
- Combobox Grouped
Combobox GroupedPro
A single-select combobox for sectioned options with pinned group headings, remaining counts while filtering and empty groups hidden.
- Combobox Sheet
Combobox SheetPro
A searchable single-select that is a popover on desktop and a bottom sheet with large rows on phones, sharing one list.
Combobox VirtualizedPro
A combobox for lists of thousands of options that renders only the visible rows, with keyboard scrolling and position/size announcements, using TanStack Virtual.
- Mention Input
Mention InputPro
A textarea that suggests people, tags or channels after a trigger character such as @ or #, tracks inserted mentions as ranges and highlights them.
- Pie Menu
Pie MenuPro
A radial menu that opens around a button: icon wedges at equal angles, pointer selection by angle, arrow-key stepping and the chosen label shown in the middle.
Pie Menu ContextPro
A context menu drawn as a ring around the pointer: right-click or long-press to open, release over a wedge to choose, and the Menu key opens it from the keyboard.
- Select Panel
Select PanelPro
A select with described options: icon, title, a sentence of help and a tag, grouped under headings with an optional footer, built on the Base UI Select.
- Slash Input
Slash InputPro
A textarea with a slash-command menu at the start of a line: grouped commands filtered by label and keywords, inserting snippets with a caret marker.
Enterprise
30- Angle Slider
Angle SliderFree
A circular handle for choosing an angle from 0 to 359 degrees, with wrap-around, markers and snapping, for gradients, shadows and rotation.
- Breadcrumb Overflow
Breadcrumb OverflowPro
A breadcrumb that folds its middle levels into a menu when the trail is long, keeping the root and the nearest parents visible.
Collection PreferencesPro
The settings dialog of a data table: page size, density, wrap lines, striped rows, and column visibility with reordering, applied on confirm.
- Contextual Save Bar
Contextual Save BarPro
The bar that appears when a form has unsaved changes, with Discard and Save, a busy state and a Ctrl or Cmd plus S shortcut.
DescriptionsFree
Read-only label and value pairs in a responsive grid with column spans, a bordered table look, a title and an extra slot, rendered as a description list.
File Path BarPro
A file browser location bar: clickable segments, an editable full path on Ctrl+L or F6, and a copy button.
FlagFree
A persistent message card with an icon, title, description, up to two actions and a dismiss button, for things that need attention but not a decision.
- Flag Group
Flag GroupPro
A corner stack of Flags with a visible limit, a queue, auto-dismiss timers that pause on hover and focus, and a hook to add and remove flags.
- Floating Panel
Floating PanelPro
A draggable, resizable, non-modal panel that floats over the page, stays in the viewport, minimises and moves from the keyboard.
Incident BannerFree
A status-page style banner for a live incident with the severity written out, a title, a newest-first update timeline and one action.
Inline ConfirmPro
A button that swaps in place for "Are you sure? Yes / No", with no popup, focus on the safe choice and a timeout back.
- Inline Edit
Inline EditFree
Text that turns into a field in place with confirm and cancel buttons, validation, an async save and focus returned to the text afterwards.
- Inline Edit Select
Inline Edit SelectPro
A value that becomes a select when activated and saves the moment an option is chosen, for statuses, owners and priorities in a detail view.
Inline Edit TextareaPro
Multi-line text that edits in place: Enter adds a line, Ctrl or Cmd plus Enter saves, Escape cancels, with an optional character counter.
- Knob
KnobPro
A rotary value control on a 270-degree arc, dragged vertically, with arrow, page and wheel control, for audio and dense tool panels.
Meter GroupFree
One bar split into labelled parts against a total, with a legend that carries the numbers, for storage, budgets and quotas.
Number ScrubPro
A numeric input whose label is a drag handle: scrub sideways to change the value with Shift for 10x and Alt for 0.1x, or type it, step it with arrows.
Path StagesPro
A guided path of chevron stages for pipelines and approvals: completed stages with a check, the current stage, upcoming ones, all clickable.
- Popconfirm
PopconfirmFree
A small confirmation anchored to the control that opened it, with a title, a consequence line and Yes/No actions that stay busy while an async confirm runs.
Ring ProgressPro
A ring split into sections, each its own share of the circle, with content in the hole, for sprint progress and multi-state completion.
Selection BarPro
A floating toolbar of bulk actions that appears when rows are selected, with the count, your actions and a clear button.
- Sliding Button
Sliding ButtonPro
Slide to confirm: a handle that must reach the end of its track to fire an action, with built-in keyboard control, busy and done states.
SplitterFree
Resizable panels with minimum, maximum and collapsible sizes, keyboard separators that report their size, and drag that reverses in right-to-left layouts.
StatisticFree
A single figure with a title, prefix, suffix, precision, locale grouping, a custom formatter, a tone and a loading state.
- Status Light
Status LightPro
A status dot that also carries a glyph per variant (check, cross, warning, info, dot), so positive and negative differ without colour.
Status LozengePro
A compact uppercase label for the state of an item (done, in progress, removed, new, moved) in subtle or bold, with truncation.
- Toggle Tip
Toggle TipPro
An info button that opens a short explanation on click or Enter, so the help works on touch, can hold links and closes on Escape.
Trial BarFree
A slim app bar showing days left in a trial with a progress line and an upgrade action, urgent in the last three days.
Uptime BarPro
A row of daily or hourly status ticks with an uptime percentage and a live readout, navigable by keyboard with a single tab stop.
WatermarkFree
A faint tiled text mark over its content for confidential documents and drafts, drawn as an SVG overlay that cannot block clicks and restores itself if removed.
Mobile and touch
24- Bottom Sheet
Bottom SheetFree
A modal sheet that rises from the bottom edge, rests at snap points you choose, drags and flings between them, and closes with Escape, the overlay or a downward drag.
- Responsive Dialog
Responsive DialogPro
One dialog API that renders a centred dialog on wide screens and a bottom sheet on phones, chosen by a breakpoint, so a form is written once.
Action SheetPro
The iOS-style list of choices about one thing, with destructive styling and a separate Cancel button, opened from a bottom sheet.
- Swipe Drawer
Swipe DrawerPro
A side or edge drawer that follows a finger: drag it away to close, drag from the screen edge to open, with start and end edges that flip in right-to-left text.
Tab BarFree
Bottom navigation for three to five destinations in four looks (iOS, Material, pill, glass) with badges, safe-area padding and aria-current.
App BarPro
The top bar of a screen with leading and trailing actions and an optional large title that collapses into the bar as the content scrolls.
Floating Action ButtonFree
The main-action button in plain, small, large and extended forms; the extended form collapses to its icon on scroll and keeps its name for screen readers.
Speed DialFree
A floating button that fans out three to six related actions as a menu, with arrow-key navigation, Escape and outside-press to close.
Swipe ActionsPro
A list row that reveals actions on a sideways drag, with optional full-swipe commit, rubber banding, RTL support and an arrow-key route for keyboard users.
Pull To RefreshFree
A scroll area you pull down from the top to reload, with a resisting indicator, a live-region status and an always-reachable Refresh button for keyboard and mouse.
Undo BarPro
The snackbar that follows a delete or archive and offers to take it back, with a time-left bar that pauses on hover and focus.
List RowFree
The mobile list row and its grouped container: leading visual, title, subtitle, trailing value, chevron, in an inset-grouped or plain edge-to-edge style.
- Section List
Section ListFree
A grouped list with sticky section headings and an alphabet index that jumps on tap or drag, announces the letter and works with a keyboard.
Swipe TabsFree
Tabs whose panels sit in a scroll-snapping row so a swipe changes tab natively, with an indicator that follows the finger and full WAI-ARIA tab keyboard support.
- Pinch Zoom
Pinch ZoomFree
A zoom and pan container for maps, diagrams and photos: pinch, double tap, Ctrl or Cmd plus wheel, drag, +/-/0 keys and on-screen buttons, with bounds so content never leaves the box.
Image ViewerFree
A full-screen photo viewer with pinch and double-tap zoom, swipe sideways to change photo, swipe down to close, arrow keys, buttons and a spoken position.
- Mobile Search Bar
Mobile Search BarPro
The phone search field in two platform forms: an iOS rounded field with a sliding Cancel button and an Android pill that becomes a full bar with a back arrow.
Persistent SheetPro
A non-modal panel that stays at the bottom edge and is dragged between snap heights while the content behind it stays usable, as in a maps app.
- Sheet Stack
Sheet StackPro
Push-and-pop navigation inside a sheet, drawer or any box, with a Back button named after the previous page, focus on the new heading and Escape to step back.
Long Press MenuPro
Wraps a card or photo so press-and-hold, right click or the Menu key opens an action sheet about it, and the press that opens it does not also tap it.
Safe AreaPro
A wrapper that pads its content by the device's safe-area insets (notch, rounded corners, home indicator) with a minimum, swapping start and end for right-to-left text.
Sticky Action BarPro
The bottom bar of primary buttons for a form or checkout: it stays in view, clears the home indicator and rides up above the on-screen keyboard.
- Slide To Confirm
Slide To ConfirmPro
A slider that makes a paid or risky action harder to trigger by accident: drag the thumb to the end, or activate it with the keyboard.
Picker SheetFree
A select for touch screens: a button that shows the choice and opens a bottom sheet with large rows, optional search and single or multiple selection.
Trees and transfer
14
Tree ViewFree
An ARIA tree with roving focus, arrow-key navigation, typeahead, single or multiple selection and a headless hook, in one file.
Sortable TreeFree
A tree whose rows reorder and nest by drag and drop, or from the keyboard with Alt and the arrow keys, with spoken feedback.
Checkbox TreePro
A tree of checkboxes where a branch is checked, unchecked or partly checked from its leaves, with full keyboard support.
Tree SelectPro
A select whose options are a tree, with search that opens the matching branches, single or multiple choice and a combobox popup that follows the ARIA pattern.
Tree TablePro
A table with expandable parent rows (role treegrid), sortable columns that sort within each parent and row navigation by keyboard.
Async TreeFree
A tree that loads each branch the first time it opens, with a busy row, a spoken status, an error state and a retry.
- Filterable Tree
Filterable TreePro
A tree with a search field that keeps matching rows and the branches above them, opens them, marks the matched text and announces the count.
Virtual TreePro
A tree for tens of thousands of rows that renders only the rows in view while keeping exact aria-level, position and set size.
File ExplorerPro
A file tree with icons by type, in-place rename on F2 with validation, Delete handling and version control marks that are also spoken.
Tree NavPro
Site or docs navigation as a tree: a nav landmark whose rows are links, with aria-current on the page, branches opened to it and optional badges.
Transfer ListFree
Two lists with buttons between them to move items across, with search, select-all, move-all, disabled items and spoken results.
Transfer TreePro
Two checkbox trees that keep the hierarchy while you move leaves between them; a branch leaves a pane when it runs out of leaves.
Transfer TablePro
Two tables with a checkbox on each row and columns for the details people need to decide, with search over every column.
Pick ListFree
A transfer list where the order of the chosen items matters, reordered by drag, by four order buttons or with Alt and the arrow keys.
Date and time
22
Availability GridPro
A week-by-hour grid where people paint the times they are available by dragging or with the keyboard, with day toggles and disabled cells.
Business Hours EditorPro
Seven rows of open or closed switches with one or more time ranges per day, overlap detection and a copy to all days action.
Calendar GridFree
An accessible month grid for single dates, ranges or whole weeks in any Intl calendar (Persian, Hijri, Hebrew, Buddhist and more), with ISO values.
Clock Face PickerPro
An analogue clock face for picking a time: hours first, then minutes, by tap, drag or arrow keys, with an inner ring for 24-hour clocks.
Date FieldFree
A segmented date input: day, month and year are separate spinbuttons in the order of the locale, typed or stepped with the keyboard, with an ISO date value.
Date Range FieldFree
Two segmented date fields for a start and an end, joined into one range value with reversed-range and length validation.
- Date Time Field
Date Time FieldPro
A segmented date plus time input that reports one local date-time string, with a default time so picking just a day completes the value.
Duration FieldPro
A segmented length-of-time input for days, hours, minutes and seconds that reads and writes ISO 8601 durations such as PT1H30M.
Month PickerFree
A year-at-a-glance grid of twelve months with year paging and min, max and unavailable months, giving a YYYY-MM value.
Month Range PickerPro
Two years of month grids in which two clicks choose a span of months, with a hover preview, a longest-span limit and a YYYY-MM range value.
Quarter PickerPro
A year with four quarter buttons that name their months, for financial reports, OKRs and planning, giving a YYYY-Qn value.
Range CalendarPro
An inline date range picker panel: preset rail, typed start and end fields and a two-month calendar, kept in sync, with an optional Apply step.
Range PresetsPro
A radio list of named date ranges such as last 7 days, this quarter or year to date, computed from today and the locale's first weekday.
Recurrence PickerPro
A repeat rule editor for daily, weekly, monthly and yearly events with an interval, weekdays, day of month and an end, producing a rule object and an RRULE string with a live list of upcoming dates.
Relative Range PickerPro
A super date picker: quick ranges, relative windows (last or next N units, optionally rounded) and absolute start and end, with the resolved window and a now-15m expression.
Time FieldPro
A segmented time input with hour, minute, optional second and a day period for 12-hour locales, typed or stepped from the keyboard, with an HH:mm value.
Time Range FieldPro
Two segmented time fields for a start and an end with the length shown, a minimum and maximum duration and optional overnight ranges.
Time Slot PickerPro
A grid of bookable times for one day, generated from a range and step or passed in, with taken slots, morning and afternoon groups and a time zone note.
Week PickerPro
A calendar in which a click selects the whole ISO week, with week numbers, hover highlight and a YYYY-Www value.
Weekday PickerPro
Seven toggle buttons for the days of the week, ordered from the locale's first day, with a minimum, disabled days and weekday and weekend shortcuts.
- Wheel Picker
Wheel PickerPro
An iOS-style drum picker of one or more scroll-snap columns with looping, typeahead and keyboard control, for times, dates and any short list.
Year PickerPro
A paged grid of years with min, max and unavailable years, for birth years, model years and annual reports.
Form engines
13
Auto FormFree
Render a complete, accessible form from a JSON Schema (or a zod schema through z.toJSONSchema): strings, numbers, booleans, enums, nested objects and arrays, with built-in validation and per-field overrides.
Field ArrayFree
A repeatable group of form rows with add, remove and keyboard reorder (Alt+Arrow), min and max limits, stable row keys, focus management and spoken announcements.
- Form Autosave
Form AutosaveFree
A useAutosave hook and a status indicator: debounced saves with a single request in flight, a queued follow-up for edits made while saving, retry on failure, and a polite Saving, Saved or Failed announcement.
Form DialogPro
A dialog that holds a form: pending and error states, a guard against closing with unsaved input, and an imperative promise API (await openForm(...)) that resolves with the submitted values or null.
- Form Error Summary
Form Error SummaryPro
A summary of every error in a form: it takes focus after a failed submit, and each message is a link that moves focus to the field that needs fixing.
Form SectionsPro
Section navigation for long forms: a sticky list of anchor links that tracks the section in view, shows error counts and completed marks, and moves focus to the section heading you pick.
- Form Store
Form StoreFree
A dependency-free form state store with typed field subscriptions, validation on change, blur and submit, schema support, nested paths and array helpers.
Matrix FieldPro
A grid question for surveys and ratings: one row per statement, one column per answer, as native radios (or checkboxes), with per-row errors, a required check and a layout that scrolls on narrow screens.
Ranking FieldPro
Order a list by preference: drag a handle with the pointer, or pick up with Space and move with the arrow keys, or use the move buttons; changes are announced, and an optional top-N cut-off marks what counts.
Read-Only FieldPro
Show form values as read-only text instead of disabled inputs: a description list with typed values (date, currency, list, link, secret, color, file) and a mode switch that swaps controls for their preview.
RHF FieldPro
React Hook Form adapter: a Controller wrapped in a Field with label, description, error and ids wired, plus a submit button, a form-level error and a helper that maps server errors onto fields.
- Server Action Form
Server Action FormPro
A form for React 19 server actions: useActionState wiring, per-field errors and values kept after a failed submit, a pending submit button and a live status message.
Unsaved Changes BarPro
A contextual save bar that appears when a form is dirty: Save and Discard actions, Cmd/Ctrl+S, a polite announcement, a save error, and a hook that warns before the tab closes.
Uploads and media
9
CSV Column MapperPro
A three-step CSV import: choose a file, map its columns to your fields (matched automatically by name), review the first rows and the rows that failed validation, then import. Includes a quote-aware CSV parser.
File FieldPro
A form field for files built on react-dropzone: click, drop, paste or press Enter; accept, size and count rules with readable rejection messages; a removable file list with image previews, and Field-style label, hint and error.
Folder DropzonePro
Drop a whole folder or pick one: it walks the directory tree, keeps each file's relative path, skips junk such as .DS_Store and node_modules, enforces a file limit and summarises what was found.
Image CropperPro
Crop, zoom and rotate an image with Cropper.js 2: aspect-ratio choices, a round avatar mask, keyboard and button controls for every move, a live size readout and a Blob result at the size you choose.
Image UploadPro
A single-image field for avatars, covers and logos: choose, drop or paste, with type, size and minimum-dimension checks, a preview, Replace and Remove, and an upload progress overlay.
- Resumable Upload
Resumable UploadPro
Chunked uploads that survive pauses, dropped connections and page reloads: a useResumableUpload hook with a tus 1.0 adapter, per-chunk retry with backoff, pause and resume from the server's offset, plus a ready card with speed and time left.
- Upload Queue
Upload QueuePro
A headless useUploadQueue hook: validates files, uploads with a concurrency limit, tracks per-file and overall progress, retries, cancels and removes, with an XHR uploader that reports real progress.
Uppy UploaderPro
An upload dashboard on Uppy's core engine: restrictions, a file list with progress, retry and remove, total progress, and your own upload function (fetch, S3, anything) instead of a bundled transport.
- Webcam Capture
Webcam CapturePro
Take a photo with the camera: permission and error states, a camera chooser, an optional countdown, a mirrored preview, retake, and a File result. Tracks stop as soon as the camera is not needed.
Color
9- Color Area
Color AreaPro
A two-dimensional saturation and brightness area for a hue, with a pointer thumb and two native range inputs for the keyboard and screen readers, spoken in plain words.
Color FieldPro
A text field for colors that parses hex, rgb() and hsl() (and names), shows the result in the format you choose, flags what it cannot read, and exports the color math the rest of the color family shares.
Color Picker PanelPro
A complete color picker made of the color family: area, hue and opacity sliders, hex field, eyedropper and preset swatches, in a panel or a popover, with the hue kept steady when the color goes gray or black.
Color SliderPro
A single-channel color slider (hue, saturation, brightness or alpha) whose track shows the colors you would get, built on a native range input so keyboard, touch and screen readers work.
Color Swatch PickerPro
Choose one color from a palette: a radio group of swatches with arrow-key navigation across rows, color names for screen readers, a check mark that stays readable on any swatch, and value matching that ignores hex case and length.
Color WheelPro
A hue ring you drag around or step with the arrow keys, built on a native range input for assistive technology, with the selected hue spoken in degrees and as a color family.
Contrast CheckerPro
Check text and background colors against WCAG 2.2 contrast: the ratio (never rounded up), AA, AAA and non-text results, a live preview, swap, and a button that suggests the closest foreground that passes.
- Eyedropper Button
Eyedropper ButtonPro
A button that picks a color from anywhere on the screen with the browser EyeDropper API, hides or disables itself where the API does not exist, handles cancel, and returns a hex string. Includes a useEyeDropper hook.
Gradient PickerPro
Build a CSS gradient: linear, radial or conic, with draggable and keyboard-movable color stops, add and remove, an angle control, a color editor per stop and copyable CSS.
Pickers and masks
3
Font PickerPro
Choose a font family from a searchable list where every option is drawn in its own typeface, with category filters, a live preview line, optional weights, a hook to load web fonts on demand and an opt-in list of fonts installed on the computer.
- Icon Picker
Icon PickerPro
A searchable grid of icons you provide, with name and tag search, a result count announcement, two-dimensional arrow-key navigation, a show-more limit for big sets and a popover version.
Masked InputPro
An input that formats as you type with a pattern such as (999) 999-9999: it keeps the caret in the right place, handles paste and Backspace over punctuation, returns the raw value, and reports when the mask is complete.
SEO and editorial
30- Article Meta Row
Article Meta RowPro
One row with everything a reader wants before an article: date, reading time, word count and an updated date when it differs, as a definition list that reads naturally.
- Byline
BylinePro
An author line for articles: avatar initials, name, role and a date, in one row that truncates gracefully and reads naturally to a screen reader.
- Citation Line
Citation LinePro
One formatted reference line (author, year, title, source, link) in a hanging indent, with a copy button for the plain text.
- Content Status Badge
Content Status BadgePro
A badge for the editorial state of a piece (draft, in review, approved, scheduled, published, archived) with an icon per state and a date when one applies.
- Crawl Status Row
Crawl Status RowPro
One row of a crawl report: the URL, HTTP status as a coloured code, depth, the page that linked to it and when it was last crawled, laid out so long URLs truncate.
- Drop Cap
Drop CapPro
A paragraph whose first letter is set large across three lines, in the serif face, with the letter kept inside the text so selection and screen readers see one word.
- Footnote Ref
Footnote RefPro
A superscript footnote reference that links to its note and carries a back-link target id, so a notes list can return the reader to the sentence.
- Hreflang Badge
Hreflang BadgePro
A small badge for a page's language and region (en-GB, de, x-default) with the full language name in hidden text, for translation tables and link lists.
- Index Status Pill
Index Status PillPro
A pill that says whether a page is indexed, excluded, pending or has an error, with an icon and text so the state never relies on colour.
- Keyword Chip
Keyword ChipPro
A keyword with its monthly volume and a difficulty dot that is also spelled out, removable when an onRemove handler is given.
- Kicker
KickerPro
The small label above a headline (section, series or category), optionally a link, in tracked uppercase with a coloured mark.
- Link Health Dot
Link Health DotPro
A dot and status code for a checked link: green for 2xx, amber for redirects, red for errors or no response, with the meaning in text.
- Meta Length Meter
Meta Length MeterPro
A bar and count for a title or description length against the search-result cut-off, standalone so it can sit under any field.
- Newsletter Field
Newsletter FieldPro
An email field and a subscribe button in one row with built-in validation, a pending state and an inline message, for footers and sidebars.
- Pull Quote
Pull QuotePro
A magazine pull quote: large serif text with an oversized opening mark and the speaker on a rule, as a proper figure with a blockquote.
- Rank Badge
Rank BadgePro
A search-position badge: the current position with an arrow and the change since last time, coloured and worded for up, down or no change.
- Reading Progress
Reading ProgressPro
A thin bar that shows how far through a page the reader is, driven by a value you pass or by the window's scroll position when none is given.
- Reading Time Badge
Reading Time BadgePro
A small badge that says how long a text takes to read, computed from a word count or the text itself, with the figure also in text for assistive tech.
- Redirect Arrow
Redirect ArrowPro
A from → to pair with the status code between them, flagging chains and loops in text, for redirect lists and audit findings.
- Schema Badge
Schema BadgePro
A badge that names the schema.org type a page carries (Article, Product, FAQPage) with a validity state, for CMS lists and audit tables.
- SEO Score Ring
SEO Score RingPro
A score from 0 to 100 drawn as a ring whose colour follows the good, needs-work and poor bands, with the number in the middle and the band in text.
- SERP Breadcrumb
SERP BreadcrumbPro
The grey breadcrumb line a search result shows above the title: domain, then path segments as words, truncated from the middle on narrow widths.
- SERP Snippet
SERP SnippetPro
A search-result card: site, breadcrumb path, blue title and a two-line description, cut where results pages cut them, for previews and documentation.
- Share Button
Share ButtonPro
One share button that uses the Web Share API where it exists and falls back to copying the link, announcing which happened.
- Sitemap Node
Sitemap NodePro
One node of a URL tree: the path segment, a status pill, child count and an expand toggle, built to nest inside a tree with the right ARIA.
- Social Card Preview
Social Card PreviewPro
How a link will look when shared: the Open Graph image, site name, title and description in the proportions X and LinkedIn use, with a missing-image state.
- Sparkline Metric
Sparkline MetricPro
A metric tile: label, big value, change against the previous period and a small sparkline of the last points, with the trend described in text.
- TOC List
TOC ListPro
A table-of-contents list for a known set of headings: nested levels, the current one marked, and an optional heading above it, for sidebars and article tops.
- Vital Gauge
Vital GaugePro
A Core Web Vitals gauge: the metric value on a bar split into good, needs-improvement and poor bands at the official thresholds, with the rating in text.
- Word Count Badge
Word Count BadgePro
A compact word count with an optional goal: the count, the goal, and a filled dot when the goal is met, in text a screen reader reads as one phrase.