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.
States and variants example of Phone Input.
Pricing plan cards that work as a radio group, with a Monthly/Yearly switch that re-prices every plan, a highlighted plan, feature lists and form submission.
Controlled, one unavailable example of Plan Selector.
Three plans example of Plan Selector.
A bold five-page landing site for a money app: a working app inside a phone frame, live feature demos (freeze a card, round-up calculator, bill splitting, currency conversion), pricing with a yearly switch, security and download.
Download example of Pocket: mobile money app.
Features example of Pocket: mobile money app.
Home example of Pocket: mobile money app.
Pricing example of Pocket: mobile money app.
Security example of Pocket: mobile money app.
A focus-managed compact surface for controls or details, with collision handling, mobile-safe width, and optional close action.
Profile details example of Popover.
Share settings example of Popover.
Two pricing cards side by side with included and excluded features, a highlighted plan with a border beam and badge, and small print.
Default example of Pricing 1: two tiers.
Three plan cards with a monthly/yearly switch. Prices roll to the new value, a savings badge and billed-total line update, and the middle plan is lifted with a border beam.
Custom plans example of Pricing 2: three tiers with billing toggle.
Default example of Pricing 2: three tiers with billing toggle.
A feature-by-feature comparison table with a sticky plan header, collapsible groups and a highlighted column. On phones it becomes a plan switcher with one clean list.
Default example of Pricing 3: full plan comparison.
Two plans example of Pricing 3: full plan comparison.
A pricing section for Mac apps that sell both ways: a Buy once / Subscribe switch, license size cards and a cumulative-cost chart that computes the break-even year.
Default example of Pricing 4: one-time license vs subscription.
Two tiers in euros example of Pricing 4: one-time license vs subscription.
A Radix progress bar with clamped values, optional percentage text, and a reduced-motion-safe pending state.
A blur that ramps up toward an edge instead of switching on at a line, made of stacked backdrop-filter layers, for scrolling lists, headers, footers and image captions.
Four edges example of Progressive Blur.
Scrolling list with both edges example of Progressive Blur.
Overview example of Progress.
A token-colored circular progress meter with a readable center and accessible value.
Overview example of Progress Ring.
States and variants example of Progress Ring.
States and variants example of Progress.
An ordered progress sequence with current-step semantics and optional navigation to completed steps.
Overview example of Progress Steps.
States and variants example of Progress Steps.
An auto-growing chat input: Enter sends, Shift+Enter adds a line (IME-safe), the send button turns into Stop while streaming, with file attachment chips and a toolbar slot.
Default example of Prompt Input.
With attachments example of Prompt Input.
A call-to-action button that sends soft rings outward to ask for attention, calming as soon as it is hovered or focused, and switchable off once the person acts.
Attention ring example of Pulse Button.
Tones and states example of Pulse Button.
Single-choice radios with optional full-card labels, descriptions, and large pointer targets around Radix keyboard navigation.
Compact choices example of Radio Group.
Delivery frequency example of Radio Group.
A button with a border of theme colors circling it and a glow on hover, built on the Ballmac button so every size, variant and focus state still works.
Primary call to action example of Rainbow Button.
Sizes and pill example of Rainbow Button.