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.
Three columns example of Kanban 1: project board with drag and keyboard moves.
A responsive task board with pointer drag and keyboard movement between columns.
Overview example of Kanban Board.
States and variants example of Kanban Board.
Keyboard key and shortcut display built on the semantic <kbd> element, in three sizes, with KbdGroup for combinations like ⌘ ⇧ K. Adapts inside tooltips.
Default example of Kbd.
A searchable shortcut cheat sheet, inline or in a dialog opened by pressing ?, with Command or Ctrl keys chosen for the viewer's platform and spoken key names.
Dialog opened with ? example of Keyboard Shortcuts.
Searchable cheat sheet example of Keyboard Shortcuts.
A five-page store with a bag that persists across pages: a collage home, a filterable shop, a product page with glaze and gallery pickers, a bag with a free-shipping meter and promo code, and a validated checkout. Products are drawn in CSS.
Bag example of Kiln & Co: online store.
Checkout example of Kiln & Co: online store.
Home example of Kiln & Co: online store.
Product example of Kiln & Co: online store.
Shop example of Kiln & Co: online store.
A compact, semantic row of key metrics that adapts from one to four columns.
Overview example of KPI Row.
States and variants example of KPI Row.
An accessible form label built on Radix Label that dims itself when the paired peer control is disabled and never selects text on double-click.
Default example of Label.
A notched aluminium laptop drawn in CSS that scales with its container. Renders children, an image or a video as the screen, and can open its lid when it scrolls into view.
Dashboard example of Laptop Frame.
Midnight, opens on scroll example of Laptop Frame.
The macOS Launchpad: a frosted full-area overlay with search, pages of app icons sized to fit, page dots, wheel and key paging, arrow-key focus across pages and Escape to close.
Many apps and paging example of Launchpad.
Open launcher example of Launchpad.
A five-page site for a Mac app: an interactive desktop hero, a menu-bar tour, a native-features bento, a device lineup, license-or-subscription pricing, a download page, release notes and support.
Download example of Ledger: Mac app.
Home example of Ledger: Mac app.
Pricing example of Ledger: Mac app.
Support example of Ledger: Mac app.
What’s new example of Ledger: Mac app.
A magnifying lens that follows the pointer over an image or any content, moves with the arrow keys when focused, hides on Escape and keeps the copy inside it out of the accessibility tree.
Magnifying text example of Lens.
Product image example of Lens.
Soft beams of theme-colored light fanning down from the top edge, each swaying and breathing at its own pace, deterministic so the server and browser match.
Hero spotlight example of Light Rays.
Tones and count example of Light Rays.
A compact loading status with staggered token-colored dots that stop for reduced motion.
Overview example of Loading Dots.
States and variants example of Loading Dots.
A full-screen lock screen in two flavors: macOS (live clock, avatar, password field that shakes when wrong) and iOS (clock, notification stack, flashlight and camera, swipe up to unlock). Hydration-safe clock.
iOS in a phone example of Lock Screen.
macOS password lock example of Lock Screen.
Centered sign-in card: SSO and email-link buttons, an email and password form with remember me, a loading submit and an inline error.
Default example of Login 1: card with SSO and magic link.
A split-screen sign-in: SSO and passkey buttons, validated email and password with show/hide, remember me and error state on one side, a soft colour mesh with a customer quote on the other.
Default example of Login 2: split screen with testimonial.