# Appica UI

> Open-source, accessible React component library built on Base UI and Tailwind CSS v4, plus the Appica Icons and Country Flags packages.

## Documentation

- [Accessibility](/ui/docs/react/accessibility): What's built in, and what's yours to handle.
- [Animation](/ui/docs/react/animation): Built-in motion that's reduced-motion aware and customizable.
- [Colors](/ui/docs/react/colors): Semantic color roles, and when to use each.
- [Composition](/ui/docs/react/composition): Swap elements, compose with your router, merge styles.
- [Dark Mode](/ui/docs/react/dark-mode): Add light and dark mode to your app.
- [Direction Provider](/ui/docs/react/direction-provider): Set the LTR or RTL reading direction.
- [Fonts](/ui/docs/react/fonts): Swap the default system fonts for a local or Google font.
- [Forms & Validation](/ui/docs/react/forms): Build accessible forms with validation.
- [Installation](/ui/docs/react/installation): Add Appica UI to your React project.
- [Reduced Motion Provider](/ui/docs/react/reduced-motion-provider): Force-disable animations for any subtree.
- [Right-to-Left (RTL)](/ui/docs/react/rtl): Mirror your interface for right-to-left languages.
- [Theme Provider](/ui/docs/react/theme-provider): Theming and dark mode, without the flash.
- [Theming](/ui/docs/react/theming): Recolor, reshape, and restyle with design tokens.
- [Usage](/ui/docs/react/usage): Imports, props, styling, and Server Components.
- [useDirection](/ui/docs/react/use-direction): Read the current text direction.
- [useDismissible](/ui/docs/react/use-dismissible): Track and persist dismissed surfaces.
- [useLocalStorage](/ui/docs/react/use-local-storage): SSR-safe state, persisted and synced across tabs.
- [useMediaQuery](/ui/docs/react/use-media-query): Subscribe to a CSS media query, SSR-safe.
- [useReducedMotion](/ui/docs/react/use-reduced-motion): Detect when to skip animations.
- [useTheme](/ui/docs/react/use-theme): Read and set the active theme.

## Components

- [Accordion](/ui/components/react/accordion): A stack of sections that expand and collapse to show or hide their content.
- [Alert](/ui/components/react/alert): A prominent, in-page message that draws attention to a status or event.
- [Alert Dialog](/ui/components/react/alert-dialog): A modal confirmation that interrupts the user to demand a deliberate response.
- [Autocomplete](/ui/components/react/autocomplete): A text input that suggests matching options as you type.
- [Avatar](/ui/components/react/avatar): A user image with a text or icon fallback when it's missing.
- [Background Pattern](/ui/components/react/background-pattern): A decorative pattern behind your content, with an optional cursor-following spotlight.
- [Badge](/ui/components/react/badge): A small label that highlights a status, count, or category.
- [Breadcrumb](/ui/components/react/breadcrumb): A trail of links showing the current page's location in a navigational hierarchy.
- [Button](/ui/components/react/button): A clickable button for actions, in a range of styles and sizes.
- [Button Group](/ui/components/react/button-group): Groups related buttons into a single segmented control, sharing variant, size, and state.
- [Calendar](/ui/components/react/calendar): A grid for picking a date, several dates, or a range.
- [Carousel](/ui/components/react/carousel): A draggable, swipeable slider built on Embla — with autoplay, fade, auto-height, thumbnails, and creative scroll effects.
- [Checkbox](/ui/components/react/checkbox): A box for turning an option on or off.
- [Chip](/ui/components/react/chip): A small, optionally removable tag for filters and selections.
- [Collapsible](/ui/components/react/collapsible): A section that expands and collapses to show or hide its content.
- [Combobox](/ui/components/react/combobox): An input with a dropdown list for picking one option or several.
- [Context Menu](/ui/components/react/context-menu): A menu that opens where you right-click or long-press.
- [Copy Button](/ui/components/react/copy-button): A button that copies text to the clipboard, with a check on success.
- [Countdown](/ui/components/react/countdown): A timer that counts down to a set time, with rolling digits.
- [Data Table](/ui/components/react/data-table): A data table recipe — Appica UI components wired to TanStack Table for sorting, filtering, selection, column visibility, and pagination.
- [Date Field](/ui/components/react/date-field): A segmented input for typing a date.
- [Date Picker](/ui/components/react/date-picker): An input paired with a calendar for picking a date, a range, or a time.
- [Dialog](/ui/components/react/dialog): A modal window that overlays the page for focused tasks and content.
- [Drawer](/ui/components/react/drawer): A panel that slides in from a screen edge, with swipe-to-dismiss and snap points.
- [Dropdown Menu](/ui/components/react/dropdown-menu): A button that opens a menu of actions and options.
- [Field](/ui/components/react/field): A wrapper that pairs a form control with its label, description, and validation messages.
- [Form](/ui/components/react/form): A form that validates its fields on submit and shows server errors.
- [Gradient Glow](/ui/components/react/gradient-glow): A soft, drifting gradient glow that wraps around your content.
- [Input](/ui/components/react/input): A single-line text field, with icons and an optional clear button.
- [Kbd](/ui/components/react/kbd): A keyboard key, and groups of keys, for documenting shortcuts.
- [Loader](/ui/components/react/loader): An indicator that shows a loading state.
- [Menubar](/ui/components/react/menubar): A bar of menus for an app's top-level commands.
- [Meter](/ui/components/react/meter): A graphical display of a numeric value within a known range.
- [Navigation](/ui/components/react/navigation): Links for moving between the main areas of your app or site.
- [Navigation Menu](/ui/components/react/navigation-menu): A navigation bar of links and menus that open panels of content.
- [Number Field](/ui/components/react/number-field): A number input with stepper buttons for adjusting the value.
- [OTP Field](/ui/components/react/otp-field): A row of single-character boxes for entering one-time codes.
- [Pagination](/ui/components/react/pagination): Navigation for splitting long lists of content across multiple pages.
- [Popover](/ui/components/react/popover): A floating panel anchored to a trigger for rich, interactive content.
- [Preview Card](/ui/components/react/preview-card): A hover preview of a link's destination, shown beside it.
- [Progress](/ui/components/react/progress): Displays the completion status of a task that takes a while.
- [Radio](/ui/components/react/radio): A group of options where only one can be selected.
- [Scroll Area](/ui/components/react/scroll-area): A scroll container with custom, themeable scrollbars.
- [Select](/ui/components/react/select): A trigger that opens a popup list for choosing one or several options.
- [Separator](/ui/components/react/separator): A thin horizontal or vertical line that separates content.
- [Skeleton](/ui/components/react/skeleton): An animated placeholder that holds a content's shape while it loads.
- [Slider](/ui/components/react/slider): A draggable control for picking a number or a range.
- [Sparkline](/ui/components/react/sparkline): A compact, interactive inline chart for showing a trend at a glance.
- [Spinner](/ui/components/react/spinner): A spinning indicator that shows a loading state.
- [Switch](/ui/components/react/switch): A toggle for turning a single setting on or off.
- [Table](/ui/components/react/table): A styled table for displaying rows of data.
- [Tabs](/ui/components/react/tabs): A set of layered panels where only the selected one is shown at a time.
- [Text Animate](/ui/components/react/text-animate): A text animator that works by character, word, or line — typewriter, scramble, wave, and more.
- [Textarea](/ui/components/react/textarea): A multi-line text field for longer text entry.
- [Thumbnail](/ui/components/react/thumbnail): A small preview tile for an image or icon, with a fallback when the image is missing.
- [Time Field](/ui/components/react/time-field): A segmented input for typing a time.
- [Toast](/ui/components/react/toast): A brief, dismissible notification that stacks in a corner of the screen.
- [Table of Content (TOC)](/ui/components/react/toc): A scroll-spy navigation sidebar that tracks the current section as the page scrolls.
- [Toggle](/ui/components/react/toggle): A two-state button that stays pressed or unpressed.
- [Toggle Group](/ui/components/react/toggle-group): A set of toggle buttons where one or several can be pressed.
- [Toolbar](/ui/components/react/toolbar): A container that groups buttons, links, and inputs together.
- [Tooltip](/ui/components/react/tooltip): A small hint that appears on hover or focus to label a control.

## Icons

- [Appica Icons](/ui/icons): Open-source collection of ~5,000 high-quality SVG icons for web and mobile projects.

## Country Flags

- [Appica Country Flags](/ui/country-flags): A high-fidelity collection of 261 SVG country flag icons in rounded and circle shapes.