Ultra modern monospace component library for React and Tailwind CSS v4 — AI cards, bento grids, dashboards, hero sections and animated pixel spinners.
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.
Tabbed AI prompt input with assistant, blog and pro modes plus file upload.
AI writing assistant panel with assistant, blog and pro modes and a prompt field.
Displays a callout for user attention.
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.
Displays a card with header, content, and footer.
A control that allows the user to toggle between checked and not checked.
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 drawer component that slides in from the bottom or sides of the screen.
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.
Modern landing page hero section with badge, headline and avatar social proof.
Displays a form input field or a component that looks like an input field.
Renders an accessible label associated with controls.
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.
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 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.
The pixel-grid spinner engine every spinner preset builds on.
Responsive three-tier pricing cards with feature comparison and popular plan highlighting
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.
Displays a list of options for the user to pick from—triggered by a button.
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).
A 4×4 pixel-grid loading spinner: 4 frames at 180ms (720ms loop).
A 4×4 pixel-grid loading spinner: 12 frames at 110ms (1320ms loop).
A 3×3 pixel-grid loading spinner: 3 frames at 260ms (780ms loop).
A 5×5 pixel-grid loading spinner: 25 frames at 75ms (1875ms loop).
A 4×4 pixel-grid loading spinner: 4 frames at 160ms (640ms loop).
A 4×4 pixel-grid loading spinner: 6 frames at 180ms (1080ms loop).
A 4×4 pixel-grid loading spinner: 16 frames at 90ms (1440ms loop).