# Sabil UI

> A set of beautifully crafted, accessible components with a calm, tactile design foundation. Open code. Copy it, own it, ship it.

Read https://ui.muttaqinsabilul.my.id/docs/ai.md first: it holds the rules an assistant must follow to build UI with Sabil UI.

MCP server (Streamable HTTP, no auth): https://ui.muttaqinsabilul.my.id/mcp — setup at https://ui.muttaqinsabilul.my.id/docs/mcp.md

## Getting started

- [Introduction](https://ui.muttaqinsabilul.my.id/docs.md): A set of beautifully crafted, accessible components with a calm, tactile design foundation. Open code. Copy it, own it, ship it.
- [Installation](https://ui.muttaqinsabilul.my.id/docs/installation.md): Set up Next.js, Tailwind CSS v4 and the foundation, then add components.
- [Theming](https://ui.muttaqinsabilul.my.id/docs/theming.md): Every visual decision lives in a CSS variable.
- [Dark Mode](https://ui.muttaqinsabilul.my.id/docs/dark-mode.md): Dark mode swaps token values under a .dark class.
- [AI & LLMs](https://ui.muttaqinsabilul.my.id/docs/ai.md): Rules for AI assistants building UI with Sabil UI.
- [MCP Server](https://ui.muttaqinsabilul.my.id/docs/mcp.md): Remote MCP server for Claude Code, Cursor and VS Code.
- [HTML, CSS & JS](https://ui.muttaqinsabilul.my.id/docs/html-css.md): Sabil UI without React or Tailwind.
- [Components](https://ui.muttaqinsabilul.my.id/docs/components.md): 66 components built on the same foundation.

## Components

- [Accordion](https://ui.muttaqinsabilul.my.id/docs/components/accordion.md): A vertically stacked set of interactive headings that each reveal a section of content.
- [Alert](https://ui.muttaqinsabilul.my.id/docs/components/alert.md): Displays a callout for user attention.
- [Alert Dialog](https://ui.muttaqinsabilul.my.id/docs/components/alert-dialog.md): A modal dialog that interrupts the user with important content and expects a response.
- [Aspect Ratio](https://ui.muttaqinsabilul.my.id/docs/components/aspect-ratio.md): Displays content within a desired ratio.
- [Attachment](https://ui.muttaqinsabilul.my.id/docs/components/attachment.md): Displays a file, image or link attached to a message or form.
- [Avatar](https://ui.muttaqinsabilul.my.id/docs/components/avatar.md): An image element with a fallback for representing the user.
- [Badge](https://ui.muttaqinsabilul.my.id/docs/components/badge.md): Displays a badge or a component that looks like a badge.
- [Breadcrumb](https://ui.muttaqinsabilul.my.id/docs/components/breadcrumb.md): Displays the path to the current resource using a hierarchy of links.
- [Bubble](https://ui.muttaqinsabilul.my.id/docs/components/bubble.md): A chat bubble for conversational interfaces.
- [Button](https://ui.muttaqinsabilul.my.id/docs/components/button.md): Displays a button or a component that looks like a button.
- [Button Group](https://ui.muttaqinsabilul.my.id/docs/components/button-group.md): A container that groups related buttons together with consistent styling.
- [Calendar](https://ui.muttaqinsabilul.my.id/docs/components/calendar.md): A date field component that allows users to enter and edit date.
- [Card](https://ui.muttaqinsabilul.my.id/docs/components/card.md): Displays a card with header, content, and footer.
- [Carousel](https://ui.muttaqinsabilul.my.id/docs/components/carousel.md): A carousel with motion and swipe built using Embla.
- [Chart](https://ui.muttaqinsabilul.my.id/docs/components/chart.md): Beautiful charts. Built using Recharts. Copy and paste into your apps.
- [Checkbox](https://ui.muttaqinsabilul.my.id/docs/components/checkbox.md): A control that allows the user to toggle between checked and not checked.
- [Code Block](https://ui.muttaqinsabilul.my.id/docs/components/code-block.md): Displays a block of code with syntax highlighting and a copy button.
- [Collapsible](https://ui.muttaqinsabilul.my.id/docs/components/collapsible.md): An interactive component which expands or collapses a panel.
- [Combobox](https://ui.muttaqinsabilul.my.id/docs/components/combobox.md): Autocomplete input and command palette with a list of suggestions.
- [Command](https://ui.muttaqinsabilul.my.id/docs/components/command.md): Fast, composable, unstyled command menu for React.
- [Context Menu](https://ui.muttaqinsabilul.my.id/docs/components/context-menu.md): Displays a menu to the user, triggered by a right click.
- [Data Table](https://ui.muttaqinsabilul.my.id/docs/components/data-table.md): Powerful table and datagrids built using TanStack Table.
- [Date Picker](https://ui.muttaqinsabilul.my.id/docs/components/date-picker.md): A date picker component with range and presets.
- [Dialog](https://ui.muttaqinsabilul.my.id/docs/components/dialog.md): A window overlaid on either the primary window or another dialog window.
- [Direction](https://ui.muttaqinsabilul.my.id/docs/components/direction.md): Provides the reading direction (LTR or RTL) to every component below it.
- [Drawer](https://ui.muttaqinsabilul.my.id/docs/components/drawer.md): A drawer component for React, built on Vaul.
- [Dropdown Menu](https://ui.muttaqinsabilul.my.id/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://ui.muttaqinsabilul.my.id/docs/components/empty.md): Use the Empty component to display an empty state.
- [Field](https://ui.muttaqinsabilul.my.id/docs/components/field.md): Combine labels, controls, and help text to compose accessible form fields.
- [Hover Card](https://ui.muttaqinsabilul.my.id/docs/components/hover-card.md): For sighted users to preview content available behind a link.
- [Input](https://ui.muttaqinsabilul.my.id/docs/components/input.md): Displays a form input field or a component that looks like an input field.
- [Input Group](https://ui.muttaqinsabilul.my.id/docs/components/input-group.md): Add addons, buttons, and helper content to inputs.
- [Input OTP](https://ui.muttaqinsabilul.my.id/docs/components/input-otp.md): Accessible one-time password component with copy paste functionality.
- [Item](https://ui.muttaqinsabilul.my.id/docs/components/item.md): A versatile component for displaying content with media, title, description and actions.
- [Kbd](https://ui.muttaqinsabilul.my.id/docs/components/kbd.md): Used to display textual user input from keyboard.
- [Label](https://ui.muttaqinsabilul.my.id/docs/components/label.md): Renders an accessible label associated with controls.
- [Marker](https://ui.muttaqinsabilul.my.id/docs/components/marker.md): A compact status line for events in a timeline or activity feed.
- [Menubar](https://ui.muttaqinsabilul.my.id/docs/components/menubar.md): A visually persistent menu common in desktop applications.
- [Message](https://ui.muttaqinsabilul.my.id/docs/components/message.md): Layout for a single message in a conversation, with avatar, header and footer.
- [Message Scroller](https://ui.muttaqinsabilul.my.id/docs/components/message-scroller.md): A scroll container for chat that keeps the newest message in view.
- [Native Select](https://ui.muttaqinsabilul.my.id/docs/components/native-select.md): A styled native HTML select element.
- [Navigation Menu](https://ui.muttaqinsabilul.my.id/docs/components/navigation-menu.md): A collection of links for navigating websites.
- [Pagination](https://ui.muttaqinsabilul.my.id/docs/components/pagination.md): Pagination with page navigation, next and previous links.
- [Popover](https://ui.muttaqinsabilul.my.id/docs/components/popover.md): Displays rich content in a portal, triggered by a button.
- [Progress](https://ui.muttaqinsabilul.my.id/docs/components/progress.md): Displays an indicator showing the completion progress of a task.
- [Questionnaire](https://ui.muttaqinsabilul.my.id/docs/components/questionnaire.md): A step-by-step set of questions with keyboard shortcuts.
- [Radio Group](https://ui.muttaqinsabilul.my.id/docs/components/radio-group.md): A set of checkable buttons where no more than one can be checked at a time.
- [Resizable](https://ui.muttaqinsabilul.my.id/docs/components/resizable.md): Accessible resizable panel groups and layouts with keyboard support.
- [Scroll Area](https://ui.muttaqinsabilul.my.id/docs/components/scroll-area.md): Augments native scroll functionality for custom, cross-browser styling.
- [Select](https://ui.muttaqinsabilul.my.id/docs/components/select.md): Displays a list of options for the user to pick from, triggered by a button.
- [Separator](https://ui.muttaqinsabilul.my.id/docs/components/separator.md): Visually or semantically separates content.
- [Sheet](https://ui.muttaqinsabilul.my.id/docs/components/sheet.md): Extends the Dialog component to display content that complements the main content of the screen.
- [Sidebar](https://ui.muttaqinsabilul.my.id/docs/components/sidebar.md): A composable, themeable and customizable sidebar component.
- [Skeleton](https://ui.muttaqinsabilul.my.id/docs/components/skeleton.md): Use to show a placeholder while content is loading.
- [Slider](https://ui.muttaqinsabilul.my.id/docs/components/slider.md): An input where the user selects a value from within a given range.
- [Spinner](https://ui.muttaqinsabilul.my.id/docs/components/spinner.md): An indicator that can be used to show a loading state.
- [Switch](https://ui.muttaqinsabilul.my.id/docs/components/switch.md): A control that allows the user to toggle between checked and not checked.
- [Table](https://ui.muttaqinsabilul.my.id/docs/components/table.md): A responsive table component.
- [Tabs](https://ui.muttaqinsabilul.my.id/docs/components/tabs.md): A set of layered sections of content, known as tab panels, displayed one at a time.
- [Textarea](https://ui.muttaqinsabilul.my.id/docs/components/textarea.md): Displays a form textarea or a component that looks like a textarea.
- [Toast](https://ui.muttaqinsabilul.my.id/docs/components/toast.md): An opinionated toast component for React, built on Sonner.
- [Toggle](https://ui.muttaqinsabilul.my.id/docs/components/toggle.md): A two-state button that can be either on or off.
- [Toggle Group](https://ui.muttaqinsabilul.my.id/docs/components/toggle-group.md): A set of two-state buttons that can be toggled on or off.
- [Tooltip](https://ui.muttaqinsabilul.my.id/docs/components/tooltip.md): A popup that displays information related to an element on hover or focus.
- [Trace](https://ui.muttaqinsabilul.my.id/docs/components/trace.md): Shows the steps an agent or a job takes, with live status.
- [Typography](https://ui.muttaqinsabilul.my.id/docs/components/typography.md): Styles for headings, paragraphs, lists and more.

## Motion foundations

- [Motion Foundation](https://ui.muttaqinsabilul.my.id/motion.md): How things move: short, purposeful animation that gives feedback and keeps space consistent.
- [Principles](https://ui.muttaqinsabilul.my.id/motion/principles.md): Decide how often people see it and what it is for, before animating.
- [Easing](https://ui.muttaqinsabilul.my.id/motion/easing.md): Strong ease-out curves start fast, so the interface feels instant.
- [Duration](https://ui.muttaqinsabilul.my.id/motion/duration.md): Interface motion stays under 300ms.
- [Reduced Motion](https://ui.muttaqinsabilul.my.id/motion/reduced-motion.md): When people ask for less motion, remove movement but keep fades.

## Motion patterns

- [Press](https://ui.muttaqinsabilul.my.id/motion/press.md): Pressable elements scale down slightly while held. It tells the user the interface heard them.
- [Hover](https://ui.muttaqinsabilul.my.id/motion/hover.md): Small lifts and nudges that hint an element is interactive. Only on devices with a real pointer.
- [Enter & Exit](https://ui.muttaqinsabilul.my.id/motion/enter-exit.md): Elements fade and grow in from 95% scale, and leave faster than they came. Nothing appears from nothing.
- [Popover Origin](https://ui.muttaqinsabilul.my.id/motion/popover-origin.md): Popovers grow out of the element that opened them. Modals are the exception: they stay centered.
- [Stagger](https://ui.muttaqinsabilul.my.id/motion/stagger.md): Items that arrive together enter one after another, a few milliseconds apart. The eye reads it as one motion.
- [Collapse](https://ui.muttaqinsabilul.my.id/motion/collapse.md): Content expands and collapses with its real height, so the layout below moves instead of jumping.
- [Tab Indicator](https://ui.muttaqinsabilul.my.id/motion/tab-indicator.md): The active indicator slides between options, so the user sees where the selection went.
- [Crossfade + Blur](https://ui.muttaqinsabilul.my.id/motion/crossfade.md): Labels and icons swap through a short blur, so two states read as one change instead of two overlapping objects.
- [Number Ticker](https://ui.muttaqinsabilul.my.id/motion/number-ticker.md): Numbers count to their new value with a spring, so the size of the change is visible.
- [Skeleton Shimmer](https://ui.muttaqinsabilul.my.id/motion/skeleton-shimmer.md): A soft highlight sweeps across placeholders while content loads. Fast enough to feel busy, slow enough to stay calm.
- [Toast Stack](https://ui.muttaqinsabilul.my.id/motion/toast-stack.md): New toasts push in from the edge. Older ones tuck behind and fan out on hover.
- [Drawer](https://ui.muttaqinsabilul.my.id/motion/drawer.md): A sheet slides up from the bottom and can be flicked away. Velocity counts, not only distance.
- [Hold to Confirm](https://ui.muttaqinsabilul.my.id/motion/hold-to-confirm.md): Destructive actions fill up while held. Pressing is slow and deliberate, releasing snaps back fast.
- [Swipe to Dismiss](https://ui.muttaqinsabilul.my.id/motion/swipe-to-dismiss.md): Cards follow the finger and leave when flicked. The rest of the list closes the gap.
- [Scroll Reveal](https://ui.muttaqinsabilul.my.id/motion/scroll-reveal.md): Sections fade up once when they enter the viewport. Once only — scrolling back does not replay.
- [Layout Shift](https://ui.muttaqinsabilul.my.id/motion/layout-shift.md): An element morphs from its place in a grid into a detail view. The user never loses track of what they opened.

## Machine-readable

- [Full docs in one file](https://ui.muttaqinsabilul.my.id/llms-full.txt)
- [Design tokens](https://ui.muttaqinsabilul.my.id/tokens.json): W3C Design Tokens format, light and dark values
- [Component registry](https://ui.muttaqinsabilul.my.id/r/index.json): every component with its source, npm dependencies and internal dependencies at /r/<name>.json