Ultra modern monospace component library for React and Tailwind CSS v4 — AI cards, bento grids, dashboards, hero sections and animated pixel spinners.
Modern landing page hero section with badge, headline and avatar social proof.
For sighted users to preview content available behind a link.
An event badge on a D2 strap: a portrait, name, role and a short about, with contact links at the foot. The strap is a rope under gravity, so drag the card and it swings; click it and it turns over to a printed back. The faces are painted on a canvas from the card's own palette and repainted when the theme flips, and the links stay real links, with a keyboard plate under the card for screen readers. Give its parent a height.
Displays a form input field or a component that looks like an input field.
Add addons, buttons and helper content to inputs.
Accessible one-time password component with copy paste functionality.
A versatile component to display any content: media, title, description and actions.
Used to display textual user input from a keyboard.
Renders an accessible label associated with controls.
A logo rail that never stops, and one the main thread never touches. The travel is a Web Animations API transform rather than a per-frame write from JavaScript, so the browser owns the interpolation on the compositor and a busy page cannot make the rail stutter, which matters most on a landing page, where the frame the visitor is scrolling is the busiest one there is. The children are rendered twice, each copy carrying the gap as trailing padding, so the track is exactly two copies wide and a translate of half of it lands the second copy where the first one started: the seam is the reset, and it is invisible because the two halves are identical there. Hovering slows it rather than stopping it, through playbackRate rather than a new duration, so the pace changes from wherever the rail currently is instead of jumping to wherever new timing says it should have been; it is off on touch, where a tap would fire the enter and never the leave. The rail pauses itself while it is off screen and retimes without moving when a web font settles its width. Both edges are cut back into the page by gradients of the page's own background, so logos arrive and leave instead of being clipped, and the marks paint in currentColor through muted-foreground so they follow the host's theme rather than being inverted into it. Stops under prefers-reduced-motion.
The logo row with nothing moving in it: marks sitting still in ruled cells, which is the same shape a rack of machines comes in. A rail that travels says there are many of us; a rack that sits says these are the ones we run, so it is the right row under a fold about infrastructure rather than under one about reach. Every rule is the gap showing through a filled parent rather than a border on a cell, so a cell that wraps to a new line cannot double a rule up with its neighbour's and the hairline stays exactly one pixel at any column count. Two columns on a phone, four on a tablet, eight on a desktop, and the label sits over the rack rather than beside it because a rack has a top edge to hang from where a moving track does not. The marks are brand-showcase's, painted in currentColor through muted-foreground, so they follow the host's theme instead of being inverted into it, and a cell lifts to full ink on hover. Lifted out of hero-04 as a copy rather than an import: a section that had to pull in a whole hero to draw eight logos would install the plane, the nav and the copy with it. No dependencies and no client boundary.
A small inline marker for flagging state, such as unread, new or pinned.
A matte chip button with a holographic rim: three blurred glows pinned under the top edge, a bounce light along the bottom, and a gradient-clipped label and mask-painted icon. Four shadcn sizes with the corner curvature held constant, an expo-out hover that lifts the chip and pushes the ink, and a light theme that is the same layer stack with swapped tokens and a multiplied rim. Every custom property is defined on the button, so it needs nothing from the host stylesheet.
A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
A chat message row: avatar, author, timestamp and content.
A chat transcript scroller that sticks to the newest message and offers a jump-to-latest button.
Brushed-metal text: a bright band travels across the glyphs like a reflection, not a glow. Wraps any inline content, flips its stops per theme, and holds still under reduced motion.
A tipped night card on dashed layout guides: a crescent moon rises from behind a bank of clouds, then a small cloud drifts across it while the banks sway in parallax, a sparkle twinkles and two stars blink. Plays twice once it scrolls into view, with a replay button. Light and dark, reduced-motion aware.
A night tile: a crescent moon rises over a bank of clouds, then the clouds sway in parallax while a sparkle twinkles and two stars blink. Plays twice once it scrolls into view, with a replay button. Light and dark, reduced-motion aware.
A night window: a pale moon rises from behind dark hills in a round pane of stars, then the hills roll like a swell, the stars twinkle in three sets and the halo and sky glow breathe. Plays twice once it scrolls into view, with a replay button. Light and dark, reduced-motion aware.
A styled native HTML select element with consistent design system integration.
A collection of links for navigating websites.
A four-panel notification bento: a pure-CSS metallic bell on a lit dot-matrix field, recent activity feed, unread counter and delivery-channel toggles, with drifting holographic smoke on hover.
Pagination with page navigation, next and previous links.
One inverted panel, centred copy and two actions, the plain one. Two blurred lobes bleed in from opposite corners and are clipped by the panel, so what shows is the falloff rather than a circle with an edge. Built entirely on theme tokens with no dark: twin, and no dependencies at all.
The pixel-grid spinner engine every spinner preset builds on.
Displays rich content in a portal, triggered by a button.
An animated SVG illustration: a RAW chip charges and sends power along six wires to the tiles around it. Plain SVG and CSS, light and dark.
Responsive three-tier pricing cards with feature comparison and popular plan highlighting
E-commerce product card on the D2 card primitive: colour swatches that cross-fade the photo, a wishlist heart that swaps with a blur, a derived sale badge and an add-to-bag button whose icon and label swap in place. Reduced-motion aware.
Displays an indicator showing the completion progress of a task.
A frosted-glass progress pill with technical-drawing leader lines bracketing a monospace readout. Three levels of chrome — full, bar, plain — and two fill styles: a 6px beam or a three-row dot matrix. Every surface property is themeable — fill (solid or gradient), stroke, backdrop blur, drop and inner shadow — with glass and opaque presets shipped for light and dark. All colours resolve to oklch(), and fillFilter dresses the gradient alone so a caller can animate the value without touching the type or the ticks.
A set of checkable buttons, known as radio buttons, where no more than one can be checked at a time.
The RAW chip from Power Chip on its own: a static SVG illustration with no dependencies.
Accessible resizable panel groups and layouts with keyboard support.
Augments native scroll functionality for custom, cross-browser styling.
Displays a list of options for the user to pick from, triggered by a button.
Visually or semantically separates content.
Extends the Dialog component to display content that complements the main content of the screen.
A composable, themeable and customizable sidebar component.
Tabbed AI prompt input with assistant, blog and pro modes plus file upload.
Use to show a placeholder while content is loading.
An input where the user selects a value from within a given range.
An opinionated toast component for React.
An indicator that can be used to show a loading state.
A 4×4 pixel-grid loading spinner: 5 frames at 180ms (900ms loop).
A 5×5 pixel-grid loading spinner: 8 frames at 120ms (960ms loop).
A 5×5 pixel-grid loading spinner: 16 frames at 110ms (1760ms loop).