# Dots

> Monochrome, accessible React components built on React Aria. Add them to your app with one command and own the code.

Set up an app with `npx shadcn@latest init --preset https://dots.sendity.net/init?base=aria`, then add items with `npx shadcn@latest add @dots/<name>`.

## Docs

- [CLI](https://dots.sendity.net/docs/cli.md): Set up Dots and add components to your project from the command line.
- [components.json](https://dots.sendity.net/docs/components-json.md): Configuration for your project.
- [Introduction](https://dots.sendity.net/docs): Dots is a monochrome, accessible UI kit for React. Components are copied into your app with the shadcn CLI, so the code is yours.
- [Theming](https://dots.sendity.net/docs/theming.md): Using CSS variables and theme tokens.
- [Astro](https://dots.sendity.net/docs/dark-mode/astro.md): Adding dark mode to your astro app.
- [Dark mode](https://dots.sendity.net/docs/dark-mode.md): Adding dark mode to your site.
- [Next.js](https://dots.sendity.net/docs/dark-mode/next.md): Adding dark mode to your Next.js app.
- [Remix](https://dots.sendity.net/docs/dark-mode/remix.md): Adding dark mode to your Remix app.
- [TanStack Start](https://dots.sendity.net/docs/dark-mode/tanstack-start.md): Adding dark mode to your TanStack Start app.
- [Vite](https://dots.sendity.net/docs/dark-mode/vite.md): Adding dark mode to your Vite app.
- [Accordion](https://dots.sendity.net/docs/components/accordion.md): A vertically stacked set of interactive headings that each reveal a section of content.
- [Action Bar](https://dots.sendity.net/docs/components/action-bar.md): The bottom bar with the main action of a screen, plus floating action pills for quick actions, selection and undo.
- [Action Toast](https://dots.sendity.net/docs/components/action-toast.md): The surface of a toast with actions, an undo countdown, progress or step segments.
- [Alert Banner](https://dots.sendity.net/docs/components/alert-banner.md): An account or feature state shown above the content it affects, with what to do and an optional deadline.
- [Alert Dialog](https://dots.sendity.net/docs/components/alert-dialog.md): A modal dialog that interrupts the user with important content and expects a response.
- [Alert](https://dots.sendity.net/docs/components/alert.md): Displays a callout for user attention.
- [Alphabet Index](https://dots.sendity.net/docs/components/alphabet-index.md): An A–Z rail for long lists, with press, keyboard and finger scrubbing, and sticky section headings it scrolls to.
- [Amount Field](https://dots.sendity.net/docs/components/amount-field.md): A large money input with a currency, help text, quick amounts and a two-sided exchange layout.
- [Aspect Ratio](https://dots.sendity.net/docs/components/aspect-ratio.md): Displays content within a desired ratio.
- [Attachment](https://dots.sendity.net/docs/components/attachment.md): Displays a file or image attachment with media, metadata, upload state, and actions.
- [Availability List](https://dots.sendity.net/docs/components/availability-list.md): Rows of features that each work, wait in a queue or are paused, shown as words plus an icon.
- [Avatar](https://dots.sendity.net/docs/components/avatar.md): An image element with a fallback for representing the user.
- [Badge](https://dots.sendity.net/docs/components/badge.md): Displays a badge or a component that looks like a badge.
- [Bank Card](https://dots.sendity.net/docs/components/bank-card.md): A payment card at ISO proportions with 24 plastic designs, an issuer mark, the last four digits and a network logo.
- [Breadcrumb](https://dots.sendity.net/docs/components/breadcrumb.md): Displays the path to the current resource using a hierarchy of links.
- [Bubble](https://dots.sendity.net/docs/components/bubble.md): Displays conversational content in a message bubble. Supports variants, alignment, grouping, reactions, and collapsible content.
- [Button Group](https://dots.sendity.net/docs/components/button-group.md): A container that groups related buttons together with consistent styling.
- [Button](https://dots.sendity.net/docs/components/button.md): Displays a button or a component that looks like a button.
- [Calendar](https://dots.sendity.net/docs/components/calendar.md): A calendar component that allows users to select a date or a range of dates.
- [Camera Frame](https://dots.sendity.net/docs/components/camera-frame.md): A dark camera overlay with a document, face or QR frame, a hint and capture actions.
- [Card Design Picker](https://dots.sendity.net/docs/components/card-design-picker.md): A grid of card design swatches on a radio group, with the chosen design's name next to the label.
- [Card Details](https://dots.sendity.net/docs/components/card-details.md): Card number, expiry, security code and cardholder in copyable tiles, with a button that shows the security code.
- [Card Peek](https://dots.sendity.net/docs/components/card-peek.md): The top half of a dark payment card with its mark, network, label and last four digits.
- [Card Stack](https://dots.sendity.net/docs/components/card-stack.md): Up to three bank cards in a pile, with the top one in full and an optional offer on the farthest edge.
- [Card](https://dots.sendity.net/docs/components/card.md): Displays a card with header, content, and footer.
- [Carousel](https://dots.sendity.net/docs/components/carousel.md): A carousel with motion and swipe built using Embla.
- [Chart](https://dots.sendity.net/docs/components/chart.md): Chart building blocks for Recharts, themed with the kit tokens.
- [Chat Thread](https://dots.sendity.net/docs/components/chat-thread.md): The parts of a conversation, from message bubbles and payment cards to quick replies, a typing indicator and a composer.
- [Checkbox](https://dots.sendity.net/docs/components/checkbox.md): A control that allows the user to toggle between checked and not checked.
- [Chip Group](https://dots.sendity.net/docs/components/chip-group.md): A row of pill chips for quick amounts and filters, with single or multiple selection.
- [Choice Tile](https://dots.sendity.net/docs/components/choice-tile.md): Large pressable tiles for choosing one or several options, each with a title, description, art and price.
- [Code Block](https://dots.sendity.net/docs/components/code-block.md): Displays code, terminal output and diffs with an optional header, line numbers and a copy button.
- [Code Dots](https://dots.sendity.net/docs/components/code-dots.md): Read-only progress dots for a PIN or passcode, with error and success states.
- [Collapsible](https://dots.sendity.net/docs/components/collapsible.md): An interactive component which expands/collapses a panel.
- [Combobox](https://dots.sendity.net/docs/components/combobox.md): Autocomplete input with a list of suggestions.
- [Command](https://dots.sendity.net/docs/components/command.md): Command menu for search and quick actions.
- [Context Menu](https://dots.sendity.net/docs/components/context-menu.md): Displays a menu of actions triggered by a right click.
- [Copy Field](https://dots.sendity.net/docs/components/copy-field.md): A label, a value and a copy button for account numbers, card details, references and addresses.
- [Countdown](https://dots.sendity.net/docs/components/countdown.md): A deadline in monospaced digits, optionally with a ring that empties as time runs out.
- [Country Select](https://dots.sendity.net/docs/components/country-select.md): A searchable country picker with flags, calling codes, a popular group and unavailable countries.
- [Data Table](https://dots.sendity.net/docs/components/data-table.md): Powerful table and datagrids built using TanStack Table.
- [Date Field](https://dots.sendity.net/docs/components/date-field.md): A date typed as day, month and year segments, with no calendar.
- [Date Picker](https://dots.sendity.net/docs/components/date-picker.md): A date picker component with range and presets.
- [Date Range Picker](https://dots.sendity.net/docs/components/date-range-picker.md): A start and end date, typed as segments or picked on a range calendar, with optional preset chips.
- [Dialog](https://dots.sendity.net/docs/components/dialog.md): A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
- [Direction](https://dots.sendity.net/docs/components/direction.md): Sets the text direction and locale for the components inside it.
- [Document Paper](https://dots.sendity.net/docs/components/document-paper.md): A sheet of paper for official documents such as account letters, statements, and confirmations.
- [Drawer](https://dots.sendity.net/docs/components/drawer.md): A panel that slides in from a screen edge and can be swiped away.
- [Dropdown Menu](https://dots.sendity.net/docs/components/dropdown-menu.md): Displays a menu to the user — such as a set of actions or functions — triggered by a button.
- [Empty](https://dots.sendity.net/docs/components/empty.md): Use the Empty component to display an empty state.
- [Entity Avatar](https://dots.sendity.net/docs/components/entity-avatar.md): A monochrome mark for a merchant, service, person, country, or currency.
- [Field](https://dots.sendity.net/docs/components/field.md): Combine labels, controls, and help text to compose accessible form fields and grouped inputs.
- [File Trigger](https://dots.sendity.net/docs/components/file-trigger.md): A button or a drop zone that adds files from the system picker, the camera, a drag and drop, or a paste.
- [File Upload Item](https://dots.sendity.net/docs/components/file-upload-item.md): One file in an upload form, from waiting and uploading to checked, accepted or rejected.
- [Hover Card](https://dots.sendity.net/docs/components/hover-card.md): A popover that appears on hover, focus, or long press to preview content behind a link.
- [Components](https://dots.sendity.net/docs/components.md): Every Dots component. Each page shows the component live, the install command and the API.
- [Input Group](https://dots.sendity.net/docs/components/input-group.md): Add addons, buttons, and helper content to inputs.
- [Input OTP](https://dots.sendity.net/docs/components/input-otp.md): Accessible one-time password component with copy paste functionality.
- [Input](https://dots.sendity.net/docs/components/input.md): A text input component for forms and user data entry with built-in styling and accessibility features.
- [Item](https://dots.sendity.net/docs/components/item.md): A versatile component for displaying content with media, title, description, and actions.
- [Kbd](https://dots.sendity.net/docs/components/kbd.md): Used to display textual user input from keyboard.
- [Key Value](https://dots.sendity.net/docs/components/key-value.md): Label and value pairs for details and summaries, such as fees, transfer review and receipts.
- [Keypad](https://dots.sendity.net/docs/components/keypad.md): A numeric keypad for entering amounts and passcodes.
- [Label](https://dots.sendity.net/docs/components/label.md): Renders an accessible label associated with controls.
- [Live Region](https://dots.sendity.net/docs/components/live-region.md): Reads short status messages to screen reader users, even while a sheet or dialog is open.
- [Marker](https://dots.sendity.net/docs/components/marker.md): Displays an inline status, system note, bordered row, or labeled separator in a conversation.
- [Message Scroller](https://dots.sendity.net/docs/components/message-scroller.md): A chat scroll container that anchors turns, opens saved transcripts, follows streamed responses, loads history without jumping, and jumps to any message.
- [Message](https://dots.sendity.net/docs/components/message.md): Displays a message in a conversation, with optional avatar, header, footer, and alignment.
- [Money Amount](https://dots.sendity.net/docs/components/money-amount.md): Displays an amount of money with smaller cents, a real minus sign and a masked state.
- [Native Select](https://dots.sendity.net/docs/components/native-select.md): A styled native HTML select element with consistent design system integration.
- [Number Field](https://dots.sendity.net/docs/components/number-field.md): A number input with minus and plus buttons, limits, steps and locale-aware formatting.
- [Pagination](https://dots.sendity.net/docs/components/pagination.md): Pagination with page navigation, next and previous links.
- [Percent Split Editor](https://dots.sendity.net/docs/components/percent-split-editor.md): Rows of people or destinations sharing one total in percent, amounts or shares, with a share bar and a remainder line.
- [Phone Field](https://dots.sendity.net/docs/components/phone-field.md): A phone number input with a searchable calling code picker and a per-country mask.
- [Popover](https://dots.sendity.net/docs/components/popover.md): Displays rich content in a portal, triggered by a button.
- [Progress](https://dots.sendity.net/docs/components/progress.md): Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
- [QR Code](https://dots.sendity.net/docs/components/qr-code.md): A scannable code with an optional center mark, an expired state and a copy-link fallback.
- [Questionnaire](https://dots.sendity.net/docs/components/questionnaire.md): A multi-step questionnaire with single-choice, multiple-choice, freeform, and skippable questions.
- [Radio Group](https://dots.sendity.net/docs/components/radio-group.md): A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
- [Range Histogram](https://dots.sendity.net/docs/components/range-histogram.md): A two-thumb range slider drawn over a histogram of the values it filters.
- [Rating](https://dots.sendity.net/docs/components/rating.md): A star scale for rating a transfer, a support chat or the app.
- [Resizable](https://dots.sendity.net/docs/components/resizable.md): Accessible resizable panel groups and layouts with keyboard support.
- [Scroll Area](https://dots.sendity.net/docs/components/scroll-area.md): Augments native scroll functionality for custom, cross-browser styling.
- [Search Field](https://dots.sendity.net/docs/components/search-field.md): A labeled search box with a clear button, Escape to clear and Enter to submit.
- [Select](https://dots.sendity.net/docs/components/select.md): Displays a list of options for the user to pick from—triggered by a button.
- [Separator](https://dots.sendity.net/docs/components/separator.md): Visually or semantically separates content.
- [Share Bar](https://dots.sendity.net/docs/components/share-bar.md): Parts of a whole in one segmented bar with a legend.
- [Sheet](https://dots.sendity.net/docs/components/sheet.md): Extends the Dialog component to display content that complements the main content of the screen.
- [Sidebar](https://dots.sendity.net/docs/components/sidebar.md): A composable, themeable and customizable sidebar component.
- [Skeleton](https://dots.sendity.net/docs/components/skeleton.md): Use to show a placeholder while content is loading.
- [Slider](https://dots.sendity.net/docs/components/slider.md): An input where the user selects a value from within a given range.
- [Sonner](https://dots.sendity.net/docs/components/sonner.md): An opinionated toast component for React.
- [Sortable List](https://dots.sendity.net/docs/components/sortable-list.md): A drag-to-reorder list that works with pointer, touch, keyboard and screen readers.
- [Spinner](https://dots.sendity.net/docs/components/spinner.md): An indicator that can be used to show a loading state.
- [Status Timeline](https://dots.sendity.net/docs/components/status-timeline.md): Vertical steps of a process with done, current, pending and failed states.
- [Step Header](https://dots.sendity.net/docs/components/step-header.md): The top of a multi-step flow with back or close, a step counter, segmented progress, and the step heading.
- [Steps List](https://dots.sendity.net/docs/components/steps-list.md): Numbered instructions with a title, an optional description, and an optional action per step.
- [Swipe Row](https://dots.sendity.net/docs/components/swipe-row.md): A list row that slides aside to uncover action tiles, with a full swipe for the main action.
- [Switch](https://dots.sendity.net/docs/components/switch.md): A control that allows the user to toggle between checked and not checked.
- [Table](https://dots.sendity.net/docs/components/table.md): A responsive table component.
- [Tabs](https://dots.sendity.net/docs/components/tabs.md): A set of layered sections of content—known as tab panels—that are displayed one at a time.
- [Text Field](https://dots.sendity.net/docs/components/text-field.md): A labelled single-line input with a description, an error, and an optional prefix or suffix, wired up for you.
- [Textarea](https://dots.sendity.net/docs/components/textarea.md): Displays a form textarea or a component that looks like a textarea.
- [Tier Ladder](https://dots.sendity.net/docs/components/tier-ladder.md): A vertical ladder of levels with the current one marked, checks on reached ones, and limits, perks or progress per level.
- [Toggle Group](https://dots.sendity.net/docs/components/toggle-group.md): A set of two-state buttons that can be toggled on or off.
- [Toggle](https://dots.sendity.net/docs/components/toggle.md): A two-state button that can be either on or off.
- [Token Search Field](https://dots.sendity.net/docs/components/token-search-field.md): A search field where typed filters such as from:alex become removable tokens.
- [Tooltip](https://dots.sendity.net/docs/components/tooltip.md): A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
- [Trace](https://dots.sendity.net/docs/components/trace.md): The building block for reasoning, tool calls, sources and more.
- [Transaction Row](https://dots.sendity.net/docs/components/transaction-row.md): The single row for a transaction, order or request, with a labelled group, an optional total and loading skeletons.
- [Usage Meter](https://dots.sendity.net/docs/components/usage-meter.md): Shows progress against a limit or allowance as a bar, a ring or a gauge, with a warning near and over the limit.
- [Installation](https://dots.sendity.net/docs/installation.md): Set up an app with the Dots preset, then add components with the shadcn CLI.
- [Introduction](https://dots.sendity.net/docs/registry.md): How the Dots registry works.