Note: This is a beta version of the registry. Content is still being finalized and updated daily.
registry/UI Kits

Pure UI

Inspired by shadcn/ui. Flat, high-contrast look with minimum styling. Great starting point that's easy to customize and adapt to your design system.

by
React.js Tailwind CSS Shadcn UI Motion
Loading...

Description

Our take on shadcn/ui—rebuilt with precision and care.

  • Maintains the same clean vibe and flat high-contrast look
  • Rebuilt from scratch with high attention to detail
  • Styled using Tailwind CSS v4
  • Easily customizable with CVA for styling and variants
  • All interactive components include animations powered by Motion
  • Declarative, isomorphic form validation

Details

Release Date June 2, 2025Last Updated June 11, 2025
Tags shadcn, ui-kit
Components count 28
  • Default Theme Tokens

    CSS variables for default theme to help you get started. Robust design system editor is coming soon.

  • Accordion

    An accordion is a vertically stacked set of expandable panels, each containing an interactive header and an associated content area.

    Loading...
  • Badge

    Badges are small, circular or pill-shaped elements used to display status, notification counts, or labels. They draw attention to updates, unread messages, or categorized content. By conveying key information at a glance, badges improve navigation, boost engagement, and enhance overall usability.

    Loading...
  • Breadcrumb

    Breadcrumbs are a navigational aid that help users track their location within an app or website. They display the current page in context, showing the hierarchy of pages and enabling easy navigation back to higher levels. Especially useful for deeply nested pages, breadcrumbs improve orientation and enhance the overall user experience.

    Loading...
  • Button

    Used to trigger an action or event, such as submitting a form, displaying a dialog or sending a request.

    Loading...
  • Card

    Displays a card with header, content, and footer.

    Loading...
  • Carousel

    A carousel with motion and swipe built using Embla.

    Loading...
  • Checkbox

    Checkbox allows users to make a binary choice—either toggling a single option on or off or selecting multiple options from a list.

    Loading...
  • Checkbox Field

    Checkbox wrapper component for use with Form validation.

    Loading...
  • Collapsible

    An interactive component which expands/collapses a panel.

    Loading...
  • Form

    Type-safe form validation utilizing web fundamentals using Conform and Zod (or Valibot).

    Loading...
  • Input

    Component captures user text input and used to create interactive single-line controls for web-based forms.

    Loading...
  • Input Field

    Input wrapper component for use with Form validation.

    Loading...
  • Label

    Label is a text element used to identify and describe input fields or other UI controls. It renders an accessible <label> element that provides a clear, semantic caption linked to a corresponding form control.

    Loading...
  • Pagination

    Pagination is an interface control for navigating large datasets split across multiple pages. It helps users move between pages efficiently, reduces cognitive load, and improves performance in data-heavy interfaces like tables and lists.

    Loading...
  • Radio Group

    A control element used to allow users to make a single selection from a predefined set of mutually exclusive options.

    Loading...
  • Radio Group Field

    Radio Group wrapper component for use with Form validation.

    Loading...
  • Resizable

    Accessible resizable panel groups and layouts with keyboard support.

    Loading...
  • Scroll Area

    Augments native scroll functionality for custom, cross-browser styling.

    Loading...
  • Skeleton

    Use to show a placeholder while content is loading.

    Loading...
  • Separator

    Visually or semantically separates content.

    Loading...
  • Select

    Select is a user interface control that lets users choose a single option from a dropdown list. Triggered by a button, it displays a list of options and collapses once an option is selected, showing the chosen value.

    Loading...
  • Select Field

    Select wrapper component for use with Form validation.

    Loading...
  • Switch

    Switch is a toggle control used to turn a single option on or off. Commonly used for binary settings—like enabling features or switching modes—it provides immediate, visible feedback to indicate the current state.

    Loading...
  • Switch Field

    Switch wrapper component for use with Form validation.

    Loading...
  • Textarea

    A multi-line plain-text user textarea, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.

    Loading...
  • Textarea Field

    Textarea wrapper component for use with Form validation.

    Loading...
  • useForm

    A hook to manage form validation.