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.
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
