# Sina UI

> Accessible Svelte 5 components that feel finished: copy them into your project with the sinaui CLI and own the code. Built on CSS variables, with keyboard and screen reader support, right-to-left, light and dark, and motion throughout.

Install any component with `npx sinaui add <name>` (for example `npx sinaui add dropdown blocks/chat`). Components read their colors, corners and type from tokens.css.

- [Everything in one file](https://ebnsina.github.io/sinaui/llms-full.txt): every page with its examples' source
- [Skill for AI coding assistants](https://ebnsina.github.io/sinaui/skill.md): how to build with Sina UI
- [Registry](https://ebnsina.github.io/sinaui/r/index.json): installable items; /r/<name>.json has one item's files

## Getting started

- [Introduction](https://ebnsina.github.io/sinaui/docs): Copy-paste Svelte 5 components: WAI-ARIA patterns, keyboard support, right-to-left, dark mode and motion that stays smooth.
- [Theming](https://ebnsina.github.io/sinaui/theming): Change Sina UI's colors, corners, type and motion with a few CSS variables.
- [Changelog](https://ebnsina.github.io/sinaui/changelog): What each release of Sina UI contains.

## Buttons

- [Button](https://ebnsina.github.io/sinaui/components/button): Buttons and link buttons with variants, sizes, icon-only and a spinner-only loading state.
- [Action button](https://ebnsina.github.io/sinaui/components/action-button): A button that runs a task and shows it working, then done or failed, without changing size.
- [Confirm button](https://ebnsina.github.io/sinaui/components/confirm-button): A button that asks “Are you sure?” in place, then acts on a second press.
- [Copy button](https://ebnsina.github.io/sinaui/components/copy-button): Copies text to the clipboard and says so: the icon turns into a tick and the label into “Copied”, then both come back.
- [Hold to confirm](https://ebnsina.github.io/sinaui/components/hold-to-confirm): A button you press and hold to confirm, filling up as you hold.
- [Split button](https://ebnsina.github.io/sinaui/components/split-button): A main action joined to a menu of related ones: press the left part to act, the arrow for the alternatives.

## Forms

- [Calendar](https://ebnsina.github.io/sinaui/components/calendar): A month grid for choosing a day or a range, in any calendar system.
- [Checkbox](https://ebnsina.github.io/sinaui/components/checkbox): Native checkbox with label, hint and an indeterminate state for select-all.
- [Color picker](https://ebnsina.github.io/sinaui/components/color-picker): Choose a color by eye, by hex value, or from suggested swatches.
- [Combobox](https://ebnsina.github.io/sinaui/components/combobox): A text box that filters a list as you type, with keyboard and screen reader support.
- [Date picker](https://ebnsina.github.io/sinaui/components/date-picker): A date field with a calendar that works by keyboard, touch and screen reader, in any locale.
- [Date range picker](https://ebnsina.github.io/sinaui/components/date-range-picker): Choose a start and an end date from a calendar, with quick picks.
- [File drop](https://ebnsina.github.io/sinaui/components/file-drop): Choose files or drag them in, with type and size checks and previews.
- [Form](https://ebnsina.github.io/sinaui/components/form): Forms with clear, well-timed error messages: a dependency-free version, and one on TanStack Form.
- [Input](https://ebnsina.github.io/sinaui/components/input): Text field with a built-in label, hint and error message, wired for screen readers.
- [Mention input](https://ebnsina.github.io/sinaui/components/mention-input): A text box where typing @ suggests people at the caret; each mention becomes one token and is tracked by id.
- [Multi select](https://ebnsina.github.io/sinaui/components/multi-select): Choose several options from a searchable list; the choices sit in the field as chips you can remove.
- [Number field](https://ebnsina.github.io/sinaui/components/number-field): A number input with steppers, keyboard stepping and locale-aware formatting.
- [OTP input](https://ebnsina.github.io/sinaui/components/otp-input): One-time code boxes with paste, phone autofill and a single accessible field.
- [Password input](https://ebnsina.github.io/sinaui/components/password-input): A password field with show and hide, a Caps Lock warning and a strength meter for new passwords.
- [Phone input](https://ebnsina.github.io/sinaui/components/phone-input): A phone number field for any country: pick or search a country, the number formats as you type, and it tells you plainly when it doesn't look right.
- [Radio cards](https://ebnsina.github.io/sinaui/components/radio-cards): A choice shown as cards, each with a description and a price or time, one selection that glides between them.
- [Radio group](https://ebnsina.github.io/sinaui/components/radio): Native radio group with a legend, hints and horizontal layout.
- [Rich text editor](https://ebnsina.github.io/sinaui/components/rich-text-editor): A rich text editor with a formatting toolbar, a menu over selected text, links, and HTML out.
- [Search field](https://ebnsina.github.io/sinaui/components/search-field): A search box with a clear button and Escape to clear.
- [Segmented control](https://ebnsina.github.io/sinaui/components/segmented): A compact single choice with a sliding thumb, built on native radios.
- [Select](https://ebnsina.github.io/sinaui/components/select): Native select styled to match Input, with label, hint, error and the platform picker on phones.
- [Signature pad](https://ebnsina.github.io/sinaui/components/signature-pad): A drawn signature with ink that thins with speed, undo and clear, a typed alternative, and PNG or SVG out.
- [Slider](https://ebnsina.github.io/sinaui/components/slider): A range input with a formatted, announced value.
- [Switch](https://ebnsina.github.io/sinaui/components/switch): On/off switch built on a native checkbox: keyboard, forms and labels work for free.
- [Tag input](https://ebnsina.github.io/sinaui/components/tag-input): Type several short values, each becoming a removable tag.
- [Upload](https://ebnsina.github.io/sinaui/components/upload): File uploads with progress, cancel and retry, inline or in a floating tray.
- [Wheel picker](https://ebnsina.github.io/sinaui/components/wheel-picker): A scrolling wheel of choices, as on iOS.
- [Textarea](https://ebnsina.github.io/sinaui/components/textarea): Multi-line text field with label, hint and error, growing with its content.
- [Time field](https://ebnsina.github.io/sinaui/components/time-field): A time of day, typed part by part in the local format.
- [Toggle group](https://ebnsina.github.io/sinaui/components/toggle-group): A row of on/off buttons where any number can be on, like text styles.
- [Toolbar](https://ebnsina.github.io/sinaui/components/toolbar): A row of related controls that is one stop for the Tab key.

## Overlays

- [Alert dialog](https://ebnsina.github.io/sinaui/components/alert-dialog): A confirmation that asks before something important happens.
- [Command palette](https://ebnsina.github.io/sinaui/components/command-palette): Search and run any command from the keyboard with ⌘K.
- [Context menu](https://ebnsina.github.io/sinaui/components/context-menu): A menu at the pointer on right-click, long-press or Shift+F10.
- [Dialog](https://ebnsina.github.io/sinaui/components/dialog): Modal dialog and side sheet on the native dialog element: focus trap, Escape and focus return built in.
- [Drawer](https://ebnsina.github.io/sinaui/components/drawer): A bottom sheet you can swipe down to close.
- [Dropdown](https://ebnsina.github.io/sinaui/components/dropdown): Menu button that grows out of its trigger, positions itself around the viewport and follows the WAI-ARIA menu pattern.
- [Hover card](https://ebnsina.github.io/sinaui/components/hover-card): A preview card on hovering or focusing a link.
- [Popover](https://ebnsina.github.io/sinaui/components/popover): Non-modal panel anchored to a button, for extra detail or a quick edit.
- [Tooltip](https://ebnsina.github.io/sinaui/components/tooltip): Tooltip that names or describes a control, shows on hover and keyboard focus, and can always be dismissed.

## Feedback

- [Announcement bar](https://ebnsina.github.io/sinaui/components/announcement-bar): A slim bar for news at the top of a page: one message or several taking turns, and dismissed for good.
- [Alert](https://ebnsina.github.io/sinaui/components/alert): Inline messages with a tone, optional actions and dismiss, announced only when they should be.
- [Empty state](https://ebnsina.github.io/sinaui/components/empty-state): What to show when there is nothing to show, and the way forward.
- [Meter](https://ebnsina.github.io/sinaui/components/meter): Shows a measurement within a known range, like space used.
- [Progress](https://ebnsina.github.io/sinaui/components/progress): Progress bars that announce their value; an indeterminate sweep when the amount is unknown.
- [Rolling number](https://ebnsina.github.io/sinaui/components/rolling-number): Numbers whose digits roll to their new value.
- [Skeleton](https://ebnsina.github.io/sinaui/components/skeleton): Loading placeholders that stay quiet for screen readers.
- [Spinner](https://ebnsina.github.io/sinaui/components/spinner): A small indicator that something is loading.
- [Toast](https://ebnsina.github.io/sinaui/components/toast): Brief notifications that announce themselves, pause while read, and never steal focus.

## Display

- [Avatar](https://ebnsina.github.io/sinaui/components/avatar): A person's picture, or their initials when there is none.
- [Avatar group](https://ebnsina.github.io/sinaui/components/avatar-group): Overlapping avatars for a team or the readers of a page, with the rest folded into +N.
- [Badge](https://ebnsina.github.io/sinaui/components/badge): Small status labels in a tone, readable on any background.
- [Card](https://ebnsina.github.io/sinaui/components/card): Surfaces for grouped content; linked cards are one clear link.
- [Carousel](https://ebnsina.github.io/sinaui/components/carousel): Slides that swipe, scroll and snap natively, with buttons, indicators and an optional pause-able autoplay.
- [Chart](https://ebnsina.github.io/sinaui/components/chart): Accessible charts on TanStack Charts, themed by Sina UI tokens in light and dark.
- [Chat](https://ebnsina.github.io/sinaui/components/chat): A message thread that stays at the newest message without pulling you out of history: receipts, retry, replies, reactions, attachments, voice notes, mentions, typing and older pages.
- [Code block](https://ebnsina.github.io/sinaui/components/code-block): Highlighted code with line numbers, marked lines and copy.
- [Data table](https://ebnsina.github.io/sinaui/components/data-table): A data table with sorting, search and pages, built on TanStack Table.
- [Folder](https://ebnsina.github.io/sinaui/components/folder): A folder you can see into: frosted glass, papers inside, opening as you point.
- [Kbd](https://ebnsina.github.io/sinaui/components/kbd): Keyboard keys and shortcuts, shown the way each platform writes them.
- [Mind map](https://ebnsina.github.io/sinaui/components/mind-map): A mind map for Svelte: branches on both sides or one, pan and zoom, closing branches, and editing by keyboard or by dragging topics.
- [Resizable panels](https://ebnsina.github.io/sinaui/components/resizable): Panels side by side or stacked, resized by dragging or with the keyboard.
- [Scroll area](https://ebnsina.github.io/sinaui/components/scroll-area): A scrolling box that shows when there's more, with a button to move on.
- [Separator](https://ebnsina.github.io/sinaui/components/separator): A line between groups of content, with optional words.
- [Sortable](https://ebnsina.github.io/sinaui/components/sortable): Reorder items by dragging, with touch and keyboard as first-class as the mouse.
- [Table](https://ebnsina.github.io/sinaui/components/table): A plain, readable table for a short, fixed set of rows.
- [Tag group](https://ebnsina.github.io/sinaui/components/tag-group): A set of tags, such as active filters, each of which can be removed.
- [Virtual list](https://ebnsina.github.io/sinaui/components/virtual-list): Lists of thousands of rows that scroll as smoothly as ten.

## Media

- [Audio player](https://ebnsina.github.io/sinaui/components/audio): An audio player with a seekable timeline, 15-second skips, speed, volume and lock-screen controls.
- [Image](https://ebnsina.github.io/sinaui/components/image): An image that holds its space while it loads, arrives out of a soft blur, says so when it can't load, and can open larger.
- [Image compare](https://ebnsina.github.io/sinaui/components/image-compare): Two images in one frame with a handle between them: drag, click or use the arrow keys to compare.
- [Video](https://ebnsina.github.io/sinaui/components/video): A video player with keyboard shortcuts, captions, speed, picture in picture and full screen; plus a streaming variant for HLS and DASH.
- [Visualizer](https://ebnsina.github.io/sinaui/components/visualizer): Draws sound as bars or a wave, from an audio or video element or a microphone.

## Navigation

- [Breadcrumb](https://ebnsina.github.io/sinaui/components/breadcrumb): Shows where the current page sits in the site, with links back up.
- [File tree](https://ebnsina.github.io/sinaui/components/file-tree): Folders and files you can open, close and choose from, by keyboard or pointer.
- [Menubar](https://ebnsina.github.io/sinaui/components/menubar): A row of menus, like a desktop app's File and Edit menus.
- [Navigation menu](https://ebnsina.github.io/sinaui/components/navigation-menu): A site header whose items open panels of links.
- [Pagination](https://ebnsina.github.io/sinaui/components/pagination): Moves between pages of results, with a marker that glides to the current page.
- [Sidebar layout](https://ebnsina.github.io/sinaui/components/sidebar): An app shell with a sidebar that collapses to icons, and a sheet on small screens.
- [Stepper](https://ebnsina.github.io/sinaui/components/stepper): Shows progress through a multi-step form, with finished steps you can go back to.
- [Tabs](https://ebnsina.github.io/sinaui/components/tabs): Tabs with a sliding indicator, automatic or manual activation, vertical layout and right-to-left support.

## Widgets

- [Alarm clock](https://ebnsina.github.io/sinaui/widgets/alarm-clock): Alarms that ring at a time of day, with snooze.
- [Clock](https://ebnsina.github.io/sinaui/widgets/clock): Analog and digital clocks for any time zone.
- [Dynamic island](https://ebnsina.github.io/sinaui/widgets/dynamic-island): A live activity that grows out of a black pill and back.
- [Fluid orb](https://ebnsina.github.io/sinaui/widgets/orb): A liquid orb that shows what a voice assistant is doing.
- [Hourglass](https://ebnsina.github.io/sinaui/widgets/hourglass): A sand timer: flip it to start, the sand runs down.
- [Stopwatch](https://ebnsina.github.io/sinaui/widgets/stopwatch): Time things to the hundredth of a second, with laps.
- [Timer](https://ebnsina.github.io/sinaui/widgets/timer): A countdown set on a ruler, with a chime when time is up.

## Blocks

- [AI chat](https://ebnsina.github.io/sinaui/blocks/ai-chat): A streaming AI chat with Claude, built on TanStack AI.
- [AI media](https://ebnsina.github.io/sinaui/blocks/ai-media): Generate images, speech and video, and transcribe audio, with TanStack AI.
- [Auth](https://ebnsina.github.io/sinaui/blocks/auth): Sign in, sign up, forgot and reset password, and a verification code: ready to wire to your own API.
- [Board](https://ebnsina.github.io/sinaui/blocks/board): A task board: drag cards between lists, reorder lists, add and edit cards.
- [Booking](https://ebnsina.github.io/sinaui/blocks/booking): Booking flows for meetings, hotel stays, restaurant tables and appointments: steps you can go back through, times in the visitor's time zone, live prices and a confirmation.
- [Dashboard](https://ebnsina.github.io/sinaui/blocks/dashboard): An analytics dashboard: headline numbers, charts, occupancy and recent activity.
- [File explorer](https://ebnsina.github.io/sinaui/blocks/file-explorer): A file manager: open folders, choose several, move, sort, preview, upload, and undo from the Trash.
- [Messaging](https://ebnsina.github.io/sinaui/blocks/messaging): A complete messaging app: direct messages, groups and channels, threads, search with filters, forward, pin, save, edit history, voice notes, read receipts, typing and presence, on any screen.
- [Notifications](https://ebnsina.github.io/sinaui/blocks/notifications): A notification bell with an unread count and an inbox: grouped by day, filters, mark as read, mute, and load older.
- [Settings](https://ebnsina.github.io/sinaui/blocks/settings): Account settings: profile, preferences, notifications, security and devices, each saved on its own.
- [Team](https://ebnsina.github.io/sinaui/blocks/team): Manage a team: invite people by email, change roles, remove members, hand over ownership and follow pending invites.

## Pro

- [Overview](https://ebnsina.github.io/sinaui/pro): Sina UI Pro: larger blocks and full app templates, built from the same components.
- [Pricing](https://ebnsina.github.io/sinaui/pro/pricing): A pricing block: plans with a monthly or yearly switch, rolling prices and the exact charge under each.
- [Agent chat](https://ebnsina.github.io/sinaui/pro/agent-chat): A workspace for AI agents: a plan that ticks off, tool calls as cards, approvals before risky actions, citations, and documents that open beside the chat.
- [Calendar](https://ebnsina.github.io/sinaui/pro/calendar): A full calendar app: month, week and day views with drag to create, move and resize.
- [Voice agent](https://ebnsina.github.io/sinaui/pro/voice-agent): A voice call with an AI agent: an orb that moves with your voice, a live transcript, talking over it to interrupt, push-to-talk, and typing when speech isn’t available.
- [Mail inbox](https://ebnsina.github.io/sinaui/pro/mail): A full email client: mailboxes, a conversation list with bulk actions, threads with inline replies, compose with attachments, search and keyboard shortcuts.
- [CMS](https://ebnsina.github.io/sinaui/pro/cms): A content admin app: posts with a rich editor, SEO previews, scheduling and revisions, pages, a media library, categories and comment moderation.
- [Blog](https://ebnsina.github.io/sinaui/pro/blog): An editorial magazine site: lead stories, long-form articles with footnotes and a reading progress bar, topics, authors, search, archive and RSS.
- [Marketing site](https://ebnsina.github.io/sinaui/pro/marketing): A company site for a studio or agency: a bold home page, work with case studies, services, about, careers with applications, and a project brief form.
- [E-commerce](https://ebnsina.github.io/sinaui/pro/shop): A storefront: collections with filters, product pages with variants, a cart drawer, a four-step checkout with honest totals, and order confirmation.
- [AI agents](https://ebnsina.github.io/sinaui/pro/ai-agents): An AI agents platform: a customer care agent and a sales agent, from the customer's chat or call through handover to a person, to the business's builder, conversations and insights.
- [SaaS landing page](https://ebnsina.github.io/sinaui/pro/saas-landing): A complete product site: a home page with a live product demo, a pricing calculator, and pricing, changelog, blog, contact and legal pages.
- [SaaS app](https://ebnsina.github.io/sinaui/pro/saas-app): A real SvelteKit app for a software product: sign-in, onboarding, dashboard, invoices, customers, team, billing and settings on one typed data layer.

## Disclosure

- [Accordion](https://ebnsina.github.io/sinaui/components/accordion): Expandable sections on native details and summary, optionally one open at a time.