No Frills,
Just Performance

Zero unnecessary animations. Zero wasted milliseconds. Every interaction responds instantly—because professional tools shouldn't make you wait.

Built forReact

Styled withTailwindCSS

60+

Components

100+

Design Tokens

Why Choice UI

Performance is the feature

We stripped away everything that slows you down. No decorative animations, no transition delays—just components that respond the instant you interact.

Instant Response

No transition delays, no loading spinners for local operations. Click a button, see the result—immediately.

Zero Animation Bloat

Animations are opt-in, never forced. Your dropdowns open instantly, your modals appear immediately.

Independent Packages

Every component ships as its own npm package. Install only what you need—no bloated bundles.

Keyboard-First

Every component works without a mouse. Arrow keys, Tab, Enter, Escape—power users never have to reach for the trackpad.

Minimal Re-renders

Surgical state updates mean only what changes actually re-renders. Your complex forms stay snappy.

No Runtime Overhead

Tailwind CSS v4 compiles away. No CSS-in-JS runtime, no style recalculation on every render. Just static CSS.

What's Inside

Built for speed, designed to last

60+ production-ready components. Zero compromises on performance.

60+

Components

100%

TypeScript

A11y

Accessible

SSR

Ready

Tailwind CSS

Developer Experience

Clean APIs, no magic

Predictable compound components. What you write is what runs—no hidden transforms, no abstraction layers.

Composable by design

import { Select } from '@choice-ui/react'

function Example() {
  return (
    <Select value={value} onChange={setValue}>
      <Select.Trigger placeholder="Select option" />
      <Select.Content>
        <Select.Label>Fruits</Select.Label>
        <Select.Item value="apple">Apple</Select.Item>
        <Select.Item value="banana">Banana</Select.Item>
        <Select.Item value="orange">Orange</Select.Item>
      </Select.Content>
    </Select>
  )
}

Live preview

Component Library

All Components

Production-ready components organized by category. From buttons to complex data tables.

Buttons

Interactive elements for triggering actions, toggling states, and making selections.

Button

Icon Button

Link Button

Toggle Button

Segmented

Chip

Collections

Components for displaying and selecting from lists of options, including dropdowns, menus, and searchable lists.

Combobox

Command

Right click me to open context menu

Context Menu

Dropdown

List

Menubar

Multi Select

Select

Forms

Input components for collecting and validating user data, from text fields to complex form controls.

Checkbox

Radio

Input

Textarea

option-1

option-2

Chips Input

Numeric Input

Search Input

Range

Switch

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

Otp Input

Email*

Label

We'll never share your email with anyone else.

Description

Please enter a valid email address.

ErrorMessage

Your Name*

We'll never share with anyone else.

Text Field

Hello, ﻿@John Doe!

Context Input

Md Input

Form

Date & Time

Specialized inputs and calendars for selecting dates, times, and date ranges.

Date Input

Date Range Input

Month Calendar

Time Input

2 hours

Time Range Input

Time Calendar

1970

Quarter Calendar

2020 - 2031

Year Calendar

Navigation

Components for moving between views, pages, and content sections within an application.

Tabs

Pagination

Page 1

Stackflow

Feedback

Avatar

Badge

Hint

Progress

Progress Bar

50%

Progress Circle

Quisquam, quos.

Skeleton

Toast

Overlays

Floating UI elements like modals, dialogs, popovers, and tooltips that appear above the main content.

This action cannot be undone. Are you sure you want to delete this item?

Alert Dialog

Username

Description

Dialog

This is a popover content. It will be displayed when the button is clicked.

Popover

Tooltip

Layouts

Structural components for organizing and arranging content, including scroll areas, splitters, and grids.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor quam. Morbi accumsan cursus enim, sed ultricies sapien.

Scroll Area

Separator

Splitter

Virtualized Grid

Data Display

Components for presenting information, including tables, code blocks, and rich text rendering.


import React from 'react';

function TodoItem({ todo, onToggle }) {
  return (
    <li className="todo-item">
      <input
        type="checkbox"
        checked={todo.completed}
        onChange={() => onToggle(todo.id)}
      />
      <span>{todo.text}</span>
    </li>
  );
}

Code Block

# Hello, world!

## Lorem ipsum

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Possimus quasi dolorem, cum ratione accusantium vitae commodi minima dolorum beatae, adipisci odio!

- List item 1 - List item 2 - List item 3

1. List item 1 2. List item 2 3. List item 3

Md Render

⌘K⇧S⌥O⌃C

Kbd

Table

Picture Preview

Pickers

Specialized selection components like emoji pickers and color pickers for choosing from visual options.

Emoji Picker

FAQ

Frequently asked questions

Everything you need to know about Choice UI.

Why no animations by default?

For desktop productivity tools, animations are friction. When you click a dropdown, you want to see options instantly—not watch them slide in over 200ms. We optimized for perceived speed and professional workflows.

Can I add animations if I want them?

Yes! Animations are opt-in through CSS or className props. You have full control. We just don't force them on you—because we believe default should mean fast.

What frameworks does Choice UI support?

Choice UI is built for React 18+ and works seamlessly with Next.js, Vite, and other React-based frameworks. Components are fully compatible with Server Components and support SSR out of the box.

Which version of Tailwind CSS is required?

Choice UI is built for Tailwind CSS v4 and takes full advantage of its CSS variables and native theming capabilities. Tailwind v3 is not supported.

Is Choice UI accessible?

Yes! All components follow WAI-ARIA guidelines and support keyboard navigation, screen readers, and proper focus management. We continuously test with assistive technologies.

Can I customize the design tokens?

Absolutely. Choice UI uses a comprehensive design token system that you can override in your CSS. Change colors, spacing, typography, shadows, and more to match your brand.

Is Choice UI free to use?

Yes, Choice UI is completely free and open source under the MIT license. You can use it in personal and commercial projects without any restrictions.

Stop waiting on your UI

Build interfaces that respond as fast as you think. No animations to wait for, no transitions to endure.

No Frills, Just Performance