# Base UI Svelte base-ui-svelte is an unofficial Svelte 5 port of Base UI: unstyled, accessible compound components for design systems. It is not affiliated with MUI or the Base UI team. Install `base-ui-svelte` (peer: Svelte 5); optional styles: `@base-ui-svelte/styles`. Prefer `class` over `className`, Svelte snippets over React children, and `bind:` for controlled state. APIs aim to match Base UI part names, props, and `data-*` attributes unless Svelte requires a divergence. The Tailwind CSS examples are written for Tailwind CSS v4. License: MIT (free). Primary docs: this site; behavior details: https://base-ui.com. ## Overview - [Quick start](https://base-ui-svelte.t7t.app/index.md): base-ui-svelte is an unofficial Svelte 5 port of Base UI: unstyled, accessible headless components. Use class, snippets, and bind: — not affiliated with MUI. - [Accessibility](https://base-ui-svelte.t7t.app/overview/accessibility.md): Accessible compound components for Svelte 5, matching Base UI behavior where possible. - [Releases](https://base-ui-svelte.t7t.app/overview/releases.md): Track this port’s versions separately from Base UI React. - [Community](https://base-ui-svelte.t7t.app/overview/community.md): Community and contribution context for an unofficial port. - [About](https://base-ui-svelte.t7t.app/overview/about.md): Unofficial Svelte 5 port of Base UI. ## Handbook - [Differences](https://base-ui-svelte.t7t.app/handbook/differences.md): Where base-ui-svelte deliberately diverges from Base UI React because of Svelte. - [Styling](https://base-ui-svelte.t7t.app/handbook/styling.md): Style headless parts with data attributes, class names, and the optional @base-ui-svelte/styles package. Base UI React has no official styles package. - [Animation](https://base-ui-svelte.t7t.app/handbook/animation.md): Animate open and close with CSS transitions driven by data attributes and presence. - [Composition](https://base-ui-svelte.t7t.app/handbook/composition.md): Compose parts with Svelte snippets and optional render tag strings. - [Customization](https://base-ui-svelte.t7t.app/handbook/customization.md): Customize behavior and appearance without forking the library. - [Forms](https://base-ui-svelte.t7t.app/handbook/forms.md): Field, Fieldset, and Form for accessible validation in Svelte. - [TypeScript](https://base-ui-svelte.t7t.app/handbook/typescript.md): Strict typing with Svelte 5 props, snippets, and bindable state. ## Components - [Accordion](https://base-ui-svelte.t7t.app/accordion.md): A vertically stacked set of interactive headings that each reveal a section of content. - [Alert Dialog](https://base-ui-svelte.t7t.app/alert-dialog.md): A modal dialog that interrupts the user with important content and expects a response. - [Autocomplete](https://base-ui-svelte.t7t.app/autocomplete.md): An input that suggests values as the user types. - [Avatar](https://base-ui-svelte.t7t.app/avatar.md): An image element with a fallback for representing the user. - [Button](https://base-ui-svelte.t7t.app/button.md): A clickable button that supports native and polymorphic rendering. - [Checkbox](https://base-ui-svelte.t7t.app/checkbox.md): A control that allows the user to toggle between checked and not checked. - [Checkbox Group](https://base-ui-svelte.t7t.app/checkbox-group.md): A set of checkboxes for selecting multiple options. - [Collapsible](https://base-ui-svelte.t7t.app/collapsible.md): An interactive component which expands/collapses a panel. - [Combobox](https://base-ui-svelte.t7t.app/combobox.md): An input combined with a listbox of selectable options. - [Context Menu](https://base-ui-svelte.t7t.app/context-menu.md): Displays a menu located at the pointer, triggered by a right-click or long-press. - [Dialog](https://base-ui-svelte.t7t.app/dialog.md): A window overlaid on the primary content for focused tasks. - [Drawer](https://base-ui-svelte.t7t.app/drawer.md): A panel that slides in from the edge of the screen. - [Field](https://base-ui-svelte.t7t.app/field.md): A form control with label, description, and validation messaging. - [Fieldset](https://base-ui-svelte.t7t.app/fieldset.md): A group of related form fields with a legend. - [Form](https://base-ui-svelte.t7t.app/form.md): A form root that coordinates field validation and submit handling. - [Input](https://base-ui-svelte.t7t.app/input.md): A text input control. - [Menu](https://base-ui-svelte.t7t.app/menu.md): A menu of actions or links triggered by a button. - [Menubar](https://base-ui-svelte.t7t.app/menubar.md): A horizontal menu bar of menus. - [Meter](https://base-ui-svelte.t7t.app/meter.md): A graphical display of a numeric value within a range. - [Navigation Menu](https://base-ui-svelte.t7t.app/navigation-menu.md): A collection of links for site navigation. - [Number Field](https://base-ui-svelte.t7t.app/number-field.md): An input for numeric values with increment and decrement controls. - [OTP Field](https://base-ui-svelte.t7t.app/otp-field.md): A segmented input for one-time passcodes. - [Popover](https://base-ui-svelte.t7t.app/popover.md): Displays rich content in a portal, triggered by a button. - [Preview Card](https://base-ui-svelte.t7t.app/preview-card.md): A popup that appears when a link or element is hovered or focused. - [Progress](https://base-ui-svelte.t7t.app/progress.md): Displays an indicator showing the completion progress of a task. - [Radio](https://base-ui-svelte.t7t.app/radio.md): A set of checkable buttons where only one can be checked at a time. - [Scroll Area](https://base-ui-svelte.t7t.app/scroll-area.md): Augments native scroll functionality for custom styling. - [Select](https://base-ui-svelte.t7t.app/select.md): Displays a list of options for the user to pick from. - [Separator](https://base-ui-svelte.t7t.app/separator.md): Visually or semantically separates content. - [Slider](https://base-ui-svelte.t7t.app/slider.md): An input where the user selects a value from a range. - [Switch](https://base-ui-svelte.t7t.app/switch.md): A control that allows the user to toggle between checked and not checked. - [Tabs](https://base-ui-svelte.t7t.app/tabs.md): A set of layered sections of content that display one panel at a time. - [Toast](https://base-ui-svelte.t7t.app/toast.md): A succinct message that is displayed temporarily. - [Toggle](https://base-ui-svelte.t7t.app/toggle.md): A two-state button that can be either on or off. - [Toolbar](https://base-ui-svelte.t7t.app/toolbar.md): A container for grouping a set of controls. - [Tooltip](https://base-ui-svelte.t7t.app/tooltip.md): A popup that displays information related to an element when hovered or focused. ## Utilities - [CSP Provider](https://base-ui-svelte.t7t.app/utils/csp-provider.md): Nonce / CSP helpers for environments that require Content-Security-Policy. - [Direction Provider](https://base-ui-svelte.t7t.app/utils/direction-provider.md): Set text direction (LTR / RTL) for descendants. - [mergeProps](https://base-ui-svelte.t7t.app/utils/merge-props.md): Compose DOM props for Svelte — class concatenation and on* handler chaining.