Accessible React and Tailwind v4 components, blocks and templates with native-app motion, built-in keyboard, RTL and translation support, and an MCP server for AI agents.
React Hook Form wired to Ballmac Field: one FormField renders label, control, description and error with ids, aria-invalid and aria-describedby linked, plus a pending submit button.
Pending submit example of Form.
Sign up example of Form.
A commit history with lane-routed branch and merge lines, branch and tag labels, authors and dates, selection, and listbox keyboard navigation.
Branches and a merge example of Git Graph.
Linear history example of Git Graph.
Wraps any content so a diagonal band of light sweeps across it on hover or keyboard focus, in white for images and dark surfaces or a soft shadow for light ones.
Image cards example of Glare Hover.
Light and dark tone example of Glare Hover.
An interactive WebGL dot globe (cobe) with markers, drag-to-spin momentum and arrow-key control. Colors come from theme tokens and repaint on theme change; starts lazily and pauses off-screen.
Hero horizon example of Globe.
Regions card example of Globe.
Wraps any content in a border drawn by a rotating conic gradient in theme colors, with a soft outer glow. Speed, width, radius and arc length are props; it stops at a still angle under reduced motion.
Buttons example of Glow Border.
Pricing highlight example of Glow Border.
Text filled with a gradient of theme colors that slowly drifts, or a shiny variant that sweeps a glint of light across it on a pause. Static under reduced motion; plain text in forced colors.
Flowing headline example of Gradient Text.
Shiny example of Gradient Text.
Neutral greys with near-black buttons and a calm blue focus ring. The safest starting point for any product.
A crisp square-grid background in the border color with optional dashed lines, filled cells, softly lighting random cells and an edge fade, drawn as one SVG pattern.
Dashed and flickering example of Grid Pattern.
Faded grid with highlighted cells example of Grid Pattern.
Sticky site header with brand, main links, sign-in and primary action, and an accessible mobile menu that closes on Escape or link tap.
Default example of Header 1: sticky with mobile menu.
Sticky header with brand, a mega menu of grouped links and a featured card, sign-in and primary actions. On phones the same links open in a slide-in sheet with accordions.
Default example of Header 2: mega menu with mobile sheet.
Simple links example of Header 2: mega menu with mobile sheet.
Split hero: badge, word-by-word headline, two calls to action and proof points on the left, a live product summary card on the right, over an animated grid.
Default example of Hero 1: split with product visual.
Centered hero for developer tools: headline, two actions, package-manager install tabs and a terminal window with a light beam tracing its border.
Default example of Hero 2: developer tool with install command.
Hero for AI products: a real prompt input on the left, and on the right a mock answer with a reasoning panel, a tool call and a streaming reply.
Default example of Hero 3: AI product with live prompt.
Split hero with a live pill, headline, two actions and headline stats beside a large draggable WebGL globe marking your regions.
Default example of Hero 4: split with interactive globe.
Centered hero for a Mac app: shiny highlighted headline, download button and requirements, over a laptop whose lid opens into view on a live app window.
Default example of Hero 5: Mac app with opening laptop.
Centered hero over a slowly drifting colour mesh, with gradient headline words and product cards that bob and follow the pointer. Cards stack below the buttons on phones.
Custom cards example of Hero 6: gradient mesh with floating cards.
Default example of Hero 6: gradient mesh with floating cards.
Centered hero with a browser frame that leans back and settles flat as you scroll. Ships a sample dashboard drawn with theme tokens; swap in a screenshot or your own UI.
Default example of Hero 7: product screen that tilts into view.
Your own screen example of Hero 7: product screen that tilts into view.
A small dependency-free tokenizer for the snippets developer UIs show: JSON, shell and curl, JavaScript and TypeScript, Python, Go, HTTP and .env, with theme-aware token colors.
Hand-drawn marks around inline text: highlight, underline, box, circle, strike-through and brackets, drawn in when the phrase scrolls into view.
All six marks example of Highlighter.
Marks in a paragraph example of Highlighter.
A compact preview of a linked resource that appears on hover or keyboard focus without hiding essential information.