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.
Overview example of Avatar Stack.
States and variants example of Avatar Stack.
A floating button that appears after scrolling, draws a progress ring, scrolls smoothly (instantly under reduced motion) and moves focus to the content.
Labelled example of Back To Top.
Progress ring example of Back To Top.
A small pill label in four variants with an optional status dot and success, warning and error tones. Style links with badgeVariants().
Default example of Badge.
Status example of Badge.
Ballmac UI design tokens in OKLCH: neutral light mode, ink-navy dark mode, the Ballmac blue focus ring, chart colors, and motion easings.
A page-wide announcement with semantic tones, optional action, and controlled or local dismissal.
Overview example of Banner.
States and variants example of Banner.
A four-page product site assembled entirely from Ballmac blocks (Hero6, Stats1, Features5, Testimonials2, Cta3, Pricing2, Pricing3, Faq2, Changelog1, Contact1) in one palette, so any section can be swapped for another block.
Changelog example of Beacon: launch site from blocks.
Contact example of Beacon: launch site from blocks.
Home example of Beacon: launch site from blocks.
Pricing example of Beacon: launch site from blocks.
Hairline rails with thin light beams rising along them and dissolving near the top, over a soft glow. Canvas, token colors, DPR aware, pauses off-screen, a still frame under reduced motion.
Falling, single color example of Beams Background.
Waitlist example of Beams Background.
A responsive bento layout of feature cards that span columns and rows. Each BentoCard has a background visual slot, icon, title and description, and a link that slides up on hover or focus.
Live feature grid example of Bento Grid.
Two columns example of Bento Grid.
A billing page: current plan and monthly cost, usage meters that turn amber near the limit, the card on file with an update dialog (formatted, validated), the billing contact and an invoice list with status and downloads.
Default example of Billing 1: plan, usage and invoices.
Free plan example of Billing 1: plan, usage and invoices.
A change-plan flow: billing interval, plan cards as radios, a seat stepper that respects the current team, and a sticky summary that works out the prorated charge, the credit and what is due today.
Default example of Billing 2: change plan with proration.
Yearly account example of Billing 2: change plan with proration.
A subscription summary with plan and price, status, next charge, payment method, seat usage and recent invoices, including failed-payment and trial states.
Payment failed and trial example of Billing Card.
Team plan example of Billing Card.
A blog index with a large featured post, topic filter chips and a three-column grid. Posts without a photo get a generated cover drawn from theme tokens, in five compositions.
Default example of Blog 1: featured post with filterable grid.
Three posts example of Blog 1: featured post with filterable grid.
A long-form article page: centered title and author row, cover, comfortable prose with pull quote and code, sticky table of contents with scroll spy, reading progress bar, author card and related posts.
Default example of Blog Post 1: article with contents and progress.
Your own content example of Blog Post 1: article with contents and progress.
A wrapper that fades content in while it unblurs and slides a few pixels, once it scrolls into view, with a group that staggers its children.
Directions and blur example of Blur Fade.
Staggered page intro example of Blur Fade.
A short beam of light that travels around the inside edge of its parent's border at a constant speed. Decorative, token-colored, hidden under reduced motion.
Button example of Border Beam.
Card example of Border Beam.
A compact navigation trail with truncation, semantic current page, and visible keyboard focus.
Overview example of Breadcrumb.
States and variants example of Breadcrumb.
A Safari-style window with traffic lights, a padlocked address field and optional tabs. Children render as the page, either at natural size or laid out at desktop width and scaled to fit.