Ultra modern monospace component library for React and Tailwind CSS v4 — AI cards, bento grids, dashboards, hero sections and animated pixel spinners.
A vertically stacked set of interactive headings that each reveal a section of content.
A three-step agent workflow, caught mid-run: one step done, one spinning, one still pending. Each row dims as a whole rather than muting its label, icon and badge separately: a pending step is one thing that has not happened yet, not three greyed pieces. Every surface is a theme token, the spinner drops out under prefers-reduced-motion, and the only dependency is lucide-react.
AI prompt template grid with creative prompts, summarizer, story, poetry and study presets.
Pro version content creation card
Glassmorphic AI content generator card with content type and tone pickers and a prompt field.
AI writing assistant panel with assistant, blog and pro modes and a prompt field.
Displays a callout for user attention.
A modal dialog that interrupts the user with important content and expects a response.
Displays content within a desired ratio.
A file attachment chip with a preview, name, size and a remove action.
An image element with a fallback for representing the user.
Displays a badge or a component that looks like a badge.
A glass pill with a beam travelling along its lower edge. The chip under it is deliberately quiet, one tinted plate and a hairline border with the ink coming up to full under the cursor, because a louder face would compete with the light rather than carry it. The plate, the border and the top sheen are tokens, and the beam is told to follow the host theme with them, so the pill reads on a white page and on a black one without a second set of colours. Four palettes, the shadcn size scale with the padding opened a step for the round corners, and the beam takes a switch so the still version is the same chip with the light off. Renders an anchor when handed an href, a button otherwise.
Bento grid for an education program platform with admin overview, faculty view and a program form.
A five-card feature bento with metallic-gradient glyphs on lifting icon tiles, a dot-matrix texture and color-dodged glow revealed on hover, and a holographic brand ring tracing each card. Motion-driven, theme-aware, and reduced-motion aware.
A flat 3×2 feature grid on thin edge-masked rules — no cards, no fills. Each cell pairs a recessed keycap icon tile with a sans-serif title and monospace description; on hover the tile's inner shadow flips inward and the icon cross-fades from grey to the D2 holographic gradient. Motion-driven, reduced-motion aware.
A four-card services bento on marching dashed blueprint frames. Hover blooms each card's icon from blue to the D2 holographic gradient, scrambles the Clean Code snippet from grey to syntax colour, brightens the Web Design screen wash and speeds up the Future Forward brand marquees. Responsive down to mobile — the grid restacks and the card illustrations shift rather than shrink — and below lg, where there is no pointer, a tap plays the hover state for a few seconds instead. GSAP-driven, theme-aware and reduced-motion aware.
A four-card studio bento on a masked dot field. Each card is a Figma gradient export carrying its own glass fill and 16px border; an ambilight sampled from the artwork blooms behind the grid as the section scrolls through, and the cards rise and brighten on the same switch. The bolt card lights its own grain with a radar ping, the AI card runs five out-of-phase sweeps down its stripes, and the globe card spins a cobe sphere with projected visitor chips. Below lg the section becomes a still picture — no ambilight, no ripple, no sphere — and the artwork is rasterised to a canvas once instead of re-running eighteen SVG blurs per paint; the globe card swaps the sphere for the stat deck it was carrying. Theme-aware and reduced-motion aware throughout.
AI feature showcase with smart summarizer, creative prompts, document analysis and engagement metrics cards.
A logo wall that rotates instead of scrolling. A marquee asks the eye to track a moving target; this holds a page of six still long enough to read, then crossfades the next one in behind a hair of blur and scale, so every logo gets the same three seconds rather than the same two inches of travel. Every page stays mounted and stacked, which is what lets the incoming one be laid out before it fades and what makes the section as tall as its tallest page rather than a number written into it. Pages are always full, wrapping back to the start rather than leaving a short last row, so any number of logos fills a six-column grid. No rules between the cells: the marks sit on the page's own ground, so the only thing bounding a logo is the space around it. Twelve wordmarks ship inlined and painted in currentColor, because a logo cloud that waits on a dozen network round trips shows twelve empty cells first. Reduced motion stops the rotation outright. No dependencies.
Displays the path to the current resource using a hierarchy of links.
A chat message bubble that aligns and colours itself by sender.
Displays a button or a component that looks like a button.
A container that groups related buttons together with consistent styling.
A date field component that allows users to enter and edit a date.
Displays a card with header, content, and footer.
A carousel with motion and swipe built using Embla.
brand-showcase's rolling wall with the blur put back. The frame never moves and only the marks do: each cell is a window over a column holding every mark that cell will ever show, and a page change translates that column by exactly one cell height, which is transitions.dev's text-states-swap geometry, old mark leaving upward and new mark arriving from below, written as one transform on one element. The difference is where the blur sits. On the sharp version there is none, because two marks physically travelling do not need bridging the way a crossfade does; here it is per mark rather than per page, so the arriving mark sharpens as it lands and the leaving one dissolves as it goes, and two wordmarks passing through one window read as a single thing changing rather than as two objects. It costs no state and no keyframe: every mark already knows whether it is the active one, so the blur is a plain A-to-B transition riding the same curve and the same per-cell delay as the roll, interruptible, with nothing to keep in sync with the transform. The stagger is what makes it read as a wall repainting rather than a slide changing: 45ms per cell, so the change crosses the row as a wave, since six cells turning at once is a cut. Every mark is exactly one cell tall by grid row sizing rather than a measured pixel offset, so nothing has to be recomputed on resize. Pages are always full, wrapping back to the start rather than leaving a short last row, so any number of logos fills a six-column grid. No rules between the cells: the marks sit on the page's own ground, so the only thing bounding a logo is the space around it, and the window each column rolls through is still there, just no longer drawn. The marks are brand-showcase's, inlined and painted in currentColor, because a logo cloud that waits on a dozen network round trips shows twelve empty cells first. Reduced motion stops the rotation outright, read in JS rather than guarded in CSS, because a stopped transition on a running timer would still change the logo and only make it a hard cut.
Beautiful charts built using Recharts, themed from CSS variables.
A control that allows the user to toggle between checked and not checked.
An interactive component which expands and collapses a panel.
Autocomplete input and command palette with a list of suggestions.
Fast, composable, unstyled command menu for React.
A one-screen hero on a plain background: a 20ft shipping container built as a real box in CSS 3D, three quarters on, hangs from a crane hook on four slings over its soft shadow. It swings on its cable with a little wind and takes a shove from a passing pointer; the loop runs only while the hero is on screen, and under reduced motion the crate hangs still. No dependencies; it scales to the stage, so it fits a phone, a short landscape screen or a desktop alike. Theme-aware.
Displays a menu to the user, such as a set of actions or functions, triggered by a right click.
The card surface pricing-01 is built on: header, content, footer and a title/description pair.
Hotel booking dashboard with guest and vacancy stats, booking search and a check-in and check-out table.
A bento scaffold rather than a finished bento: nine slots in the scattered arrangement an integration diagram wants, with one emphasised centre, and a `slots` prop keyed 1 to 9 for what goes in them. Anything left out draws itself as a dashed placeholder over a dots or hatch texture, so the layout is legible before there is any content, which is the point of shipping the frame apart from what fills it. A filled slot is a card and an empty one is the outline of where a card will go, so only the empty state is dashed and translucent. The grid flows dense, so a slot spanning two columns does not leave the hole before it empty, since the scatter is the layout rather than a side effect of it. Both textures are painted in `--border` rather than a fixed grey, so they track the same token as the dashed edge around them and invert with the host instead of smearing light grey across a dark card. The grid itself is headless, with no section, no heading and no background, so it drops straight into a hero. No dependencies and no client hooks.
A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
A provider that sets the reading direction, left-to-right or right-to-left, for the components beneath it.
A drawer component that slides in from the bottom or sides of the screen.
Displays a menu to the user, such as a set of actions or functions, triggered by a button.
Use the Empty component to display an empty state.
Combine labels, controls, and help text to compose accessible form fields and grouped inputs.
A single upload row mid-flight: a PDF badge, the filename, a thin progress rail and the byte count under it. The bar is a plain width rather than an animated one: an illustration is a still of a moment, and a bar that replayed to 24% every time the card scrolled into view would be telling a story it does not have. The rail carries real progressbar semantics so a screen reader gets the number. Theme tokens throughout.
Building forms with React Hook Form and Zod.
Startup mentorship landing hero with a headline, call to action and mentor avatar group.
Premium landing page hero with a serif accent headline, badge and mentor avatar group.