# BeatUI > BeatUI is a comprehensive TypeScript UI component library built on the Tempo ecosystem (@tempots/dom) with fine-grained reactivity, theme support (light/dark), i18n, and full accessibility. Components are plain TypeScript functions — no JSX, no virtual DOM. BeatUI uses reactive signals (`Value`, `prop()`) from `@tempots/dom` for fine-grained DOM updates. Components accept an options object as the first argument followed by children: `Button({ variant: 'filled', size: 'md' }, 'Click me')`. All component props accept either static values or reactive `Value` signals. CSS uses a layered architecture with `bc-` prefixed classes (e.g., `bc-button`, `bc-card`). Every component exposes CSS custom properties for theming (e.g., `--bc-button-border-radius`). Dark mode uses `.dark` class on ``. ## Entry Points - [@tempots/beatui](https://github.com/fponticelli/beatui): Core components — buttons, forms, layout, overlays, data display, navigation - [@tempots/beatui/auth](https://github.com/fponticelli/beatui): Authentication UI — sign-in, sign-up, social login, two-factor - [@tempots/beatui/codehighlight](https://github.com/fponticelli/beatui): Syntax highlighting powered by Shiki - [@tempots/beatui/json-schema](https://github.com/fponticelli/beatui): Auto-generated forms from JSON Schema with AJV validation - [@tempots/beatui/json-structure](https://github.com/fponticelli/beatui): Auto-generated forms from a custom JSON structure format - [@tempots/beatui/lexical](https://github.com/fponticelli/beatui): Lexical rich text editor integration - [@tempots/beatui/monaco](https://github.com/fponticelli/beatui): Monaco code editor integration - [@tempots/beatui/prosemirror](https://github.com/fponticelli/beatui): ProseMirror rich text editor integration - [@tempots/beatui/markdown](https://github.com/fponticelli/beatui): Markdown rendering with GFM support - [@tempots/beatui/tailwind](https://github.com/fponticelli/beatui): Tailwind CSS v4 preset and Vite plugin ## Guides - [Authentication](/guides/authentication): Pre-built authentication UI with sign-in, sign-up, password reset, social login, and modal support. - [CSS Variables](/guides/css-variables): A full interactive reference for all BeatUI design tokens — colors, spacing, typography, radius, shadows, motion, z-index, and breakpoints — exposed as CSS custom properties. - [Customization](/guides/customization): Override CSS properties, use reactive props, compose components, and tree-shake with entry points. - [DataSource](/guides/data-source): Create sortable, filterable, paginated data tables with createDataSource and composable table primitives. - [Forms](/guides/forms): Build type-safe forms with Zod schemas, reactive controllers, and the Control wrapper for validation display. - [Getting Started](/guides/getting-started): Install BeatUI, set up Tailwind or standalone CSS, and build your first component. - [JSON Schema Display](/guides/json-schema-display): Read-only rendering of JSON data annotated by a JSON Schema. Highlights type mismatches, supports custom display widgets, and works without AJV. - [JSON Schema Forms](/guides/json-schema-forms): Auto-generate forms from JSON Schema definitions with AJV validation, custom widgets, and sanitization support. - [JSON Structure Forms](/guides/json-structure-forms): Form generation from a custom JSON Structure schema format with layout control and widget customization. - [Lexical Editor](/guides/lexical-editor): Extensible rich text editor with docked toolbar, contextual toolbar, and bare presets. Supports markdown, HTML, and JSON content formats. - [Localization](/guides/localization): Translate UI strings, create custom i18n providers, and integrate your own translations with BeatUI components. - [Markdown Renderer](/guides/markdown-renderer): Render Markdown content to styled HTML with optional GFM support, using micromark under the hood. - [Monaco Editor](/guides/monaco-editor): VS Code-powered code editor with language support, JSON Schema validation, and theme integration. - [OpenUI Playground](/guides/openui-playground): Interactive playground for OpenUI Lang. - [ProseMirror Editor](/guides/prosemirror-editor): Markdown-focused rich text editor with configurable features, toolbar, and bidirectional markdown serialization. - [RTL & LTR](/guides/rtl-ltr): Automatic direction detection, locale switching, logical properties, and bidirectional content support. - [Theming](/guides/theming): Configure light/dark mode, customize semantic color tokens, register custom color palettes, fonts, and access theme state programmatically. ## Layout - [Accordion](/components/accordion): Expandable content sections with single or multiple open item support. - [ActionCard](/components/action-card): An interactive card with an icon, title, and description. Used for selection grids, feature highlights, and navigation tiles. - [AppShell](/components/app-shell): A responsive application layout shell using CSS Grid with structured sections for banner, header, menu, main content, aside, and footer. - [Card](/components/card): A content container with visual separation using elevation, borders, or background depending on the variant. - [Center](/components/center): Centers its children both horizontally and vertically within a container, with configurable gap spacing. - [Collapse](/components/collapse): Animated collapsible container that smoothly expands and contracts content with CSS height transitions. - [Divider](/components/divider): A visual separator between content sections. - [Fieldset](/components/fieldset): Groups form fields with a legend, cascading layout configuration, multi-column grid, and optional collapsible content. - [Group](/components/group): Horizontal group layout that arranges children in a row with consistent spacing using flexbox. - [NineSliceScrollView](/components/nine-slice-scroll-view): A scrollable container divided into nine regions: a scrollable body with fixed header, footer, and sidebars that stay in place while the body scrolls in both axes. - [ScrollablePanel](/components/scrollable-panel): A panel with a scrollable body and optional fixed header and footer. Displays scroll shadow indicators when content overflows. - [Sink](/components/sink): A sunken/inset container with configurable depth, padding, and border radius. Useful for code blocks, input areas, or nested content that needs a recessed visual appearance. - [Stack](/components/stack): Vertical stack layout that arranges children in a column with consistent spacing using flexbox. - [WithBreakpoint](/components/with-breakpoint): A reactive breakpoint utility that monitors viewport or element width and provides the current breakpoint name and comparison helpers to a render callback. ## Overlays - [AlertDialog](/components/alert-dialog): An informational dialog for presenting important messages to the user with a single acknowledgement action. Supports info, success, warning, and danger variants. - [BlockCommandPalette](/components/block-command-palette): An inline block-level command palette with search filtering and keyboard navigation. Designed for slash-command menus in editors. - [ConfirmationDialog](/components/confirm-dialog): A confirmation dialog for destructive or irreversible actions. Displays a title with a colored icon, descriptive body, optional consequence list, and confirm/cancel buttons. - [Drawer](/components/drawer): A sliding panel anchored to any edge of the viewport. - [Flyout](/components/flyout): A positioned floating panel anchored to a trigger element, with configurable trigger modes, placement, delays, and animated transitions. - [Lightbox](/components/lightbox): A full-screen overlay for displaying images or arbitrary content centered over a dark backdrop with dismiss support. - [Modal](/components/modal): A dialog overlay for focused interactions, with customizable size and position. - [Popover](/components/popover): A positioned popover panel attached to a trigger element. Placed as a child of the trigger — not a wrapper. - [PromptDialog](/components/prompt-dialog): A dialog that prompts the user for text input. Includes a title, optional description, a text field, and confirm/cancel buttons. Pressing Enter submits the form. - [Spotlight](/components/spotlight): A searchable command/search overlay with fuzzy search, keyboard navigation, section grouping, recent items, and a global hotkey. - [Tooltip](/components/tooltip): A small popup that shows contextual information on hover or focus. ## Feedback - [AnnouncementBar](/components/announcement-bar): A colored banner displayed at the top of a page or container for announcements, promotions, or system messages. Supports icons and user-dismissal. - [EmptyState](/components/empty-state): Placeholder displayed when content or data is absent, with optional icon, title, description, and call-to-action. - [LoadingOverlay](/components/loading-overlay): A semi-transparent overlay with a centered loading spinner. Place inside a relatively-positioned container to cover its content while loading. - [Notice](/components/notice): An informational banner or callout with variant-driven styling, optional title, icon, and dismiss support. - [NotificationPanel](/components/notification-panel): A panel for displaying a list of notifications with read/unread state, icons, and metadata. - [NotificationService](/components/notification-service): A toast notification system for dispatching ephemeral popup notifications programmatically. Wrap your app with NotificationProvider and place a NotificationViewport to render toasts. - [Notification](/components/notification): A notification card with optional icon, title, body content, loading state, and close button. Supports theme colors and roundedness customization. - [OnboardingTour](/components/onboarding-tour): A step-by-step guided tour overlay that highlights UI elements with a spotlight effect and tooltip navigation. ## Inputs - [AppearanceSelector](/components/appearance-selector): A segmented input for selecting the application appearance: light, dark, or system. Connects to the theme provider or can be controlled manually. - [BigintInput](/components/bigint-input): A numeric input for arbitrarily large integers (bigint), with optional stepper buttons, min/max clamping, and digit-only masking. - [CheckboxInput](/components/checkbox-input): A custom icon-based checkbox with ARIA semantics, keyboard support, and optional text label. - [ColorInput](/components/color-input): A color picker combining a text field and a clickable color swatch that opens the native color picker. - [ColorPicker](/components/color-picker): A full-featured color picker with saturation/lightness area, hue strip, optional alpha, format-specific input panels, and swatch presets. Supports hex, RGB, HSL, HWB, and OKLCH. Each format also available as a standalone picker. - [EditableText](/components/editable-text): An inline editable text that toggles between display and input modes on click. - [EmailInput](/components/email-input): An email input with a default email icon, browser-native email validation, and autocomplete support. - [MaskInput](/components/mask-input): A text input with configurable input masking. Supports static and dynamic masks, custom token definitions, cursor behavior, completion detection, and unmask strategies. - [NumberInput](/components/number-input): A numeric input with optional stepper buttons, min/max constraints, and scroll-to-step support. - [NumberStepper](/components/number-stepper): A quantity selector with compact +/- buttons and a displayed value. Unlike NumberInput, this has no text field — ideal for cart quantities and counters. - [OtpInput](/components/otp-input): A one-time password input with individual cells, keyboard navigation, paste support, and masking. - [PasswordInput](/components/password-input): A password input with a built-in visibility toggle button, automatic autocomplete handling, and masked placeholder. - [RadioGroup](/components/radio-group): A group of radio buttons for selecting one option from a mutually exclusive list. - [RangeSlider](/components/range-slider): A range slider supporting single-value, dual-thumb range, and multi-point modes with customizable thumbs, segment styles, tick marks, and keyboard accessibility. - [RatingInput](/components/rating-input): A star rating input with fractional precision, keyboard navigation, and customizable icons and colors. - [SegmentedInput](/components/segmented-input): A segmented control for selecting one option from a set, with an animated sliding indicator. - [SegmentedSelect](/components/segmented-select): A segmented control that selects from typed option values, combining the visual style of SegmentedInput with the option model of NativeSelect. - [SliderInput](/components/slider-input): A range slider input with configurable min, max, and step values for selecting a numeric value. - [SortableList](/components/sortable-list): A drag-and-drop reorderable list. Each item receives a drag handle for the user to grab. - [Switch](/components/switch): A toggle switch for boolean on/off states. - [TextArea](/components/text-area): A multi-line text input with configurable row count, placeholder, and all standard input states. - [TextInput](/components/text-input): A single-line text input with support for prefix, suffix, icons, and all standard input states. - [TransferList](/components/transfer-list): A dual-list component for transferring items between "available" and "selected" pools. Generic in T with custom rendering. - [TriStateCheckboxInput](/components/tri-state-checkbox): A checkbox with three states: checked, unchecked, and indeterminate. Cycles through states on click with full ARIA semantics. - [UrlInput](/components/url-input): A URL input with browser-native URL validation via type="url". - [UuidInput](/components/uuid-input): A masked input for UUID values with automatic hyphen insertion and hex character validation. ## Data Display - [AutoColorBadge](/components/auto-color-badge): A badge that derives a stable background color from its text content. The text is hashed to produce deterministic HSL values, with automatic black/white text for contrast. - [AvatarGroup](/components/avatar-group): Arranges multiple avatars in a row with overlapping or spaced layout and an overflow indicator. - [Avatar](/components/avatar): Displays a user avatar with image, initials, or icon fallback. - [Badge](/components/badge): Small label for status indicators, counts, or categories. Supports removable badges with a close button. - [CodeHighlight](/components/code-highlight): Syntax-highlighted code block powered by Shiki. Ships as a separate entry point to keep the core bundle small. - [Icon](/components/icon): Renders an SVG icon from the Iconify library with lazy loading, caching, and theme color support. - [Indicator](/components/indicator): Overlays a small dot or count badge on any child content. Useful for notification icons, unread counts, and status indicators. - [Kbd](/components/kbd): A styled keyboard key indicator for displaying keyboard shortcuts with a 3D pressed appearance. - [Label](/components/label): Inline text labels with semantic styling variants for emphasis, muted, and danger states. - [Ribbon](/components/ribbon): A diagonal corner ribbon for labeling cards or containers with status tags like "New", "Sale", or "Featured". - [StatCard](/components/stat-card): A dashboard metric display with composable value, label, trend indicator, icon, and sparkline sections. ## Files - [Base64Input](/components/base64-input): A single-file upload input that stores the file as a base64 string. Supports drag-and-drop, file type filtering, and size limits. - [FileInput](/components/file-input): A drag-and-drop file input with click-to-select support, file type filtering, size limits, and multiple display modes. - [ListInput](/components/list-input): A dynamic list component for managing ordered arrays. Each item receives actions for removal and reordering (up, down, first, last). - [PageDropZone](/components/page-drop-zone): A full-page drag-and-drop file zone that listens for file drag events anywhere on the document, showing an overlay while dragging and providing programmatic file picker access. ## Navigation - [Breadcrumbs](/components/breadcrumbs): Hierarchical navigation trail showing the current page location within a site structure. - [Link](/components/link): A themed navigation link with support for variants, colors, disabled state, and client-side routing. - [NavigationLink](/components/navigation-link): A styled navigation link that automatically detects the active route and disables itself when the current URL matches. - [NavigationProgress](/components/navigation-progress): A thin progress bar fixed to the top or bottom of the viewport, indicating navigation or loading progress. Inspired by NProgress. - [Pagination](/components/pagination): Page navigation control for moving through multi-page content, with configurable sibling pages, first/last buttons, visual variants, and responsive layout. - [Sidebar](/components/sidebar): Vertical navigation panel with grouped links, collapsible sections, and support for light and dark background modes. - [Stepper](/components/stepper): A multi-step workflow indicator with content panels, navigation buttons, and programmatic control via createStepper. - [Tabs](/components/tabs): Tabbed navigation for switching between content panels. - [Toolbar](/components/toolbar): Horizontal toolbar container with roving tabindex keyboard navigation, grouping, dividers, and spacers. ## Buttons - [ButtonLink](/components/button-link): A navigation link styled as a button, combining the visual appearance of a button with anchor semantics. - [Button](/components/button): A clickable button with multiple variants, sizes, colors, and states. - [CloseButton](/components/close-button): A small icon-only button for dismissing modals, drawers, notifications, and tags. Fully accessible with ARIA labeling. - [CopyButton](/components/copy-button): A button that copies text to the clipboard with visual feedback. Shows a checkmark icon briefly after a successful copy. - [ToggleButtonGroup](/components/toggle-button-group): A group of connected toggle buttons supporting single or multiple selection with shared borders and coordinated styling. - [ToggleButton](/components/toggle-button): A button that toggles between pressed and unpressed states with full variant and color support. ## Media - [Carousel](/components/carousel): A fully-featured carousel for cycling through slide content with auto-play, drag, swipe, and keyboard navigation. - [PdfPageViewer](/components/pdf-page-viewer): A PDF.js-powered page viewer with fit modes, rotation, text selection layer, and annotation support. Renders a single page at a time. - [NativePdfPreview](/components/pdf-preview): Renders a PDF using the browser native viewer via an iframe. Accepts a URL string, Blob, ArrayBuffer, or Uint8Array and manages blob URL lifecycle automatically. - [BaseVideoPlayer](/components/video-player): A unified video player supporting HTML5 video files, HLS streams, and YouTube URLs. Provides a consistent API across providers with reactive controls and playback callbacks. ## Dropdowns - [ColorSwatchInput](/components/color-swatch-input): A color picker that renders a unique organic SVG blob swatch for each color. Supports alpha channel control and multiple color format outputs. - [ComboboxInput](/components/combobox-input): A searchable combobox with async option loading, keyboard navigation, and custom option rendering. - [Dropdown](/components/dropdown): A select dropdown with keyboard navigation, searchable filtering, grouped options, and rich content support. - [LazyNativeSelect](/components/lazy-native-select): A native select input that loads its options asynchronously. Shows a loading spinner while fetching, then renders the populated select once options are ready. - [LocaleSelector](/components/locale-selector): A dropdown for selecting the application locale. Reads the current locale from the Locale provider and optionally updates it when the user makes a selection. - [Menu](/components/menu): A dropdown action menu with keyboard navigation, submenus, disabled items, and accessible ARIA markup. Placed as a child of the trigger element. - [MultiSelect](/components/multi-select): A fully-featured multi-select dropdown with search, keyboard navigation, async loading, and select/clear all actions. - [NativeSelect](/components/native-select): A native HTML select element with styled appearance, grouped options, and custom equality support. - [TagInput](/components/tags-input): A tag/chip input that lets users type and add multiple string values, with keyboard and backspace support. ## Tables & Data - [DataTable](/components/data-table): A full-featured data table with sorting, filtering, row selection, pagination, and bulk actions. Each feature is opt-in and configurable per column. - [HistoryTimeline](/components/history-timeline): A chronological audit log timeline with filter chips, colored action labels, and optional restore actions. - [ProgressBar](/components/progress-bar): A horizontal bar indicating progress or loading state. - [QueryDataTable](/components/query-data-table): A DataTable that loads data asynchronously. Wraps createQueryDataSource with DataTable so sort, filter, and selection state persist across reloads. - [Skeleton](/components/skeleton): Placeholder loading indicators for content that is still loading. - [Table](/components/table): A styled HTML table wrapper with configurable borders, striped rows, hover effects, and sticky headers. - [TreeView](/components/tree-view): Hierarchical tree navigation with expand/collapse, icon support, badges, and both controlled and uncontrolled expansion modes. - [VirtualList](/components/virtual-list): A virtualized list that renders only visible items for high performance with large datasets (10,000+ items). ## Pickers - [DateInput](/components/date-input): A native date input (type="date") that binds to a JavaScript Date object. - [DatePicker](/components/date-picker): A date selection panel with month/year navigation. Uses Temporal PlainDate internally. - [DateRangeSelect](/components/date-range-select): A dropdown date range selector with a single calendar showing range highlighting. Both start and end dates are required. - [DateSelect](/components/date-select): A dropdown date selector that opens a calendar picker. The selected date is always required — use NullableDateSelect when null is allowed. - [DateTimeInput](/components/date-time-input): A native datetime-local input that binds to a JavaScript Date object. - [DateTimeSelect](/components/date-time-select): A dropdown date-time selector combining a calendar picker and a time picker. The selected date-time is always required — use NullableDateTimeSelect when null is allowed. - [NullableDateSelect](/components/nullable-date-select): A dropdown date selector where the value may be null. Includes a clear button to reset back to null. Use DateSelect when a date is always required. - [OpenDateRangeSelect](/components/open-date-range-select): A dropdown date range selector where either or both dates can be null, allowing open-ended ranges. - [Temporal Inputs](/components/plain-date-input): A family of native date/time inputs that bind to Temporal API types (PlainDate, PlainDateTime, PlainTime, PlainYearMonth, PlainMonthDay). Requires the Temporal polyfill. - [TimePicker](/components/time-picker): A time selection panel with scrollable hour and minute columns. Uses Temporal PlainTime internally. - [TimeSelect](/components/time-select): A dropdown time selector that opens a time picker panel. The selected time is always required — use NullableTimeSelect when null is allowed. ## Formatting - [FormatBigInt](/components/format-bigint): Locale-aware bigint formatting component for arbitrarily large integers with decimal, currency, and unit styles. - [FormatDateTime](/components/format-date-time): Locale-aware combined date and time formatting component with independent dateStyle and timeStyle controls. - [FormatDate](/components/format-date): Locale-aware date formatting component with preset styles, fine-grained part selection, and support for Temporal types. - [FormatDisplayName](/components/format-display-name): Locale-aware display name component for translating language, region, currency, script, and calendar codes into human-readable names. - [FormatFileSize](/components/format-file-size): Locale-aware file size formatting component that converts byte counts into human-readable strings like "1.5 MB". - [FormatList](/components/format-list): Locale-aware list formatting component that joins arrays into natural language strings with conjunction, disjunction, or unit semantics. - [FormatNumber](/components/format-number): Locale-aware number formatting component supporting decimal, currency, percent, unit, and compact notation styles. - [FormatPlural](/components/format-plural): Locale-aware plural formatting component that selects the correct grammatical form based on CLDR plural rules and interpolates {count}. - [FormatRelativeTime](/components/format-relative-time): Locale-aware relative time formatting component producing expressions like "2 days ago" or "in 3 hours". - [FormatTime](/components/format-time): Locale-aware time formatting component with preset styles, 12/24-hour control, and timezone support. ## Optional - [API Reference](/api): Full TypeScript API documentation for every exported symbol - [Full Documentation](/llms-full.txt): Complete documentation with usage examples and component prop details