Component LibrarySource via MCPComponents
React components your agent installs through the Niblet MCP, running live. Try one here, copy its build prompt for your agent, or open it to see it large and what it installs.
ai-assistants27
- Agent Planai-assistants
- Agent Stepsai-assistants
- Approval Cardai-assistants
- Chat Empty Stateai-assistants
- Citation Sourcesai-assistants
- Code Blockai-assistants
- Conversation Listai-assistants
- Diff Viewai-assistants
- Error Stateai-assistants
- Inline Editai-assistants
- Insight Cardsai-assistants
- Loading Stateai-assistants
- Memory Chipsai-assistants
- Message Actionsai-assistants
- Model Selectorai-assistants
- Prompt Composerai-assistants
- Quota Bannerai-assistants
- Reasoning Traceai-assistants
- Status Trackerai-assistants
- Streaming Textai-assistants
- Suggestion Bannerai-assistants
- Task Rowsai-assistants
- Thinking Dotsai-assistants
- Tool Chipsai-assistants
- Usage Meterai-assistants
- Voice Inputai-assistants
- Web Searchai-assistants
canvas61
- Ai Job CardsDisplays AI job card stacks that cycle by button press or vertical drag.
- Avatar PickerPresents an avatar stack that advances on horizontal swipes and confirms a tapped selection.
- Blind Pull ToggleDisplays a responsive pull control whose slat animation swaps between moon and sun icons.
- Bubble FieldCanvas field of outlined bubbles that react to nearby pointer and touch input. Each affected bubble expands, fades, and reforms in a repeating burst.
- Charging WidgetCircular charging indicator with liquid waves that rise with a looping count. The displayed percentage resets after reaching its target.
- Crypto SwapPresents a token swap card with live quotes, token pickers, and configurable slippage. Selecting a duplicate token flips the pair, while submission animates confirmation.
- Cube CarouselRotatable photo cube controlled by dragging or the arrow keys. Momentum carries the cube after a pointer gesture ends.
- Curious AiRenders a shader-driven orb that tracks pointer movement with animated eyes. Idle gaze and blink cycles continue when the pointer leaves the component.
- Danger StripesDisplays layered warning stripes with repeating text. Hovering jitters the stripes, while clicking briefly increases the motion.
- Delete ButtonPresents a staged account deletion control with a five-second countdown. The pending state offers undo before showing a temporary confirmation.
- Diamond GridRenders a seeded diamond grid with traveling ignition pulses. It adapts its canvas animation to visibility, theme, and reduced motion.
- Distortion GridRenders a canvas grid of curved lines with ambient wave distortion. Pointer proximity increases the wave amplitude and repels nearby lines.
- Dot GridRenders a canvas dot grid with theme-aware resting and highlight colors. Pointer movement brightens and enlarges nearby dots with eased falloff.
- Ds One ButtonDemonstrates a tokenized button family with hover, focus, pressed, and disabled states.
- Emoji BurstDisplays a button that emits a rotating set of emoji particles. Each press advances the theme and animates a radial burst around the label.
- Expanding TabsDisplays a pill-shaped tab list with icon-only inactive tabs. Selecting a tab expands it to reveal its label with layout animation.
- Flip CalendarRenders a draggable day calendar with a split-flap transition. Pointer movement tilts the card, while vertical swipes change the date.
- Floating CardsDisplays a stacked set of travel cards with animated hotel counts. Dragging the front card downward sends it behind the deck.
- Glitch ButtonRenders a terminal-styled button with a character scramble effect. Hovering replaces unresolved letters with symbols before restoring the label.
- Good VibesRenders variable-font text whose glyphs react to pointer and touch proximity. Nearby letters gain weight, scale, and spacing with eased falloff.
- Grid LinesRenders a canvas grid of connected dots with theme-aware coloring. Pointer proximity brightens the grid and pushes nearby nodes into a lens shape.
- Halo TypeRenders a rotating ring of individually positioned text glyphs. Hover and touch slow the rotation, while reduced motion freezes the ring.
- Jar Of EmotionsDisplays a physics-driven jar that dispenses selected emotion emoji. Clicking an emotion opens the lid and launches a matching body toward its button.
- Label CardsPresents a responsive stack of labeled portfolio cards. Hover and focus separate the overlapping cards while preserving their spread.
- Magnetic DotsRenders a canvas field of dots connected to spring-based positions. Pointer movement pulls nearby dots before they glide back into the grid.
- Magnetic Logo ClusterA swarm of logo marks that fly in from off-screen, settle into an overlapping diamond pack, breathe on an infinite GPU drift, and bend toward the cursor like iron filings around a magnet. Three motion behaviours run per icon: 1. Entry (one-shot spring): off-screen → rest, staggered across the pack. 2. Float (CSS @keyframes, GPU): infinite slow position drift + rotation sway. Compositor-driven,…
- Mark ToggleDisplays a responsive pill toggle with an icon-bearing thumb. Toggling slides the thumb and morphs its mark between an X and check.
- Mood TrackerPresents a weekly mood tracker with an editable daily rating. Selecting a mood animates the chart, summary, and current-day control.
- Neon ClockDisplays the current time and date with seven-segment neon digits. Active segments and calendar labels update from the local clock.
- New Project ModalPresents a new-project form that expands from its trigger button. Opening moves focus into the modal and submission validates the project title.
- Noise BgRenders a theme-aware canvas field of granular dots and connections. Pointer proximity changes the brightness of nearby particles and lines.
- Noise FieldRenders a canvas field of arrows following an organic flow pattern. Nearby arrows turn toward the pointer with distance-based easing.
- OrbitDisplays text arranged around a responsive elliptical orbit. Pointer movement shifts the ring perspective and its central marker.
- Particle ConstellationRenders a radial canvas constellation with bowed connecting strands. Pointer proximity repels nodes and bends nearby connections.
- Particle SphereRenders a shaded particle sphere with a Three.js point cloud. Pointer movement rotates the sphere while its particles continue drifting.
- Peel Corner RevealPresents a Wi-Fi card with a peelable corner containing a QR code. Hover teases the fold, while click and keyboard input lock the reveal open.
- Pill ToggleDisplays a responsive pill toggle with a sliding thumb. Toggling animates the thumb position and interpolates the track color.
- PlayfulRenders variable-font lettering that responds to pointer proximity. Nearby glyphs change width, weight, and position as the pointer moves.
- Polaroid StackPresents a responsive stack of labeled polaroid cards. Selecting a card brings it forward and rearranges the remaining stack.
- Radial CardsArranges activity cards around a continuously rotating radial track. Pointer engagement lifts and centers the nearest card for inspection.
- Radial ToolbarPresents formatting tools around an expandable radial menu. Opening fans the controls outward, while selection toggles each tool state.
- Responsive LettersRenders variable-font letters that react independently to pointer distance. Nearby glyphs adjust width, weight, slant, and scale with eased falloff.
- Ripple TypeRenders a word around a rotating fan of repeated glyph layers. Pointer engagement increases the ripple amplitude and rotation rate.
- Runway LoaderDisplays an airplane loader moving along a runway timeline. Progress advances through staged labels before the sequence restarts.
- Scramble TextDisplays words whose characters continuously scramble while idle. Hovering resolves each word from left to right before restoring the loop.
- Scroll Wipe GalleryPresents a full-frame photo gallery driven by scroll progress. Each section wipes over the previous image while updating its title.
- Signature PadPresents a signature modal with a velocity-sensitive drawing canvas. Pointer strokes can be erased, canceled, or confirmed into the trigger pill.
- Slice TypeRenders sliced typography that transitions between contrasting color modes. Hovering offsets the letter slices and reveals the alternate word treatment.
- Slide DeckPresents a responsive deck of numbered presentation slides. Dragging or using navigation controls moves the focused slide through the stack.
- Sphere LinesRenders a rotating canvas sphere from layered latitude lines. Pointer engagement accelerates the waves and distorts nearby line segments.
- Stack TowerRenders repeated words as a vertically rotating typographic tower. Hovering a row increases its scale while the stack continues cycling.
- Sticker WallPresents a physics wall where text and emoji stickers can be added and dragged. New stickers fall into the scene and collide with existing bodies and boundaries.
- Taga ToggleDisplays a responsive pill toggle with an expressive face on its thumb. Toggling slides the thumb and morphs the face between inactive and happy states.
- Task CardsPresents project tasks as a responsive overlapping card deck. Dragging or using arrow controls moves the selected task through the stack.
- Text Blur RevealReveals a short sentence through staggered blur and position transitions. The call-to-action appears after the final word finishes animating.
- Tilted CoverflowDisplays a tilted coverflow of captioned image cards. Dragging, tapping, or using the keyboard changes the centered slide.
- Upload ProgressPresents simulated file uploads in a collapsible progress card. Each transfer can be paused, resumed, canceled, or restarted after completion.
- Voice Chat PillPresents a voice-chat pill that expands into participant controls. Opening reveals selectable people and speaking indicators before collapsing again.
- Wave LinesRenders a theme-aware canvas field of vertically sampled wave lines. Pointer presence amplifies the field and repels nearby line segments.
- Wild MorphRenders a word whose corners warp through a matrix transform. Pointer position selects an upper or lower deformation before easing back at rest.
- X GridRenders a theme-aware canvas grid of connected cross marks. Pointer proximity brightens nearby marks and their connecting lines.
ds-one37
- Ds One Alertds-one
- Ds One Avatards-one
- Ds One Badgeds-one
- Ds One CardComponent-specific brain for `Card.tsx` (and the slot components: `CardHeader`, `CardContent`, `CardFooter`, `CardTitle`, `CardDescription`). Read alongside `design-systems/ds-one/rules.md` (system-wide rules) before extending or composing.
- Ds One Checkboxds-one
- Ds One CornerMarkersds-one
- Ds One DataTableds-one
- Ds One DateRangePickerds-one
- Ds One Drawerds-one
- Ds One EmptyStateds-one
- Ds One Gaugea demo reading so the bare component renders meaningfully. meaning: accent = live/healthy, warning = orange, fault = red. Pass '' for a unitless reading. the circle (mono xs, muted, uppercase). Centered when showValue is false. "<label or Gauge> <value> of <max><unit>" description.
- Ds One HeatGridFill step of a single cell, from empty (0) to the bright frontier (3).
- Ds One IconButtonPhosphor / Lucide icon. Pass either `icon` OR `children` for custom glyphs.
- Ds One Inputds-one
- Ds One MetricChartds-one
- Ds One MusicPlayerds-one
- Ds One NavItemOptional icon component rendered at 20px before the label. Override only when two distinct nav lists share a viewport and you don't want the active dot to animate between them. To get the slide between sibling NavItems, wrap the list in framer's <LayoutGroup>.
- Ds One PanelHeaderComponent-specific brain for `PanelHeader.tsx`. Read alongside `design-systems/ds-one/rules.md` (system-wide rules) before extending it.
- Ds One PanelMenuds-one
- Ds One PlanetPerceived brightness, 0 to 1, of a `#rgb` or `#rrggbb` color string. Anything it cannot parse reads as bright, which keeps the dark theme's additive glow as the default answer.
- Ds One ProgressBards-one
- Ds One RadarChartds-one
- Ds One Radiods-one
- Ds One SearchFieldds-one
- Ds One SegmentedControlds-one
- Ds One Sliderds-one
- Ds One Spinnerds-one
- Ds One StatTiledirection of the move; `polarity` decides whether that move is coloured as good (accent) or bad (fault). Exactly 0 is neutral: no glyph, muted. Which direction is the good one for this metric. `'lower-is-better'` for response time, latency, error rate, incident count — a drop there is an improvement and must not render red. `'none'` for readings with no good/bad sense at all (demand, headcount,…
- Ds One Tableds-one
- Ds One Tagds-one
- Ds One Textareads-one
- Ds One Toggleds-one
- Ds One Tooltipds-one
- Ds One TrendChartThe canonical multi-series time-series chart: one component that renders as line, area, or bar with a built-in mode toggle, custom tooltip, and toggleable legend. Built on recharts.
- Ds One UserCardds-one
- Ds One UserMenuds-one
- Ds One Waveformds-one
ds-two9
empty-states25
- Access Emptyempty-states
- Activity Emptyempty-states
- Api Key Emptyempty-states
- Board Emptyempty-states
- Cart Emptyempty-states
- Chart Emptyempty-states
- Error EmptyEverything the empty-state blocks share: the Iconly glyph set, the medallion the glyph sits in, the text anatomy, the action buttons and the small parts that make an empty panel read as part of a product rather than a poster. It ships as a second file inside every block's registry item, so `npx shadcn add @uikit/inbox-empty` still writes one working block. Two decisions worth knowing before you…
- Filter EmptyEverything the empty-state blocks share: the Iconly glyph set, the medallion the glyph sits in, the text anatomy, the action buttons and the small parts that make an empty panel read as part of a product rather than a poster. It ships as a second file inside every block's registry item, so `npx shadcn add @uikit/inbox-empty` still writes one working block. Two decisions worth knowing before you…
- Inbox EmptyEverything the empty-state blocks share: the Iconly glyph set, the medallion the glyph sits in, the text anatomy, the action buttons and the small parts that make an empty panel read as part of a product rather than a poster. It ships as a second file inside every block's registry item, so `npx shadcn add @uikit/inbox-empty` still writes one working block. Two decisions worth knowing before you…
- Integration EmptyEverything the empty-state blocks share: the Iconly glyph set, the medallion the glyph sits in, the text anatomy, the action buttons and the small parts that make an empty panel read as part of a product rather than a poster. It ships as a second file inside every block's registry item, so `npx shadcn add @uikit/inbox-empty` still writes one working block. Two decisions worth knowing before you…
- Invite EmptyEverything the empty-state blocks share: the Iconly glyph set, the medallion the glyph sits in, the text anatomy, the action buttons and the small parts that make an empty panel read as part of a product rather than a poster. It ships as a second file inside every block's registry item, so `npx shadcn add @uikit/inbox-empty` still writes one working block. Two decisions worth knowing before you…
- Locked EmptyEverything the empty-state blocks share: the Iconly glyph set, the medallion the glyph sits in, the text anatomy, the action buttons and the small parts that make an empty panel read as part of a product rather than a poster. It ships as a second file inside every block's registry item, so `npx shadcn add @uikit/inbox-empty` still writes one working block. Two decisions worth knowing before you…
- Maintenance EmptyEverything the empty-state blocks share: the Iconly glyph set, the medallion the glyph sits in, the text anatomy, the action buttons and the small parts that make an empty panel read as part of a product rather than a poster. It ships as a second file inside every block's registry item, so `npx shadcn add @uikit/inbox-empty` still writes one working block. Two decisions worth knowing before you…
- Not Found EmptyEverything the empty-state blocks share: the Iconly glyph set, the medallion the glyph sits in, the text anatomy, the action buttons and the small parts that make an empty panel read as part of a product rather than a poster. It ships as a second file inside every block's registry item, so `npx shadcn add @uikit/inbox-empty` still writes one working block. Two decisions worth knowing before you…
- Notification EmptyEverything the empty-state blocks share: the Iconly glyph set, the medallion the glyph sits in, the text anatomy, the action buttons and the small parts that make an empty panel read as part of a product rather than a poster. It ships as a second file inside every block's registry item, so `npx shadcn add @uikit/inbox-empty` still writes one working block. Two decisions worth knowing before you…
- Offline EmptyEverything the empty-state blocks share: the Iconly glyph set, the medallion the glyph sits in, the text anatomy, the action buttons and the small parts that make an empty panel read as part of a product rather than a poster. It ships as a second file inside every block's registry item, so `npx shadcn add @uikit/inbox-empty` still writes one working block. Two decisions worth knowing before you…
- Project EmptyEverything the empty-state blocks share: the Iconly glyph set, the medallion the glyph sits in, the text anatomy, the action buttons and the small parts that make an empty panel read as part of a product rather than a poster. It ships as a second file inside every block's registry item, so `npx shadcn add @uikit/inbox-empty` still writes one working block. Two decisions worth knowing before you…
- Quota EmptyEverything the empty-state blocks share: the Iconly glyph set, the medallion the glyph sits in, the text anatomy, the action buttons and the small parts that make an empty panel read as part of a product rather than a poster. It ships as a second file inside every block's registry item, so `npx shadcn add @uikit/inbox-empty` still writes one working block. Two decisions worth knowing before you…
- Saved EmptyEverything the empty-state blocks share: the Iconly glyph set, the medallion the glyph sits in, the text anatomy, the action buttons and the small parts that make an empty panel read as part of a product rather than a poster. It ships as a second file inside every block's registry item, so `npx shadcn add @uikit/inbox-empty` still writes one working block. Two decisions worth knowing before you…
- Schedule EmptyEverything the empty-state blocks share: the Iconly glyph set, the medallion the glyph sits in, the text anatomy, the action buttons and the small parts that make an empty panel read as part of a product rather than a poster. It ships as a second file inside every block's registry item, so `npx shadcn add @uikit/inbox-empty` still writes one working block. Two decisions worth knowing before you…
- Search EmptyEverything the empty-state blocks share: the Iconly glyph set, the medallion the glyph sits in, the text anatomy, the action buttons and the small parts that make an empty panel read as part of a product rather than a poster. It ships as a second file inside every block's registry item, so `npx shadcn add @uikit/inbox-empty` still writes one working block. Two decisions worth knowing before you…
- Table EmptyEverything the empty-state blocks share: the Iconly glyph set, the medallion the glyph sits in, the text anatomy, the action buttons and the small parts that make an empty panel read as part of a product rather than a poster. It ships as a second file inside every block's registry item, so `npx shadcn add @uikit/inbox-empty` still writes one working block. Two decisions worth knowing before you…
- Trash EmptyEverything the empty-state blocks share: the Iconly glyph set, the medallion the glyph sits in, the text anatomy, the action buttons and the small parts that make an empty panel read as part of a product rather than a poster. It ships as a second file inside every block's registry item, so `npx shadcn add @uikit/inbox-empty` still writes one working block. Two decisions worth knowing before you…
- Upload EmptyEverything the empty-state blocks share: the Iconly glyph set, the medallion the glyph sits in, the text anatomy, the action buttons and the small parts that make an empty panel read as part of a product rather than a poster. It ships as a second file inside every block's registry item, so `npx shadcn add @uikit/inbox-empty` still writes one working block. Two decisions worth knowing before you…
- Webhook EmptyEverything the empty-state blocks share: the Iconly glyph set, the medallion the glyph sits in, the text anatomy, the action buttons and the small parts that make an empty panel read as part of a product rather than a poster. It ships as a second file inside every block's registry item, so `npx shadcn add @uikit/inbox-empty` still writes one working block. Two decisions worth knowing before you…
footers18
- Ask Docs Footerfooters
- Careers Footerfooters
- Contact Card Footerfooters
- Link Search FooterEverything the footer blocks share: the icon set, the brand lockup, the social row and the bottom bar. The earlier blocks inlined their own glyphs so each file copied out whole. That stopped scaling once every footer needed the same wordmark, the same three social marks and the same bottom bar — eighteen copies of the same markup drift within a week. This ships alongside each block instead: the…
- Mega Sitemap FooterEverything the footer blocks share: the icon set, the brand lockup, the social row and the bottom bar. The earlier blocks inlined their own glyphs so each file copied out whole. That stopped scaling once every footer needed the same wordmark, the same three social marks and the same bottom bar — eighteen copies of the same markup drift within a week. This ships alongside each block instead: the…
- Minimal FooterEverything the footer blocks share: the icon set, the brand lockup, the social row and the bottom bar. The earlier blocks inlined their own glyphs so each file copied out whole. That stopped scaling once every footer needed the same wordmark, the same three social marks and the same bottom bar — eighteen copies of the same markup drift within a week. This ships alongside each block instead: the…
- Neural Grid FooterEverything the footer blocks share: the icon set, the brand lockup, the social row and the bottom bar. The earlier blocks inlined their own glyphs so each file copied out whole. That stopped scaling once every footer needed the same wordmark, the same three social marks and the same bottom bar — eighteen copies of the same markup drift within a week. This ships alongside each block instead: the…
- Newsletter FooterEverything the footer blocks share: the icon set, the brand lockup, the social row and the bottom bar. The earlier blocks inlined their own glyphs so each file copied out whole. That stopped scaling once every footer needed the same wordmark, the same three social marks and the same bottom bar — eighteen copies of the same markup drift within a week. This ships alongside each block instead: the…
- Policy FooterEverything the footer blocks share: the icon set, the brand lockup, the social row and the bottom bar. The earlier blocks inlined their own glyphs so each file copied out whole. That stopped scaling once every footer needed the same wordmark, the same three social marks and the same bottom bar — eighteen copies of the same markup drift within a week. This ships alongside each block instead: the…
- Region Picker FooterEverything the footer blocks share: the icon set, the brand lockup, the social row and the bottom bar. The earlier blocks inlined their own glyphs so each file copied out whole. That stopped scaling once every footer needed the same wordmark, the same three social marks and the same bottom bar — eighteen copies of the same markup drift within a week. This ships alongside each block instead: the…
- Release Feed FooterEverything the footer blocks share: the icon set, the brand lockup, the social row and the bottom bar. The earlier blocks inlined their own glyphs so each file copied out whole. That stopped scaling once every footer needed the same wordmark, the same three social marks and the same bottom bar — eighteen copies of the same markup drift within a week. This ships alongside each block instead: the…
- Sales Cta FooterEverything the footer blocks share: the icon set, the brand lockup, the social row and the bottom bar. The earlier blocks inlined their own glyphs so each file copied out whole. That stopped scaling once every footer needed the same wordmark, the same three social marks and the same bottom bar — eighteen copies of the same markup drift within a week. This ships alongside each block instead: the…
- Service Status FooterEverything the footer blocks share: the icon set, the brand lockup, the social row and the bottom bar. The earlier blocks inlined their own glyphs so each file copied out whole. That stopped scaling once every footer needed the same wordmark, the same three social marks and the same bottom bar — eighteen copies of the same markup drift within a week. This ships alongside each block instead: the…
- Social Proof FooterEverything the footer blocks share: the icon set, the brand lockup, the social row and the bottom bar. The earlier blocks inlined their own glyphs so each file copied out whole. That stopped scaling once every footer needed the same wordmark, the same three social marks and the same bottom bar — eighteen copies of the same markup drift within a week. This ships alongside each block instead: the…
- Token Stream FooterEverything the footer blocks share: the icon set, the brand lockup, the social row and the bottom bar. The earlier blocks inlined their own glyphs so each file copied out whole. That stopped scaling once every footer needed the same wordmark, the same three social marks and the same bottom bar — eighteen copies of the same markup drift within a week. This ships alongside each block instead: the…
- Trust Center FooterEverything the footer blocks share: the icon set, the brand lockup, the social row and the bottom bar. The earlier blocks inlined their own glyphs so each file copied out whole. That stopped scaling once every footer needed the same wordmark, the same three social marks and the same bottom bar — eighteen copies of the same markup drift within a week. This ships alongside each block instead: the…
- Waitlist FooterEverything the footer blocks share: the icon set, the brand lockup, the social row and the bottom bar. The earlier blocks inlined their own glyphs so each file copied out whole. That stopped scaling once every footer needed the same wordmark, the same three social marks and the same bottom bar — eighteen copies of the same markup drift within a week. This ships alongside each block instead: the…
- Wordmark Spotlight FooterEverything the footer blocks share: the icon set, the brand lockup, the social row and the bottom bar. The earlier blocks inlined their own glyphs so each file copied out whole. That stopped scaling once every footer needed the same wordmark, the same three social marks and the same bottom bar — eighteen copies of the same markup drift within a week. This ships alongside each block instead: the…
motion4
pricing7
primitives43
- Accordionprimitives
- Alertprimitives
- Alert Dialogprimitives
- Autosize Textareaprimitives
- Avatarprimitives
- Badgeprimitives
- Buttonprimitives
- Button Groupprimitives
- Calendarprimitives
- Cardprimitives
- Checkboxprimitives
- Collapsibleprimitives
- Commandprimitives
- Datetime Pickerregular expression to check for valid hour format (01-23)
- Dialogprimitives
- Dropdown Menuprimitives
- Dual Range Sliderprimitives
- Fieldprimitives
- Formprimitives
- Infinite Scrollprimitives
- Inline Codeprimitives
- Inputprimitives
- Input Groupprimitives
- Itemprimitives
- Labelprimitives
- Loading Buttonprimitives
- Navigation Menuprimitives
- Popoverprimitives
- Radio Groupprimitives
- Resizableprimitives
- Scroll Areaprimitives
- Selectprimitives
- Separatorprimitives
- Sheetprimitives
- Skeletonprimitives
- Sliderprimitives
- Spinnerprimitives
- Switchprimitives
- Tabsprimitives
- Textareaprimitives
- Toastprimitives
- Tooltipprimitives
- Use Toastprimitives
tables15
- Api Keys Tabletables
- Audit Log Tabletables
- Customers Tabletables
- Deployments Tabletables
- Feature Flags Tabletables
- Files Tabletables
- Inventory Tabletables
- Invoices Tabletables
- Leaderboard Tabletables
- Market Tabletables
- Orders Tabletables
- Payments Tabletables
- Team Members Tabletables
- Tickets Tabletables
- Top Pages Tabletables
uikit215
- Accordion Carduikit
- Accordion Filleduikit
- Accordion Generativeuikit
- Accordion Ghostuikit
- Account Access Carduikit
- Account Access Card Demouikit
- Ai Chat Carduikit
- Ai Chat Card Demouikit
- Alert 1uikit
- Alert 2uikit
- Alert 3uikit
- Alert 4uikit
- Alert Demouikit
- Animated Carduikit
- Animated SVG Chartuikit
- Animated SwitchKit UI — AnimatedSwitch An iOS-quality toggle switch. Pressing stretches the knob toward the far side (anchored to the side it currently sits on) and releasing springs it back round; dragging carries the knob across the track and commits to the nearest side on release, and a quick flick commits in the flick direction. The track color crossfades, optional knob icons rotate through a crossfade, a…
- Animated Switch Demouikit
- Animated Testimonialsuikit
- Animated Wave Footeruikit
- Animatedwave Footeruikit
- Area Chartuikit
- Autosize Textarea CustomizeYou can use `form.watch` to trigger auto sizing.
- Autosize Textarea Demouikit
- Autosize Textarea Dependeciesuikit
- Autosize Textarea Formuikit
- Autosize Textarea Max Heightuikit
- Autosize Textarea Refuikit
- Avatar StackKit UI — AvatarStack An overlapping avatar row that fans apart on hover. Hovering or focusing a single avatar lifts it and springs a name tooltip in above it; a "+N" pill expands the hidden members one by one with a stagger and morphs into a collapse button. Fully keyboard operable with roving focus, honors prefers-reduced-motion, and announces itself as a labelled group. Dependencies: framer-m…
- Avatar Stack Demouikit
- Bar Chartuikit
- Beam CardA card wrapped in an animated border beam from `border-beam` (Jakub Antalík, MIT, https://libraries.dev/beam). The beam either travels around the edge (rotate family) or breathes (pulse family), in four palettes, and reads the card's own border radius so it always hugs the corners. This wrapper adds a ready-made card surface with an eyebrow, title, description and slot, plus class-based dark/li…
- Beam Card Demouikit
- Beam SearchA search bar whose bottom edge lights up with a traveling beam while it has focus, using the `line` preset of `border-beam` (Jakub Antalík, MIT, https://libraries.dev/beam). The beam fades in on focus and out on blur via the library's `active` prop, so idle bars stay quiet. Controlled or uncontrolled value, Escape clears, and class-based dark/light detection. Dependencies: border-beam, lucide-r…
- Beam Search Demouikit
- Bento Griduikit
- Calendar Heatmapuikit
- Candlestick Chartuikit
- Chart Datauikit
- Chart Kituikit
- Chart Statesuikit
- Circular Navbaruikit
- Cohort Chartuikit
- Command PaletteDependencies: framer-motion, lucide-react, next-themes, @/lib/utils <CommandPalette isOpen={isOpen} onClose={() => setIsOpen(false)} />
- Command Searchuikit
- Command Search Demouikit
- Composed Chartuikit
- Custom Labeluikit
- Data Table1.5px stroke beside regular (400) text.
- Data Table DemoIconly / Bold / More Circle.
- Datetime Picker And Time Inputuikit
- Datetime Picker Calendar Settingsuikit
- Datetime Picker Demouikit
- Datetime Picker Disableduikit
- Datetime Picker Display Formatuikit
- Datetime Picker Formuikit
- Datetime Picker Granularityuikit
- Datetime Picker Hour Cycleuikit
- Datetime Picker Localeuikit
- Datetime Picker Placeholderuikit
- Datetime Picker Reffollowing are the ref operations which is equivalent to button.
- Datetime Picker Year Rangeuikit
- Depth Chartuikit
- Disclose Imageuikit
- Dockuikit
- Dock Demouikit
- Dock Glassuikit
- Dual Range Slider Custom Labeluikit
- Dual Range Slider Demouikit
- Dual Range Slider Dependeciesuikit
- Dual Range Slider Label Positionuikit
- Dual Range Slider Singleuikit
- Dynamic Island Demouikit
- Event Calendaruikit
- Expandable Action Bar Demouikit
- Face RatingKit UI — FaceRating A five-level feedback rating where one large SVG face morphs between moods. Hovering a segment previews its mood — the mouth path, eye squash, eyebrows and stroke color all spring to the new level — and clicking commits it with a quick joy bounce. Works controlled or uncontrolled, moves with ArrowLeft/ArrowRight as a radio group, and honors prefers-reduced-motion. Dependenci…
- Face Rating Demouikit
- Faq Tabs Carduikit
- Faq Tabs Card Demouikit
- Feedback Demouikit
- Floating Label Customizeuikit
- Floating Label Formuikit
- Floating Label Inputuikit
- Floating Label Input Demouikit
- Floating Navbaruikit
- Floatingparticle Footeruikit
- Follow ButtonKit UI — FollowButton A morphing social follow/unfollow button. Following springs the pill's width to fit the new label, crossfades the solid fill into an outline, and draws a check in; hovering or focusing the followed pill previews a rose "Unfollow" affordance, and clicking again dips and morphs back. Works controlled or uncontrolled, honors prefers-reduced-motion, and exposes its state to sc…
- Follow Button Demouikit
- Footeruikit
- Footers Demouikit
- Github Profile Carduikit
- Heading With Anchoruikit
- Histogram Chartuikit
- Hold To ConfirmKit UI — HoldToConfirmButton A press-and-hold confirmation button for destructive actions. Holding the button (pointer, Space or Enter) fills a circular progress ring around the icon; releasing early springs the ring back and nothing fires. Holding to completion fires onConfirm exactly once, draws a check in with a spring pop, staggers the label swap behind it, tints the button emerald and then…
- Hold To Confirm Demouikit
- Holographicuikit
- Http Status Codeuikit
- Icon Dependenciesuikit
- Image Previewuikit
- Image Preview Dependenciesuikit
- Indicator Chartuikit
- Infinite Scroll DemoIntentionally delay the search by 800ms before execution so that you can see the loading spinner. In your app, you can remove this setTimeout.
- Infinite Scroll Dependeciesuikit
- Infinte Scroll Dependeciesuikit
- Inkuikit
- Input Modeluikit
- Kanbanboarduikit
- Kbd KeyKit UI — KbdKey & KbdCombo A semantic <kbd> element rendered as a 3D keycap that physically depresses when the real key is pressed — via a global keydown listener or a pointer tap. Press-down is instant (keys feel mechanical) and release springs back with a tiny overshoot. KbdCombo strings caps together ("meta+k"); when every key is held at once the whole combo pulses and onTrigger fires. Honor…
- Kbd Key Demouikit
- Like ButtonKit UI — LikeButton A heart like-button micro-interaction. Liking pops the heart with a spring scale, fires a ring pulse plus a radial particle burst, and rolls the count up like an odometer; unliking rolls it back down. Works controlled or uncontrolled, honors prefers-reduced-motion, and exposes its state to screen readers via aria-pressed. Dependencies: framer-motion, @/lib/utils <LikeButton…
- Like Button Demouikit
- Line Chartuikit
- Loading Button As Childuikit
- Loading Button Demouikit
- Loading Button Dependenciesuikit
- Loading Button Usageuikit
- Login Carduikit
- Market Chartuikit
- Market Heatmapuikit
- Metal ButtonA pill button framed by a real-time liquid-metal ring. The ring is painted by `metal-fx` (Jakub Antalík, MIT, https://metal.jakubantalik.com): one shared WebGL shader drives every instance on the page, pauses offscreen and renders a transparent placeholder on the server. This wrapper adds the button surface, sizes, and class-based dark/light detection so the ring matches a shadcn-style `.dark`…
- Metal Button Demouikit
- Metal Prompt BarAn AI prompt bar whose send button wears a live liquid-metal ring painted by `metal-fx` (Jakub Antalík, MIT, https://metal.jakubantalik.com). The chips beside it are passed to MetalFx as reflection targets, so in dark mode they pick up a soft mirrored glint of the ring — the composer from the metal-fx showcase, wired for React state: auto-growing textarea, Enter to send, Shift+Enter for newline…
- Metal Prompt Bar Demouikit
- Morph ButtonKit UI — MorphButton A multi-state async action button. Clicking runs your action while the pill morphs its width to fit each state's content: a rotating arc spinner while loading, an emerald check that draws in on success, or a rose X with a tight shake on error — then it melts back to idle. Works controlled or uncontrolled, honors prefers-reduced-motion, and announces every state to screen re…
- Morph Button Demouikit
- Multiple Selector Commandpropsuikit
- Multiple Selector Controlleduikit
- Multiple Selector Creatableuikit
- Multiple Selector Demouikit
- Multiple Selector Dependenciesuikit
- Multiple Selector Disableduikit
- Multiple Selector Fixed Optionuikit
- Multiple Selector Hide Clear Alluikit
- Multiple Selector Manually Controlleduikit
- Multiple Selector Max Selecteduikit
- Multiple Selector Max Text Lengthuikit
- Multiple Selector No Default Selectuikit
- Multiple Selector No Placeholder When Selecteduikit
- Multiple Selector RefAn example for focus on input when component mounted. I commented it out because it will affect the demo page.
- Multiple Selector With Async Searchuikit
- Multiple Selector With Async Search And Creatableuikit
- Multiple Selector With Async Search And Creatable And Groupuikit
- Multiple Selector With Async Search And Onfocusuikit
- Multiple Selector With Disable Optionsuikit
- Multiple Selector With Formuikit
- Multiple Selector With Groupuikit
- Multiple Selector With Sync Searchuikit
- Multiple Step Form Demouikit
- Nav List Carduikit
- Nav List Card Demouikit
- Navbar Demouikit
- Notification BellKit UI — NotificationBell A bell icon button micro-interaction. When the unread count increases the bell swings from its hinge like a settling pendulum while the clapper wiggles the opposite way in phase, and a rose badge springs in and rolls its count like an odometer. A dot mode swaps the number for an indicator that pings once per increase. Honors prefers-reduced-motion and announces unread…
- Notification Bell Demouikit
- Number Ticker Demouikit
- Orbital Lettersuikit
- Order Bookuikit
- Password StrengthKit UI — PasswordStrengthInput A password input with an animated strength meter and requirements checklist. Typing fills a four-segment meter sequentially with a spring, the strength label crossfades between "Too weak" and "Strong", and each satisfied rule draws a check into an emerald circle. Includes an eye visibility toggle, works controlled or uncontrolled, honors prefers-reduced-motion, an…
- Password Strength Demouikit
- Pie Chartuikit
- Portfolio Chartuikit
- Price Chartuikit
- Product Carduikit
- Profile Dropdownuikit
- Progress With Valueuikit
- Progress With Value Dependenciesuikit
- Quantity StepperKit UI — QuantityStepper An animated quantity input for carts and forms. A rounded pill holds a minus button, a rolling value and a plus button. Changing the value rolls the digits vertically in the direction of travel, pressing a button gives it a quick squish, and pushing past min or max shakes the value with a brief rose tint. Holding a button repeats the step with acceleration. Works contro…
- Quantity Stepper Demouikit
- Radar Chartuikit
- Radial Chartuikit
- Reaction BarKit UI — ReactionBar A Slack-style emoji reaction row. Chips toggle your reaction with a quick emoji pop and a direction-aware rolling count; hovering a chip springs the emoji up, and a "+" button opens a popover strip — scaling out of its trigger — where emojis stagger in left-to-right so new reactions can be added. Escape or an outside click closes the picker and returns focus to the trigger.…
- Reaction Bar Demouikit
- Recent Activityuikit
- Recent Activity Demouikit
- Responsive Modaluikit
- Responsive Modal Dependenciesuikit
- Responsive Modal Sideuikit
- Scratch CardKit UI — ScratchCard A scratch-to-reveal card. An HTML5 canvas foil covers the content and is erased on pointer drag, emitting dust particles while scratching. Once the cleared area passes the reveal threshold, the remaining foil fades out and onReveal fires exactly once. Dependencies: framer-motion, @/lib/utils <ScratchCard onReveal={() => {}} ariaLabel="Scratch to reveal your coupon"> <Coupon…
- Scratch Card Demouikit
- Share ButtonA share trigger that fans out into a row of action buttons. Opening springs each action out from behind the trigger with a 30ms stagger while the share icon morphs into an X; closing reverses the stagger. Ships an optional copy-link action with emerald success feedback, tooltip labels on hover, keyboard support (focus moves to the first action, Tab and arrow keys cycle, Escape closes and restor…
- Share Button Demouikit
- Sidebar Navbaruikit
- Skeleton Carduikit
- Skeleton RevealKit UI — SkeletonReveal A placeholder that pulses while loading, then cross-fades and un-blurs into the real content. The motion is the "Skeleton loader and reveal" recipe from transitions.dev (Jakub Antalík): its namespaced `t-skel` CSS is embedded verbatim (with one change — the content layer stays in flow so the slot sizes itself), and this component drives the `is-pulsing` / `is-revealed` /…
- Skeleton Reveal Demouikit
- Sparkline Chartuikit
- Spinner Demouikit
- Spinner Dependenciesuikit
- Spinner Sizeuikit
- Spinner Toggleuikit
- Spinner With Textuikit
- Stackedcircular Footeruikit
- Star RatingKit UI — StarRating An animated star rating input. Hovering previews the rating with a spring fill and a small scale wave around the pointer, clicking commits with a pop and a tiny amber sparkle burst, and an optional rolling value label tracks the current or previewed rating. Works controlled or uncontrolled, supports fractional read-only display, honors prefers-reduced-motion, and exposes rad…
- Star Rating Demouikit
- Stat Cardsuikit
- Status Badgeuikit
- Swipe To DeleteKit UI — SwipeToDelete A swipeable list-item wrapper that reveals a delete action, iOS style. Drag the row left to uncover a rose action zone; the trash icon pops the moment the drag passes the commit threshold, and releasing past it (or flinging) snaps the row fully open, collapses the item and fires onDelete. Pointer users get a preview instead of an overlaid button: hovering or focusing the…
- Swipe To Delete Demouikit
- Tab Navbaruikit
- Task CheckboxKit UI — TaskCheckbox A deeply satisfying todo checkbox row. Checking fills the box with a snappy spring, draws the check in, pops the box and fires a tiny confetti burst while a strikethrough sweeps across the label; unchecking reverses quickly with no fanfare. Works controlled or uncontrolled, honors prefers-reduced-motion, and exposes real checkbox semantics via role="checkbox" and aria-chec…
- Task Checkbox Demouikit
- Testimonialsuikit
- Text StatesKit UI — TextStates A status label that swaps its text in place: the old text exits up with a touch of blur, the new one enters from below. The motion is the "Text states swap" recipe from transitions.dev (Jakub Antalík) — its namespaced `t-text-swap` CSS is embedded verbatim, including the reduced-motion guard — and this component runs the recipe's three-phase class sequence whenever the `text…
- Text States Demouikit
- Tilt CardKit UI — TiltCard A 3D perspective tilt card. The surface rotates toward the pointer with spring smoothing, TiltCardItem children lift toward the viewer on their own translateZ depth for a parallax effect, and a glare highlight follows the pointer across the card. Tilt only engages for mouse pointers and is disabled entirely under prefers-reduced-motion. Dependencies: framer-motion, @/lib/utils…
- Tilt Card Demouikit
- Toast Stackuikit
- Toast Stack Demouikit
- Transfer Funds Carduikit
- Transfer Funds Card Demouikit
- Tree Navuikit
- Tree Nav Demouikit
- Undo PillKit UI — UndoPill An inline undo pill with a draining countdown ring. When opened it springs in from below, drains an SVG ring over the given duration while counting the remaining seconds, and fires onExpire when time runs out. Hovering or focusing the pill pauses the countdown; clicking Undo (or pressing Escape while focus is within) fires onUndo and exits with a quick bounce. Honors prefers-r…
- Undo Pill Demouikit
- Use Surface ThemeKit UI — useSurfaceTheme Resolves "auto" to "dark" or "light" by reading a `.dark`/`.light` class on <html> first (shadcn / next-themes convention) and falling back to the OS preference, updating live on either change. metal-fx and border-beam only know about the OS preference, so their wrappers use this to follow the app's own theme toggle.
- Use Typewriteruikit
- Value Positionuikit
