cd/ui

v0.2 · 32 components

Lean components. Yours to shape.

React 19, Base UI, and Tailwind CSS v4. Accessible by default, measured at build time, with Zod forms. Install with the shadcn CLI and edit the source in your project.

install cd/ui browse components
average size per component
695 B
no browser JS
9
accessible by default
Base UI

Add the theme and every component to your project with one command:

$ npx shadcn@latest add https://cd-ui.vercel.app/r/all.json

components

See each component gzip size and where it runs.

how we measure →

actions

  • Button1.2 kB

    Button with variants, sizes, a loading state, and the option to render as a link.

    client

  • Dropdown Menu1.0 kB

    A menu of actions that opens from a button, with checkable items, radio groups, and submenus.

    client

display

  • defaultnewdraftarchivedfailed
    Badge453 B

    Compact badge to show a status, count, or category.

    server · 0 js

  • loopvet

    in production

    management system for veterinary clinics.

    scheduling, records, and billing on a single screen.
    Card377 B

    Group related content into a header, body, and footer.

    server · 0 js

  • press Ctrl K to search, or Esc to close.

    Kbd282 B

    Show a key or shortcut styled like a keycap.

    server · 0 js

  • cd/ui

    lightweight components on Base UI.

    docs
    components
    github
    Separator284 B

    Separate content with a horizontal or vertical line.

    server · 0 js

  • DIABJD
    Avatar383 B

    A round profile picture with a fallback for when the image is missing.

    client

  • cd/uicd/ui
    Logo1.1 kB

    The cd/ui mark, wordmark, and terminal prompt, in three sizes.

    client

  • Recent invoices
    InvoiceStatusMethodAmount
    INV-001paidCredit card$250.00
    INV-002pendingBank transfer$150.00
    INV-003failedCredit card$350.00
    Table930 B

    A styled native table for rows and columns of data.

    server · 0 js

  • A

    Welcome back

    Sign in to continue.

    New here? Create an account
    Auth Shell573 B

    Centered card for sign-in, sign-up, reset, and verify screens.

    server · 0 js

  • Run the shadcn CLI with the component URL. The file lands in your project and you own the code.

    Accordion912 B

    Stacked sections shown as a terminal prompt tree, with a smooth height animation.

    client

feedback

  • Skeleton234 B

    Reserve space for content while it loads.

    server · 0 js

  • saving…
    Spinner398 B

    Indicate loading with a CSS-animated SVG, no JavaScript.

    server · 0 js

  • [info]09:41:07deploy queuedbuild 482 waits behind 2 others
    [success]09:41:52deploy finishedlive on cd-ui.dev in 38s
    Alert776 B

    A terminal-style log line for information, success, warnings, or errors.

    server · 0 js

  • x
    x
    Progress465 B

    A bar that shows how far a task has come, or that it is still working.

    client

  • Toast1.3 kB

    Stacked notifications that dismiss themselves, with swipe and keyboard support.

    client

form

  • Input525 B

    Text field with visual states for focus, error, and disabled.

    client

  • Use the eye to check what you typed.

    Password Input1.7 kB

    Password field with a show/hide toggle.

    client

  • type or paste 6 digits

    OTP Input539 B

    One box per digit with auto-advance, backspace, and paste.

    client

  • the field grows on its own as you type.

    Textarea451 B

    Long text field that grows with its content, no JavaScript.

    client

  • only to reply to you, no spam.

    Field451 B

    Connect label, control, help text, and error with ids and aria attributes.

    client

  • only to reply to you, no spam.

    Form553 B

    Pass a Zod schema and validate fields without adding another form library.

    client

  • Checkbox688 B

    Checkbox with checked, unchecked, and indeterminate states.

    client

  • Radio Group522 B

    Pick exactly one option from a small set, with arrow-key navigation.

    client

  • Switch660 B

    Toggle an option with immediate effect.

    client

  • MonthlyYearlySave 20%

    $24 / month

    Pricing Toggle885 B

    Monthly/yearly switch with an optional saving badge.

    client

  • Slider667 B

    Pick a number or a range by dragging a thumb or using the arrow keys.

    client

  • Select1.2 kB

    Pick an option from a list that opens from the button.

    client

overlay

  • Dialog898 B

    Modal window with managed focus that returns on close.

    client

  • Popover478 B

    A floating panel anchored to a button that can hold interactive content.

    client

  • Tooltip794 B

    Show a short hint on hover or keyboard navigation.

    client

navigation

  • 48 contributions this week.
    Tabs613 B

    Switch content with tabs and an indicator that follows the selection.

    client