# Another UI

> Another UI is a set of components and blocks for React and Tailwind CSS v4. It uses Phosphor duotone icons, motion from transitions.dev and Cuelume interaction sounds. Every component comes in Radix UI, Base UI and React Aria versions. Components are added to your project as source files with `npx shadcn@latest add https://anotherui.dev/r/<name>.json`.

## Get started

- [Introduction](https://anotherui.dev/docs): Another UI is a set of components and blocks for React and Tailwind CSS. You add the code to your app and it is yours to change.
- [Theming](https://anotherui.dev/docs/theming): Using CSS variables and theme tokens.
- [Installation](https://anotherui.dev/docs/installation): Set up a React app with Tailwind CSS v4, then add Another UI components by URL.
- [Dark Mode](https://anotherui.dev/docs/dark-mode): Add a light and dark theme toggle to your app.
- [RTL](https://anotherui.dev/docs/rtl): Right-to-left support for Another UI components.

## Components

- [Accordion](https://anotherui.dev/docs/components/base/accordion): A vertically stacked set of interactive headings that each reveal a section of content.
- [Alert](https://anotherui.dev/docs/components/base/alert): Displays a callout for user attention.
- [Alert Dialog](https://anotherui.dev/docs/components/base/alert-dialog): A modal dialog that interrupts the user with important content and expects a response.
- [Amount](https://anotherui.dev/docs/components/base/amount): A sum of money formatted for any currency, with signs, colours, compact form, small cents and a hide toggle.
- [Approval Card](https://anotherui.dev/docs/components/base/approval-card): The agent asks before it acts. Shows what will happen and how risky it is, then lets the person approve, deny or edit first.
- [Aspect Ratio](https://anotherui.dev/docs/components/base/aspect-ratio): Displays content within a desired ratio.
- [Attachment](https://anotherui.dev/docs/components/base/attachment): Displays a file or image attachment with media, metadata, upload state, and actions.
- [Audio Player](https://anotherui.dev/docs/components/base/audio-player): Custom controls for an audio file, with play and pause, scrubbing, speed, volume and an optional waveform.
- [Avatar](https://anotherui.dev/docs/components/base/avatar): An image element with a fallback for representing the user.
- [Avatar Upload](https://anotherui.dev/docs/components/base/avatar-upload): Pick or drop a photo, crop it to a circle, and show it in an Avatar. Hands back a data URL and a Blob.
- [Badge](https://anotherui.dev/docs/components/base/badge): Displays a badge or a component that looks like a badge.
- [Banner](https://anotherui.dev/docs/components/base/banner): A dismissible announcement bar with a tone, an icon and an action. BannerStack piles several in one spot with the banner stacking motion.
- [Breadcrumb](https://anotherui.dev/docs/components/base/breadcrumb): Displays the path to the current resource using a hierarchy of links.
- [Bubble](https://anotherui.dev/docs/components/base/bubble): Displays conversational content in a message bubble. Supports variants, alignment, grouping, reactions, and collapsible content.
- [Button](https://anotherui.dev/docs/components/base/button): Displays a button or a component that looks like a button.
- [Button Group](https://anotherui.dev/docs/components/base/button-group): A container that groups related buttons together with consistent styling.
- [Calendar](https://anotherui.dev/docs/components/base/calendar): A calendar component that allows users to select a date or a range of dates.
- [Card](https://anotherui.dev/docs/components/base/card): Displays a card with header, content, and footer.
- [Carousel](https://anotherui.dev/docs/components/base/carousel): A carousel with motion and swipe built using Embla.
- [Chart](https://anotherui.dev/docs/components/base/chart): Beautiful charts. Built using Recharts. Copy and paste into your apps.
- [Checkbox](https://anotherui.dev/docs/components/base/checkbox): A control that allows the user to toggle between checked and not checked.
- [Citations](https://anotherui.dev/docs/components/base/citations): Numbered source markers inside an AI answer, with a preview of each source and a list of every source under the answer.
- [Code Block](https://anotherui.dev/docs/components/base/code-block): Highlighted code with a file name, line numbers, marked lines, wrap and copy, plus tabs for several files and a line diff in unified or split view.
- [Collapsible](https://anotherui.dev/docs/components/base/collapsible): An interactive component which expands/collapses a panel.
- [Color Picker](https://anotherui.dev/docs/components/base/color-picker): Pick a color by area, hue and opacity, type it as HEX, RGB or HSL, grab it from the screen, or choose a preset swatch.
- [Combobox](https://anotherui.dev/docs/components/base/combobox): Autocomplete input with a list of suggestions.
- [Command](https://anotherui.dev/docs/components/base/command): Command menu for search and quick actions.
- [Composer](https://anotherui.dev/docs/components/base/composer): The message box for an AI chat, with a model picker, voice dictation, send, and room around it for a heading, credits or usage.
- [Context Menu](https://anotherui.dev/docs/components/base/context-menu): Displays a menu of actions triggered by a right click.
- [Copy Button](https://anotherui.dev/docs/components/base/copy-button): A button that copies a value to the clipboard and swaps to a check for a moment, with an optional Copy and Copied label.
- [Countdown](https://anotherui.dev/docs/components/base/countdown): Days, hours, minutes and seconds until a date, with each changing unit popping in. Comes boxed or compact.
- [Data Grid](https://anotherui.dev/docs/components/base/data-grid): A spreadsheet surface with lettered columns, numbered rows, an active cell, range selection, in-cell editing and copy and paste. Built on TanStack Table and the Table primitive.
- [Data Table](https://anotherui.dev/docs/components/base/data-table): A ready-made data table on TanStack Table with sorting, search, faceted filters, selection and pagination, plus a guide to build your own.
- [Date Picker](https://anotherui.dev/docs/components/base/date-picker): A date picker component with range and presets.
- [Date Range Picker](https://anotherui.dev/docs/components/base/date-range-picker): A start and end date from a two month calendar, with presets, a clear button and an optional Apply step.
- [Description List](https://anotherui.dev/docs/components/base/description-list): Label and value pairs for records and summaries, with copyable values, editing in place and a muted "Not set" for empty values.
- [Device Mockup](https://anotherui.dev/docs/components/base/device-mockup): A phone, tablet or laptop drawn in CSS around live content, an image or a video. It keeps the real screen size of the device and scales down to fit.
- [Dialog](https://anotherui.dev/docs/components/base/dialog): A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
- [Direction](https://anotherui.dev/docs/components/base/direction): A provider component that sets the text direction for your application.
- [Dot Loader](https://anotherui.dev/docs/components/base/dot-loader): A grid of ASCII characters or dots that pulses to show a loading state, built on the transitions.dev Matrix dot loader.
- [Drawer](https://anotherui.dev/docs/components/base/drawer): A drawer component for React.
- [Dropdown Menu](https://anotherui.dev/docs/components/base/dropdown-menu): Displays a menu to the user, such as a set of actions or functions, triggered by a button.
- [Empty](https://anotherui.dev/docs/components/base/empty): Use the Empty component to display an empty state.
- [Field](https://anotherui.dev/docs/components/base/field): Combine labels, controls, and help text to compose accessible form fields and grouped inputs.
- [File Upload](https://anotherui.dev/docs/components/base/file-upload): A drop zone with a live list of files, progress, retry and image previews, plus a compact picker for an avatar or a single image.
- [Hover Card](https://anotherui.dev/docs/components/base/hover-card): For sighted users to preview content available behind a link.
- [Input](https://anotherui.dev/docs/components/base/input): A text input component for forms and user data entry with built-in styling and accessibility features.
- [Input Group](https://anotherui.dev/docs/components/base/input-group): Add addons, buttons, and helper content to inputs.
- [Input OTP](https://anotherui.dev/docs/components/base/input-otp): Accessible one-time password component with copy-paste functionality.
- [Item](https://anotherui.dev/docs/components/base/item): A versatile component for displaying content with media, title, description, and actions.
- [Kanban](https://anotherui.dev/docs/components/base/kanban): A board of columns with cards you drag within a column or across columns, and columns you drag to reorder. Controlled, keyboard friendly, and columns can collapse.
- [Kbd](https://anotherui.dev/docs/components/base/kbd): Used to display textual user input from keyboard.
- [Label](https://anotherui.dev/docs/components/base/label): Renders an accessible label associated with controls.
- [Marker](https://anotherui.dev/docs/components/base/marker): Displays an inline status, system note, bordered row, or labeled separator in a conversation.
- [Menubar](https://anotherui.dev/docs/components/base/menubar): A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
- [Message](https://anotherui.dev/docs/components/base/message): Displays a message in a conversation, with optional avatar, header, footer, and alignment.
- [Message Scroller](https://anotherui.dev/docs/components/base/message-scroller): A chat scroll container that anchors turns, opens saved transcripts, follows streamed responses, loads history without jumping, and jumps to any message.
- [Meter](https://anotherui.dev/docs/components/base/meter): A value inside a known range, like budget spent or storage used, colored by thresholds. Comes as a single bar, segments, or a stack of parts with a legend.
- [Multi Select](https://anotherui.dev/docs/components/base/multi-select): Pick several options as chips, with search, groups, a cap, an overflow count and values you can create as you type.
- [Native Select](https://anotherui.dev/docs/components/base/native-select): A styled native HTML select element with consistent design system integration.
- [Navigation Menu](https://anotherui.dev/docs/components/base/navigation-menu): A collection of links for navigating websites.
- [Number Field](https://anotherui.dev/docs/components/base/number-field): A number input with minus and plus buttons, keyboard and wheel stepping, bounds, and formatting for currency, percent and units.
- [Pagination](https://anotherui.dev/docs/components/base/pagination): Pagination with page navigation, next and previous links.
- [Password Strength](https://anotherui.dev/docs/components/base/password-strength): A password field with a show and hide toggle, a segmented strength meter and a checklist of rules.
- [Phone Input](https://anotherui.dev/docs/components/base/phone-input): A country picker with flags and dial codes, plus a number field that formats as you type. The value is E.164.
- [Popover](https://anotherui.dev/docs/components/base/popover): Displays rich content in a portal, triggered by a button.
- [Progress](https://anotherui.dev/docs/components/base/progress): Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
- [Progress Circle](https://anotherui.dev/docs/components/base/progress-circle): A ring that fills toward done, spins when the amount is unknown, and draws a check when it finishes.
- [Questionnaire](https://anotherui.dev/docs/components/base/questionnaire): A multi-step questionnaire with single-choice, multiple-choice, freeform, and skippable questions.
- [Radio Group](https://anotherui.dev/docs/components/base/radio-group): A set of checkable buttons, known as radio buttons, where no more than one of the buttons can be checked at a time.
- [Rating](https://anotherui.dev/docs/components/base/rating): Stars to pick a score or show one. Supports half steps, a hover preview, sizes, a custom icon and full keyboard control.
- [Reasoning](https://anotherui.dev/docs/components/base/reasoning): The thinking trace above an AI answer, with a live timer, a step for each search, read or tool call, and a fold that closes itself when the answer starts.
- [Resizable](https://anotherui.dev/docs/components/base/resizable): Accessible resizable panel groups and layouts with keyboard support.
- [Responsive Dialog](https://anotherui.dev/docs/components/base/responsive-dialog): A bottom drawer on phones and a dialog on wider screens, written once with one set of parts.
- [Rich Text Editor](https://anotherui.dev/docs/components/base/rich-text-editor): A writing area that reads and writes markdown, with a formatting bar, a slash menu for blocks, and markdown shortcuts as you type.
- [Scroll Area](https://anotherui.dev/docs/components/base/scroll-area): Augments native scroll functionality for custom, cross-browser styling.
- [Segmented Control](https://anotherui.dev/docs/components/base/segmented-control): Pick one of a few options, with a pill that slides to the chosen one.
- [Select](https://anotherui.dev/docs/components/base/select): Displays a list of options for the user to pick from, triggered by a button.
- [Separator](https://anotherui.dev/docs/components/base/separator): Visually or semantically separates content.
- [Sheet](https://anotherui.dev/docs/components/base/sheet): Extends the Dialog component to display content that complements the main content of the screen.
- [Sidebar](https://anotherui.dev/docs/components/base/sidebar): A composable, themeable and customizable sidebar component.
- [Skeleton](https://anotherui.dev/docs/components/base/skeleton): Use to show a placeholder while content is loading.
- [Slider](https://anotherui.dev/docs/components/base/slider): An input where the user selects a value from within a given range.
- [Sortable](https://anotherui.dev/docs/components/base/sortable): A list you reorder by dragging, with a handle, keyboard support and a short settle where the item lands. Works vertically, horizontally or as a grid.
- [Spinner](https://anotherui.dev/docs/components/base/spinner): An indicator that can be used to show a loading state.
- [Stat](https://anotherui.dev/docs/components/base/stat): One figure with its label, an optional change, icon and note. Group several in a row.
- [Stepper](https://anotherui.dev/docs/components/base/stepper): Progress through a multi-step flow, with numbered steps, lines that fill as steps complete, and the content for the active step.
- [Switch](https://anotherui.dev/docs/components/base/switch): A control that allows the user to toggle between checked and not checked.
- [Table](https://anotherui.dev/docs/components/base/table): A responsive table component.
- [Tabs](https://anotherui.dev/docs/components/base/tabs): A set of layered sections of content, known as tab panels, that are displayed one at a time.
- [Tag Input](https://anotherui.dev/docs/components/base/tag-input): Type and press Enter or a comma to add tags. Tags are removable Badges, a pasted list splits, and suggestions show as you type.
- [Terminal](https://anotherui.dev/docs/components/base/terminal): A terminal window with a prompt, commands and coloured output. It can type each command and reveal the output, with a blinking cursor and a copy button per command.
- [Textarea](https://anotherui.dev/docs/components/base/textarea): Displays a form textarea or a component that looks like a textarea.
- [Time Field](https://anotherui.dev/docs/components/base/time-field): A time typed in parts, with the hour, minute, second and AM or PM each stepped by keyboard.
- [Timeline](https://anotherui.dev/docs/components/base/timeline): Events in order with dots or icons on a connecting line, in sections with headings.
- [Toast](https://anotherui.dev/docs/components/base/toast): A succinct message that is displayed temporarily.
- [Toggle](https://anotherui.dev/docs/components/base/toggle): A two-state button that can be either on or off.
- [Toggle Group](https://anotherui.dev/docs/components/base/toggle-group): A set of two-state buttons that can be toggled on or off.
- [Tool Call](https://anotherui.dev/docs/components/base/tool-call): Show what an agent did on the way to its answer, as inline chips or cards that open to show the input and output.
- [Tooltip](https://anotherui.dev/docs/components/base/tooltip): A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
- [Tree](https://anotherui.dev/docs/components/base/tree): A file tree or nested list that opens branch by branch, with search, keyboard navigation, and single, multiple or checkbox selection.
- [Typography](https://anotherui.dev/docs/components/base/typography): Styles for headings, paragraphs, lists, etc.
- [Video Player](https://anotherui.dev/docs/components/base/video-player): Custom controls over a video, with buffering, speed, volume, picture in picture and fullscreen. The controls hide while it plays.
- [Window Mockup](https://anotherui.dev/docs/components/base/window-mockup): A desktop window around any content, as a Mac window, a browser with tabs and an address bar, or a Windows window. It follows the light and dark theme.

## Blocks

- [Airtable](https://anotherui.dev/docs/blocks/airtable): A full Airtable style base with tables, views, an editable grid, filters, grouping, summaries and Kanban, Calendar and Gallery views.
- [Airtable Kanban](https://anotherui.dev/docs/blocks/airtable-kanban): An Airtable style Kanban board with smooth drag and drop for cards and stacks, built on the Kanban primitive and other Another UI primitives.
- [ClickUp List](https://anotherui.dev/docs/blocks/clickup-list): A ClickUp style list view with status groups, subtasks, inline editing, drag and drop and bulk actions, built from Another UI primitives.
- [ClickUp Kanban](https://anotherui.dev/docs/blocks/clickup-kanban): A ClickUp style board with tinted status columns, WIP limits, swimlanes and smooth drag and drop, built from Another UI primitives.
- [Repeatable Group](https://anotherui.dev/docs/blocks/repeatable-group): Collapsible cards for forms that need an unknown number of the same thing, built from Another UI primitives.
- [Command Palette](https://anotherui.dev/docs/blocks/command-palette): One search box for every client, invoice, page and action, opened with Cmd or Ctrl K, built from Another UI primitives.
- [Sign In and Sign Up](https://anotherui.dev/docs/blocks/auth): Sign in, sign up, password reset, email links and a code step in one block, built from Another UI primitives.
- [Availability Scheduler](https://anotherui.dev/docs/blocks/availability-scheduler): Weekly booking hours with split ranges, copy to other days, date overrides and a live preview of bookable slots, built from Another UI primitives.
- [AI Chat](https://anotherui.dev/docs/blocks/ai-chat): A full chat app with a chat list, reasoning, tool calls, approvals, cited answers and the Composer, built from Another UI components.
- [Action Bar](https://anotherui.dev/docs/blocks/action-bar): A floating bar for bulk actions on selected rows that expands from a compact pill, built from Another UI primitives.
- [Notion](https://anotherui.dev/docs/blocks/notion): A Notion style workspace with a page tree, covers and icons, and full page writing in the Rich Text Editor, built from Another UI primitives.
- [Banking](https://anotherui.dev/docs/blocks/banking): A banking home with net worth, account cards and an activity feed you can filter, built from Another UI primitives.
- [Lineup Builder](https://anotherui.dev/docs/blocks/lineup-builder): Pick a starting eleven on a pitch, choose a formation, swap players with the bench and hand out the armbands, built from Another UI primitives.
- [Sports Score](https://anotherui.dev/docs/blocks/sports-score): Live football scores grouped by league, with a match page for events, lineups, stats and the table, built from Another UI primitives.
- [Strava](https://anotherui.dev/docs/blocks/strava): A workout feed with real route maps and a recorder that tracks a walk, run, ride or hike, built from Another UI primitives.
- [Sheets](https://anotherui.dev/docs/blocks/sheets): A Google Sheets style spreadsheet with formulas, formatting, undo and sheet tabs, built on the Data Grid primitive.
- [Notices](https://anotherui.dev/docs/blocks/notices): Notification cards in tinted trays, with a live delete countdown and undo, an invoice to pay, a storage warning and a deploy report, built from Another UI primitives.

## Utilities

- [motion](https://anotherui.dev/docs/utils/motion): Transitions from transitions.dev for every Another UI primitive, on one shared motion scale.
- [sounds](https://anotherui.dev/docs/utils/sounds): Cuelume interaction sounds for every Another UI component, with a switch to turn them off.
- [scroll-fade](https://anotherui.dev/docs/utils/scroll-fade): Utilities for adding a fade effect to the edges of a scroll container.
- [shimmer](https://anotherui.dev/docs/utils/shimmer): Utilities for adding a shimmer effect to text elements.

## Forms

- [Forms](https://anotherui.dev/docs/forms): Build forms with React and Another UI.
- [React Hook Form](https://anotherui.dev/docs/forms/react-hook-form): Build forms in React using React Hook Form and Zod.
- [TanStack Form](https://anotherui.dev/docs/forms/tanstack-form): Build forms in React using TanStack Form and Zod.
- [Formisch](https://anotherui.dev/docs/forms/formisch): Build forms in React using Formisch and Valibot.

## Headless

- [Message Scroller](https://anotherui.dev/docs/react/message-scroller): Use the headless MessageScroller behavior with your own markup and styles.
- [Questionnaire](https://anotherui.dev/docs/react/questionnaire): Build accessible, multi-step questionnaires with single, multiple, freeform, and intentionally skipped answers.

## Helpers

- [AI SDK](https://anotherui.dev/docs/helpers/ai-sdk): Create AI SDK messages and stream predefined conversations through useChat without a model, API route, network request, or API key.
- [TanStack AI](https://anotherui.dev/docs/helpers/tanstack-ai): Create TanStack AI messages and stream predefined conversations through useChat without a model, API route, network request, or API key.

## Registry

- [Registry index](https://anotherui.dev/r/registry.json): Every component and block, with its install URL.