# suiss/ui

> Copy-paste components, patterns, interactions, charts and blocks for React with Next.js and Vite, React Native with Expo, SwiftUI and Jetpack Compose.

suiss/ui is an open-source collection of components, patterns, interactions, charts and blocks with a clean, minimal design, for React, React Native, SwiftUI and Jetpack Compose. React components are built with Tailwind CSS v4 on three interchangeable primitive bases; React Native components come in Uniwind, NativeWind and StyleSheet flavors with the same API; SwiftUI and Compose versions share the same design tokens. Every component is copied into your project with the @esuiss/ui CLI, so you own and can change the code.

Key facts:
- Package: `@esuiss/ui` (CLI, run with npx; components are copied into your project, not installed as a dependency)
- Start: `npx @esuiss/ui@latest init`
- Stack: React, React Native, SwiftUI, Jetpack Compose, Headless primitives, Tailwind CSS, TypeScript, Accessibility
- License: MIT
- Source: https://github.com/e-suiss/ui
- Full documentation in one file: https://ui.suiss.app/llms-full.txt
- Every page is also available as Markdown by appending `.md` to its URL or sending `Accept: text/markdown`.

## Get started

- [Introduction](https://ui.suiss.app/docs.md): Copy-paste components with a clean, minimal design for React, React Native, SwiftUI and Jetpack Compose.
- [Installation](https://ui.suiss.app/docs/installation.md): Set up a React, React Native, SwiftUI or Jetpack Compose project with init, then add the components you need.
- [Theming](https://ui.suiss.app/docs/theming.md): The standard theme variables, written in oklch for light and dark, and exposed as Tailwind classes such as bg-background and text-foreground.
- [CLI](https://ui.suiss.app/docs/cli.md): The @esuiss/ui command sets up your project and copies components, patterns, charts and blocks into it for React, React Native, SwiftUI and Compose.

## Components

- [Components](https://ui.suiss.app/docs/components.md): 82 components for React, React Native, SwiftUI and Jetpack Compose, each copied into your project with the CLI.
- [Accordion](https://ui.suiss.app/docs/components/accordion.md): A vertically stacked set of headings that each reveal a section of content.
- [Alert](https://ui.suiss.app/docs/components/alert.md): A static callout that draws attention to an important message without interrupting the user.
- [Alert Dialog](https://ui.suiss.app/docs/components/alert-dialog.md): A modal dialog that interrupts the user to confirm an important action or acknowledge information.
- [Alert Sheet](https://ui.suiss.app/docs/components/alert-sheet.md): An action sheet that slides up from the bottom of the screen to confirm or choose an action.
- [Amount Input](https://ui.suiss.app/docs/components/amount-input.md): A large, locale-formatted money display with an on-screen keypad for entering an amount.
- [Aspect Ratio](https://ui.suiss.app/docs/components/aspect-ratio.md): A container that keeps its content at a fixed width-to-height ratio.
- [Attachment](https://ui.suiss.app/docs/components/attachment.md): A compact file card that shows a document or image with its name, details, upload state and actions.
- [Avatar](https://ui.suiss.app/docs/components/avatar.md): A circular image that represents a person, with initials or an icon when no image is available.
- [Badge](https://ui.suiss.app/docs/components/badge.md): A small inline label for status, counts or metadata.
- [Bottom Bar](https://ui.suiss.app/docs/components/bottom-bar.md): A bar pinned to the bottom of a screen for primary actions, which rises above the keyboard.
- [Breadcrumb](https://ui.suiss.app/docs/components/breadcrumb.md): A trail of links that shows where the current page sits in the site hierarchy.
- [Bubble](https://ui.suiss.app/docs/components/bubble.md): A chat-style message bubble with variants, alignment, a tail and optional reactions.
- [Button](https://ui.suiss.app/docs/components/button.md): A pill-shaped button that triggers an action, with variants for every level of emphasis.
- [Button Group](https://ui.suiss.app/docs/components/button-group.md): A container that joins related buttons, inputs and menus into a single connected control.
- [Calendar](https://ui.suiss.app/docs/components/calendar.md): A month-grid date picker for selecting a single date, several dates or a date range.
- [Card](https://ui.suiss.app/docs/components/card.md): A raised container that groups related content and actions about a single subject.
- [Carousel](https://ui.suiss.app/docs/components/carousel.md): A swipeable track of slides with buttons, dots and optional autoplay, built on Embla Carousel.
- [Chart](https://ui.suiss.app/docs/components/chart.md): Themed building blocks for Recharts charts, with a shared color config, tooltip and legend.
- [Checkbox](https://ui.suiss.app/docs/components/checkbox.md): A control that lets people turn a single option on or off.
- [Chip](https://ui.suiss.app/docs/components/chip.md): A compact, selectable pill for filters and tags, with an optional icon and remove button.
- [Collapsible](https://ui.suiss.app/docs/components/collapsible.md): A section that people can expand and collapse to show or hide its content.
- [Combobox](https://ui.suiss.app/docs/components/combobox.md): A text input with a filterable list of options, for choosing one or more values by typing.
- [Command](https://ui.suiss.app/docs/components/command.md): A searchable menu of commands, used inline or as a command palette in a dialog.
- [Context Menu](https://ui.suiss.app/docs/components/context-menu.md): A menu of actions that opens at the pointer when people right-click an area.
- [Dialog](https://ui.suiss.app/docs/components/dialog.md): A modal window that appears above the page to focus people on a task or message.
- [Direction](https://ui.suiss.app/docs/components/direction.md): A provider that sets the reading direction, left-to-right or right-to-left, for the components inside it.
- [Drawer](https://ui.suiss.app/docs/components/drawer.md): A panel that slides in from an edge of the screen and can be dismissed with a swipe.
- [Dropdown Menu](https://ui.suiss.app/docs/components/dropdown-menu.md): A menu of actions or options that opens from a button.
- [Empty](https://ui.suiss.app/docs/components/empty.md): A placeholder that explains why a view has no content and what people can do next.
- [FAB](https://ui.suiss.app/docs/components/fab.md): A floating action button pinned to the bottom corner, with an optional label and speed-dial actions.
- [Field](https://ui.suiss.app/docs/components/field.md): Building blocks for form fields that pair controls with labels, descriptions and error messages.
- [Fullscreen Menu](https://ui.suiss.app/docs/components/fullscreen-menu.md): A navigation menu that covers the whole screen, for site links on small viewports.
- [Haptics](https://ui.suiss.app/docs/components/haptics.md): A provider that connects components to your haptics library, with a hook to trigger feedback.
- [Header](https://ui.suiss.app/docs/components/header.md): A navigation bar with a back button, a centered title, actions and an optional large title that collapses on scroll.
- [Hover Card](https://ui.suiss.app/docs/components/hover-card.md): A card that previews content behind a link when people hover over or focus it.
- [Icon](https://ui.suiss.app/docs/components/icon.md): Renders a Phosphor icon with size and color set through class names.
- [Input](https://ui.suiss.app/docs/components/input.md): A single-line text field for entering and editing short values.
- [Input Accessory Bar](https://ui.suiss.app/docs/components/input-accessory-bar.md): A toolbar above the keyboard with previous, next and done buttons for moving through form fields.
- [Input Group](https://ui.suiss.app/docs/components/input-group.md): A text field with icons, text, buttons or keyboard hints attached inside its border.
- [Input OTP](https://ui.suiss.app/docs/components/input-otp.md): A segmented field for entering one-time passcodes, one character per slot.
- [Item](https://ui.suiss.app/docs/components/item.md): A flexible row that pairs media, a title, a description and actions, for lists and settings.
- [Kbd](https://ui.suiss.app/docs/components/kbd.md): Displays a keyboard key or shortcut, with a platform-aware modifier symbol.
- [Keyboard Scroll View](https://ui.suiss.app/docs/components/keyboard-scroll-view.md): A scroll view that keeps the focused text field visible above the on-screen keyboard.
- [Keypad](https://ui.suiss.app/docs/components/keypad.md): A numeric keypad with round digit keys, a delete key and an optional decimal or biometric key.
- [Label](https://ui.suiss.app/docs/components/label.md): An accessible text label that names a form control.
- [Marker](https://ui.suiss.app/docs/components/marker.md): An inline annotation for timelines and conversations, such as a date divider or system event.
- [Menubar](https://ui.suiss.app/docs/components/menubar.md): A horizontal bar of menus, like a desktop application's menu bar.
- [Message](https://ui.suiss.app/docs/components/message.md): Lays out a single chat message with an optional avatar, header and footer.
- [Message Scroller](https://ui.suiss.app/docs/components/message-scroller.md): A scroll container for chat transcripts that opens at the latest message and keeps scroll position stable.
- [Native Select](https://ui.suiss.app/docs/components/native-select.md): A styled native select element for choosing one option from a list.
- [Navigation Menu](https://ui.suiss.app/docs/components/navigation-menu.md): A site navigation bar whose items open popover or full-width panels of links.
- [Page Indicator](https://ui.suiss.app/docs/components/page-indicator.md): A row of dots that shows the current page in a pager or carousel, with an elongated dot for the active page.
- [Pagination](https://ui.suiss.app/docs/components/pagination.md): Navigation links for moving between pages of content, such as table results.
- [Pin Pad](https://ui.suiss.app/docs/components/pin-pad.md): A passcode entry screen element with a row of dots and a numeric keypad.
- [Popover](https://ui.suiss.app/docs/components/popover.md): A floating panel anchored to a trigger, for supplementary content and lightweight controls.
- [Progress](https://ui.suiss.app/docs/components/progress.md): A horizontal bar that shows the completion of a task.
- [QR Scanner](https://ui.suiss.app/docs/components/qr-scanner.md): A camera overlay with a rounded cut-out scan frame, rounded corner brackets, an optional scan line and an optional flashlight toggle.
- [Questionnaire](https://ui.suiss.app/docs/components/questionnaire.md): A step-by-step form that shows one question at a time, with validation, skipping and keyboard shortcuts.
- [Radio Group](https://ui.suiss.app/docs/components/radio-group.md): A set of radio buttons where only one option can be selected at a time.
- [Resizable](https://ui.suiss.app/docs/components/resizable.md): Panels separated by draggable handles that let users resize sections of a layout.
- [Screen](https://ui.suiss.app/docs/components/screen.md): A full-screen container that pads for safe area insets and sets the status bar style.
- [Scroll Area](https://ui.suiss.app/docs/components/scroll-area.md): A scrollable region with slim, custom-styled scrollbars.
- [Select](https://ui.suiss.app/docs/components/select.md): A button that opens a list of options so people can pick one value.
- [Separator](https://ui.suiss.app/docs/components/separator.md): A thin line that visually divides content, horizontally or vertically.
- [Sheet](https://ui.suiss.app/docs/components/sheet.md): A panel that slides in from an edge of the screen over the page.
- [Sidebar](https://ui.suiss.app/docs/components/sidebar.md): A collapsible app sidebar for navigation, with icon, off-canvas and mobile sheet modes.
- [Signature Pad](https://ui.suiss.app/docs/components/signature-pad.md): A drawing area that captures a handwritten signature as strokes and can export it as an SVG string.
- [Skeleton](https://ui.suiss.app/docs/components/skeleton.md): A pulsing placeholder block that stands in for content while it loads.
- [Slider](https://ui.suiss.app/docs/components/slider.md): A track with one or more draggable thumbs for choosing a value or range.
- [Spinner](https://ui.suiss.app/docs/components/spinner.md): An eight-spoke activity indicator that shows an indeterminate wait.
- [Switch](https://ui.suiss.app/docs/components/switch.md): A toggle control that turns a single setting on or off.
- [Tab Bar](https://ui.suiss.app/docs/components/tab-bar.md): A floating bottom navigation bar whose overflow and extra sections expand from a More button.
- [Table](https://ui.suiss.app/docs/components/table.md): Styled native table elements for displaying rows of structured data.
- [Tabs](https://ui.suiss.app/docs/components/tabs.md): A set of tabs that switches between panels of related content in the same place.
- [Text](https://ui.suiss.app/docs/components/text.md): Styled text with typography variants for headings, body copy, quotes, code and captions.
- [Textarea](https://ui.suiss.app/docs/components/textarea.md): A multi-line text field that grows with its content, with an optional resize handle.
- [Toast](https://ui.suiss.app/docs/components/toast.md): Brief, stacked notifications that appear at the bottom of the screen and dismiss themselves.
- [Toggle](https://ui.suiss.app/docs/components/toggle.md): A two-state button that stays pressed until it's pressed again.
- [Toggle Group](https://ui.suiss.app/docs/components/toggle-group.md): A set of toggle buttons for choosing one or several related options, including segmented controls.
- [Tooltip](https://ui.suiss.app/docs/components/tooltip.md): A small label that appears next to an element on hover or keyboard focus.
- [Wheel Picker](https://ui.suiss.app/docs/components/wheel-picker.md): A scrolling, 3D-curved wheel of options, like the iOS picker, for choosing values such as dates and times.
- [Widget](https://ui.suiss.app/docs/components/widget.md): A rounded card in the style of home screen widgets, with fixed sizes and optional drag-to-resize.

## Patterns

- [Patterns](https://ui.suiss.app/docs/patterns.md): 19 patterns for React, React Native, SwiftUI and Jetpack Compose, each copied into your project with the CLI.
- [Action Bar](https://ui.suiss.app/docs/patterns/action-bar.md): A row of menus that renders as a menubar on desktop and a single More actions sheet on mobile.
- [Action Menu](https://ui.suiss.app/docs/patterns/action-menu.md): A list of actions that opens as a dropdown menu on desktop and an action sheet on mobile.
- [App Shell](https://ui.suiss.app/docs/patterns/app-shell.md): An application frame with a collapsible sidebar on desktop and a floating tab bar on mobile.
- [Command Palette](https://ui.suiss.app/docs/patterns/command-palette.md): A searchable command menu that opens in a dialog on desktop and a drawer on mobile.
- [Confirm](https://ui.suiss.app/docs/patterns/confirm.md): A confirmation prompt that opens as an alert dialog on desktop and an action sheet on mobile.
- [Context Actions](https://ui.suiss.app/docs/patterns/context-actions.md): Actions for an element that open as a context menu on right click, or an action sheet on long press on mobile.
- [Date Picker](https://ui.suiss.app/docs/patterns/date-picker.md): A date field that opens a calendar popover on desktop and wheel pickers in a drawer on mobile.
- [Flyout](https://ui.suiss.app/docs/patterns/flyout.md): A non-modal panel anchored to a trigger on desktop that becomes a bottom drawer on mobile.
- [Modal](https://ui.suiss.app/docs/patterns/modal.md): A modal window that opens as a centered dialog on desktop and a bottom drawer on mobile.
- [Navbar](https://ui.suiss.app/docs/patterns/navbar.md): A site header that renders a navigation menu on wide screens and a fullscreen menu when space runs out.
- [Paged List](https://ui.suiss.app/docs/patterns/paged-list.md): A list that pages through items with numbered pagination on desktop and a Load more button on mobile.
- [Panel](https://ui.suiss.app/docs/patterns/panel.md): A side panel that renders as a Sheet on desktop and a swipeable Drawer on mobile.
- [Picker](https://ui.suiss.app/docs/patterns/picker.md): A single-choice picker that renders a custom Select on desktop and a native select on mobile.
- [Preview](https://ui.suiss.app/docs/patterns/preview.md): A link preview that shows a hover card on desktop and a drawer on mobile.
- [Search Picker](https://ui.suiss.app/docs/patterns/search-picker.md): A searchable single-choice picker that renders a Combobox on desktop and a search drawer on mobile.
- [Segment Picker](https://ui.suiss.app/docs/patterns/segment-picker.md): A segmented control for one exclusive choice that becomes a native select on mobile.
- [Split View](https://ui.suiss.app/docs/patterns/split-view.md): A two- or three-column sidebar, list and detail layout that becomes a push navigation stack on mobile.
- [Table List](https://ui.suiss.app/docs/patterns/table-list.md): Tabular data that renders as a table on desktop and a grouped list on mobile.
- [Trail](https://ui.suiss.app/docs/patterns/trail.md): A navigation trail that shows breadcrumbs on desktop and a back link with history on mobile.

## Interactions

- [Interactions](https://ui.suiss.app/docs/interactions.md): 15 interactions for React, React Native, SwiftUI and Jetpack Compose, each copied into your project with the CLI.
- [Card Stack](https://ui.suiss.app/docs/interactions/card-stack.md): A deck of cards the user swipes left or right one at a time, with buttons, undo and an empty state.
- [Image Viewer](https://ui.suiss.app/docs/interactions/image-viewer.md): A full-screen photo viewer with swipe paging, pinch and double-tap zoom, and swipe down to close.
- [Island](https://ui.suiss.app/docs/interactions/island.md): A floating pill at the top of the screen that shows live activities and brief notifications, like the Dynamic Island.
- [OTP Autofill](https://ui.suiss.app/docs/interactions/otp-autofill.md): A one-time code field that offers an incoming code, fills it digit by digit, and verifies it automatically.
- [Preview Menu](https://ui.suiss.app/docs/interactions/preview-menu.md): A context menu that lifts the pressed item into an enlarged preview above its actions, like iOS context menus.
- [Pull to Refresh](https://ui.suiss.app/docs/interactions/pull-to-refresh.md): A scroll container that refreshes its content when the user pulls down from the top.
- [Reorder List](https://ui.suiss.app/docs/interactions/reorder-list.md): A list whose rows are dragged by a handle to change their order, with haptics and move up and down actions.
- [Search Reveal](https://ui.suiss.app/docs/interactions/search-reveal.md): A scrolling list with a search field tucked above it that appears when the user scrolls up.
- [Section Index](https://ui.suiss.app/docs/interactions/section-index.md): An A to Z index bar for jumping between sections of a long list by tapping, dragging, or typing.
- [Selection List](https://ui.suiss.app/docs/interactions/selection-list.md): A list with an edit mode for selecting multiple rows and acting on them from a floating toolbar.
- [Stepper](https://ui.suiss.app/docs/interactions/stepper.md): A numeric field with minus and plus buttons that step the value, accelerating while held.
- [Swipe Actions](https://ui.suiss.app/docs/interactions/swipe-actions.md): A list row that reveals action buttons when swiped sideways, with optional full swipe to run an action.
- [Tip](https://ui.suiss.app/docs/interactions/tip.md): A dismissible feature tip shown inline or as a popover, remembered once dismissed and sequenced in groups.
- [Top Banner](https://ui.suiss.app/docs/interactions/top-banner.md): Short banners that slide in from the top of the screen, queue one at a time and can be swiped up to dismiss.
- [Undo Bar](https://ui.suiss.app/docs/interactions/undo-bar.md): A floating bar that offers to undo the last action for a few seconds before committing it.

## Charts

- [Charts](https://ui.suiss.app/docs/charts.md): 70 charts for React, React Native, SwiftUI and Jetpack Compose, each copied into your project with the CLI.
- [Area Chart Axes](https://ui.suiss.app/docs/charts/area-chart-axes.md): A gradient area with visible dots and a value axis on the right edge of the plot.
- [Area Chart Default](https://ui.suiss.app/docs/charts/area-chart-default.md): A single filled area with a smooth curve showing one series across six months.
- [Area Chart Gradient](https://ui.suiss.app/docs/charts/area-chart-gradient.md): Two overlapping areas whose fills fade out toward the bottom using SVG linear gradients.
- [Area Chart Interactive](https://ui.suiss.app/docs/charts/area-chart-interactive.md): A stock price chart with time-range toggles, a scrubbing cursor that updates the header, and animated transitions between ranges.
- [Area Chart Linear](https://ui.suiss.app/docs/charts/area-chart-linear.md): A single filled area whose points are joined by straight segments instead of a smoothed curve.
- [Area Chart Range](https://ui.suiss.app/docs/charts/area-chart-range.md): A heart-rate band showing each hour's low-to-high range as a shaded area with an average line through it.
- [Area Chart Sparkline](https://ui.suiss.app/docs/charts/area-chart-sparkline.md): A watchlist with a tiny gradient area chart beside each price, colored by whether the stock is rising or falling.
- [Area Chart Stacked](https://ui.suiss.app/docs/charts/area-chart-stacked.md): Two areas stacked on top of each other so the top edge shows the combined total, with a legend.
- [Area Chart Stacked Expand](https://ui.suiss.app/docs/charts/area-chart-stacked-expand.md): Two stacked areas normalized so every month fills 100%, showing each series' share rather than its value.
- [Area Chart Step](https://ui.suiss.app/docs/charts/area-chart-step.md): A single filled area drawn as steps, holding each value flat until the next reading.
- [Bar Chart Active](https://ui.suiss.app/docs/charts/bar-chart-active.md): A week of step counts where clicking a bar selects it, dims the others and updates the header.
- [Bar Chart Default](https://ui.suiss.app/docs/charts/bar-chart-default.md): A single series of rounded vertical bars, one per month.
- [Bar Chart Horizontal](https://ui.suiss.app/docs/charts/bar-chart-horizontal.md): Horizontal bars with category names on the left and a distinct color for each category.
- [Bar Chart Hourly](https://ui.suiss.app/docs/charts/bar-chart-hourly.md): Twenty-four thin bars of screen time per hour, with a dashed line marking the hourly average.
- [Bar Chart Interactive](https://ui.suiss.app/docs/charts/bar-chart-interactive.md): A screen-time report with stacked category bars, a week and day toggle, selectable days and a most-used apps list.
- [Bar Chart Labeled](https://ui.suiss.app/docs/charts/bar-chart-labeled.md): A single bar series with each value printed above its bar and no grid lines.
- [Bar Chart Multiple](https://ui.suiss.app/docs/charts/bar-chart-multiple.md): Two series drawn as grouped bars side by side for each month.
- [Bar Chart Negative](https://ui.suiss.app/docs/charts/bar-chart-negative.md): Monthly cash flow bars that turn green above zero and red below it, with a zero baseline.
- [Bar Chart Range](https://ui.suiss.app/docs/charts/bar-chart-range.md): A weather forecast where each horizontal pill spans the day's low and high on a shared gradient scale.
- [Bar Chart Stacked](https://ui.suiss.app/docs/charts/bar-chart-stacked.md): Two series stacked into one bar per month, with a legend below the plot.
- [Line Chart Default](https://ui.suiss.app/docs/charts/line-chart-default.md): A single smooth line through six months of values, without point markers.
- [Line Chart Dots](https://ui.suiss.app/docs/charts/line-chart-dots.md): A weight trend with a dot at every monthly reading and a fixed value axis on the right.
- [Line Chart Forecast](https://ui.suiss.app/docs/charts/line-chart-forecast.md): A solid line for actual values that continues as a dashed forecast over a shaded future range.
- [Line Chart Goal](https://ui.suiss.app/docs/charts/line-chart-goal.md): Daily step counts plotted against a labeled dashed goal line at 10,000 steps.
- [Line Chart Goal Dots](https://ui.suiss.app/docs/charts/line-chart-goal-dots.md): Nightly sleep hours with a goal line and dots colored green or orange depending on whether the goal was met.
- [Line Chart Interactive](https://ui.suiss.app/docs/charts/line-chart-interactive.md): Monthly temperatures for several cities, with chips to show or hide each city and an average, high or low switch.
- [Line Chart Labeled](https://ui.suiss.app/docs/charts/line-chart-labeled.md): A single line with a dot and a printed value at every point, and no grid.
- [Line Chart Linear](https://ui.suiss.app/docs/charts/line-chart-linear.md): A single line drawn with straight segments between readings instead of a smoothed curve.
- [Line Chart Multiple](https://ui.suiss.app/docs/charts/line-chart-multiple.md): Two lines compared on the same axes, with a legend identifying each series.
- [Line Chart Step](https://ui.suiss.app/docs/charts/line-chart-step.md): A single line drawn as horizontal steps, holding each value until the next reading.
- [Pie Chart Active](https://ui.suiss.app/docs/charts/pie-chart-active.md): A donut where one slice is enlarged and outlined with an outer arc to highlight it.
- [Pie Chart Default](https://ui.suiss.app/docs/charts/pie-chart-default.md): A full pie split into five device slices, separated by thin card-colored borders.
- [Pie Chart Donut](https://ui.suiss.app/docs/charts/pie-chart-donut.md): A donut chart with a hollow center and small gaps between slices.
- [Pie Chart Donut Text](https://ui.suiss.app/docs/charts/pie-chart-donut-text.md): A donut with the total number of users displayed in the center of the ring.
- [Pie Chart Half](https://ui.suiss.app/docs/charts/pie-chart-half.md): A semicircular gauge-style pie showing battery share by device, with a caption under the arc.
- [Pie Chart Interactive](https://ui.suiss.app/docs/charts/pie-chart-interactive.md): A storage breakdown donut with a device switch, hover-linked list and lifted slices, plus a linear usage bar.
- [Pie Chart Label](https://ui.suiss.app/docs/charts/pie-chart-label.md): A pie with each category name drawn outside its slice and joined by a leader line.
- [Pie Chart Legend](https://ui.suiss.app/docs/charts/pie-chart-legend.md): A donut with a legend beneath it that lists every category and its color.
- [Pie Chart Nested](https://ui.suiss.app/docs/charts/pie-chart-nested.md): Two concentric pies: an inner ring of grouped totals surrounded by an outer ring of individual categories.
- [Pie Chart Separated](https://ui.suiss.app/docs/charts/pie-chart-separated.md): A donut whose slices are pulled apart with wide gaps and rounded corners.
- [Radar Chart Default](https://ui.suiss.app/docs/charts/radar-chart-default.md): A single filled radar shape showing this month's scores across six training skills.
- [Radar Chart Dots](https://ui.suiss.app/docs/charts/radar-chart-dots.md): A single radar shape with a solid dot marking the value on every axis.
- [Radar Chart Grid Circle](https://ui.suiss.app/docs/charts/radar-chart-grid-circle.md): A single radar shape drawn over circular rings instead of polygonal grid lines.
- [Radar Chart Grid Filled](https://ui.suiss.app/docs/charts/radar-chart-grid-filled.md): A borderless radar shape over shaded circular rings separated by card-colored lines.
- [Radar Chart Grid None](https://ui.suiss.app/docs/charts/radar-chart-grid-none.md): A single solid radar shape with no grid and no outline, leaving only the shape and axis labels.
- [Radar Chart Interactive](https://ui.suiss.app/docs/charts/radar-chart-interactive.md): A phone model comparison where toggle chips show up to three models, which grow in and out of the radar.
- [Radar Chart Legend](https://ui.suiss.app/docs/charts/radar-chart-legend.md): Two overlapping radar shapes with a legend beneath that names each series.
- [Radar Chart Lines Only](https://ui.suiss.app/docs/charts/radar-chart-lines-only.md): Two radar outlines with no fill, comparing this month and last month by stroke alone.
- [Radar Chart Multiple](https://ui.suiss.app/docs/charts/radar-chart-multiple.md): Two overlapping radar shapes comparing this month with last month.
- [Radar Chart Radius Axis](https://ui.suiss.app/docs/charts/radar-chart-radius-axis.md): A single radar shape with a visible 0 to 100 value scale along the vertical axis.
- [Radial Chart Batteries](https://ui.suiss.app/docs/charts/radial-chart-batteries.md): A row of small battery rings, one per device, that turn red when charge is at or below 20%.
- [Radial Chart Default](https://ui.suiss.app/docs/charts/radial-chart-default.md): Concentric radial bars, one per device, each running around a gray background track.
- [Radial Chart Gauge](https://ui.suiss.app/docs/charts/radial-chart-gauge.md): A 240-degree gauge arc showing an air quality reading with its value and rating below the center.
- [Radial Chart Interactive](https://ui.suiss.app/docs/charts/radial-chart-interactive.md): A weekly activity view where picking a day animates three large rings and updates each ring's totals.
- [Radial Chart Label](https://ui.suiss.app/docs/charts/radial-chart-label.md): Concentric radial bars with each category's name printed at the start of its bar.
- [Radial Chart Progress](https://ui.suiss.app/docs/charts/radial-chart-progress.md): A three-quarter arc tracking progress toward a goal, with the count shown in the center.
- [Radial Chart Rings](https://ui.suiss.app/docs/charts/radial-chart-rings.md): Three nested activity rings for move, exercise and stand, drawn as plain SVG circles.
- [Radial Chart Stacked](https://ui.suiss.app/docs/charts/radial-chart-stacked.md): A half-circle arc with two series stacked end to end and the combined total beneath it.
- [Radial Chart Text](https://ui.suiss.app/docs/charts/radial-chart-text.md): A single full-circle progress ring with a percentage and caption centered inside.
- [Radial Chart Tinted](https://ui.suiss.app/docs/charts/radial-chart-tinted.md): Concentric radial bars whose unfilled track is a soft tint of each bar's own color.
- [Tooltip Chart Custom](https://ui.suiss.app/docs/charts/tooltip-chart-custom.md): A bar chart whose tooltip is fully custom markup, showing a large total, a unit and the day.
- [Tooltip Chart Dashed](https://ui.suiss.app/docs/charts/tooltip-chart-dashed.md): A stacked bar chart whose tooltip marks each series with a dashed outline indicator.
- [Tooltip Chart Dot](https://ui.suiss.app/docs/charts/tooltip-chart-dot.md): A stacked bar chart showing the default tooltip indicator, a small colored square for each series.
- [Tooltip Chart Formatter](https://ui.suiss.app/docs/charts/tooltip-chart-formatter.md): A bar chart of daily active energy whose tooltip shows a name, value and kcal unit through a custom formatter.
- [Tooltip Chart Icons](https://ui.suiss.app/docs/charts/tooltip-chart-icons.md): A stacked bar chart whose tooltip shows an icon for each series in place of a color swatch.
- [Tooltip Chart Interactive](https://ui.suiss.app/docs/charts/tooltip-chart-interactive.md): A tooltip playground on quarterly revenue bars, with controls for indicator, trigger, title total and hidden parts.
- [Tooltip Chart Label Formatter](https://ui.suiss.app/docs/charts/tooltip-chart-label-formatter.md): A gradient area chart whose tooltip heading shows a longer date than the axis ticks.
- [Tooltip Chart Line](https://ui.suiss.app/docs/charts/tooltip-chart-line.md): A stacked bar chart whose tooltip marks each series with a thin vertical color bar.
- [Tooltip Chart No Indicator](https://ui.suiss.app/docs/charts/tooltip-chart-no-indicator.md): A stacked bar chart whose tooltip lists series names and values without color indicators.
- [Tooltip Chart No Label](https://ui.suiss.app/docs/charts/tooltip-chart-no-label.md): A stacked bar chart whose tooltip omits the category heading and shows only the series rows.

## Blocks

- [Blocks](https://ui.suiss.app/docs/blocks.md): 56 blocks for React, React Native, SwiftUI and Jetpack Compose, each copied into your project with the CLI.
- [Bag Checkout](https://ui.suiss.app/docs/blocks/bag-checkout.md): A three-step checkout with delivery, payment, and review steps beside an order summary.
- [Bag Configure](https://ui.suiss.app/docs/blocks/bag-configure.md): A product configurator for choosing a model, finish, and storage, with a live price and Add to Bag button.
- [Bag Review](https://ui.suiss.app/docs/blocks/bag-review.md): A shopping bag review page with quantity steppers, removable line items, and a totals summary.
- [Bento Closer Look](https://ui.suiss.app/docs/blocks/bento-closer-look.md): A feature spotlight that pairs an auto-advancing accordion of features with a matching cross-fading image.
- [Bento Features](https://ui.suiss.app/docs/blocks/bento-features.md): A bento grid of product feature tiles mixing photography, gradient figures, and short claims.
- [Bento Stats](https://ui.suiss.app/docs/blocks/bento-stats.md): A dark bento grid of headline product stats, with a photo tile and an animated charging bar.
- [Chat Conversations](https://ui.suiss.app/docs/blocks/chat-conversations.md): A messaging app layout with a conversation list beside the selected thread and a message composer.
- [Chat Support](https://ui.suiss.app/docs/blocks/chat-support.md): A support landing section with a floating chat panel, quick-reply suggestions, and a launcher button.
- [Chat Thread](https://ui.suiss.app/docs/blocks/chat-thread.md): A single message thread inside a phone frame, with heart reactions and simulated replies.
- [Dash Analytics](https://ui.suiss.app/docs/blocks/dash-analytics.md): An app analytics dashboard with a metric switcher, an interactive area chart, and a regional breakdown.
- [Dash Health](https://ui.suiss.app/docs/blocks/dash-health.md): A health summary dashboard with pinned metric cards, sparklines, and category views in a sidebar.
- [Dash Store](https://ui.suiss.app/docs/blocks/dash-store.md): A store admin overview with sales stats, an online versus in-store bar chart, and a filterable orders list.
- [Empty Bag](https://ui.suiss.app/docs/blocks/empty-bag.md): An empty shopping bag state with sign-in and shopping actions above a row of recommended products.
- [Empty Offline](https://ui.suiss.app/docs/blocks/empty-offline.md): An offline empty state with a retry action that reconnects and reveals a grid of albums.
- [Empty Search](https://ui.suiss.app/docs/blocks/empty-search.md): A search page showing live suggestions, a no-results state, and suggested queries.
- [Footer Compact](https://ui.suiss.app/docs/blocks/footer-compact.md): A narrow site footer with a breadcrumb, a collapsible link directory, and legal lines.
- [Footer Directory](https://ui.suiss.app/docs/blocks/footer-directory.md): A full site footer with footnotes, a breadcrumb, a five-column link directory, and legal links.
- [Footer Services](https://ui.suiss.app/docs/blocks/footer-services.md): A footer with a band of service highlights, a newsletter signup, a link directory, and legal links.
- [Grid Accessories](https://ui.suiss.app/docs/blocks/grid-accessories.md): A filterable accessories grid with category chips and add-to-bag buttons that update a bag counter.
- [Grid Carousel](https://ui.suiss.app/docs/blocks/grid-carousel.md): A horizontally scrolling carousel of product cards with previous and next controls.
- [Grid Lineup](https://ui.suiss.app/docs/blocks/grid-lineup.md): A product lineup comparing models side by side, each with finish swatches, a price, and buy actions.
- [Hero Cinematic](https://ui.suiss.app/docs/blocks/hero-cinematic.md): A dark, centered product hero whose image, gradient title, and glow change with the selected finish.
- [Hero Product](https://ui.suiss.app/docs/blocks/hero-product.md): A centered product launch hero with an eyebrow, headline, two actions, a wide image, and a pricing line.
- [Hero Tiles](https://ui.suiss.app/docs/blocks/hero-tiles.md): A pair of promotional hero tiles, each with a title, tagline, two actions, and a product image.
- [Inbox Categories](https://ui.suiss.app/docs/blocks/inbox-categories.md): A mail inbox sorted into Primary, Transactions, Updates, and Promotions, with a message reader and inline reply.
- [Inbox Mail](https://ui.suiss.app/docs/blocks/inbox-mail.md): A three-column mail client with mailboxes, a searchable message list, and a message reader with reply.
- [Inbox Support](https://ui.suiss.app/docs/blocks/inbox-support.md): A support ticket inbox with status views, a ticket list with priorities, and a detail pane for replying and resolving.
- [Log Activity](https://ui.suiss.app/docs/blocks/log-activity.md): An admin activity log grouped by day, with a type filter and expandable before-and-after details.
- [Log Live](https://ui.suiss.app/docs/blocks/log-live.md): A live admin activity feed that streams new events, with session stats and a pause control.
- [Log Security](https://ui.suiss.app/docs/blocks/log-security.md): A security overview with a computed score ring, alert counts by severity, and resolvable alerts.
- [Login Account](https://ui.suiss.app/docs/blocks/login-account.md): A two-step account sign-in form that asks for an email, then reveals a password field.
- [Login Passkey](https://ui.suiss.app/docs/blocks/login-passkey.md): A passwordless sign-in screen that runs a simulated face scan in a dialog, then welcomes the user.
- [Login Sheet](https://ui.suiss.app/docs/blocks/login-sheet.md): A mobile app welcome screen with a Sign in with suiss bottom sheet for sharing or hiding an email.
- [Nav Categories](https://ui.suiss.app/docs/blocks/nav-categories.md): A store landing header with a draggable carousel of category tiles and a heading that follows the selection.
- [Nav Global](https://ui.suiss.app/docs/blocks/nav-global.md): A sticky global navigation bar with mega-menu panels, search and bag actions, above a sample product hero.
- [Nav Local](https://ui.suiss.app/docs/blocks/nav-local.md): A sticky product sub-navigation that highlights the section in view, shown on a dark product page.
- [Onboarding](https://ui.suiss.app/docs/blocks/onboarding.md): A paged onboarding flow with illustrations, a page indicator and Continue and Skip buttons.
- [Permission Primer](https://ui.suiss.app/docs/blocks/permission-primer.md): A screen that explains why the app needs a permission before asking, with Allow and Not now buttons.
- [Price Bundle](https://ui.suiss.app/docs/blocks/price-bundle.md): A dark subscription bundle picker comparing three plans and the services each one includes.
- [Price Care](https://ui.suiss.app/docs/blocks/price-care.md): A device protection plan picker with device chips, payment options, an optional theft add-on, and a live total.
- [Price Storage](https://ui.suiss.app/docs/blocks/price-storage.md): A cloud storage plan picker with a monthly or yearly toggle, four plan cards, and a switch action.
- [Roles Editor](https://ui.suiss.app/docs/blocks/roles-editor.md): A role editor that lists roles beside grouped permission switches, with save and revert for unsaved changes.
- [Roles Matrix](https://ui.suiss.app/docs/blocks/roles-matrix.md): A permissions matrix with a checkbox for every permission and role, grouped by area, with a save action.
- [Roles Requests](https://ui.suiss.app/docs/blocks/roles-requests.md): An access request queue where admins approve or deny permission requests, with an approval length setting.
- [Settings Account](https://ui.suiss.app/docs/blocks/settings-account.md): An account settings page with a profile sidebar and a Sign-In and Security section of editable cards.
- [Settings Device](https://ui.suiss.app/docs/blocks/settings-device.md): A phone-style Settings screen with a search field, an account row, and grouped rows with switches.
- [Settings Notifications](https://ui.suiss.app/docs/blocks/settings-notifications.md): Per-app notification settings with a live lock screen preview that reflects each choice.
- [Signup Form](https://ui.suiss.app/docs/blocks/signup-form.md): A full account creation form with name, country, birthday, email, and password fields and live password rules.
- [Signup Steps](https://ui.suiss.app/docs/blocks/signup-steps.md): A one-question-at-a-time signup flow for name, email, and password, with a progress indicator.
- [Signup Trial](https://ui.suiss.app/docs/blocks/signup-trial.md): A free trial signup split between a promotional image panel and a short form with a password strength meter.
- [Users Detail](https://ui.suiss.app/docs/blocks/users-detail.md): A user directory with a member list beside a detail pane for profile, sessions, and security settings.
- [Users Invite](https://ui.suiss.app/docs/blocks/users-invite.md): An invite form that collects several email addresses as chips, assigns a role, and lists pending invitations.
- [Users Table](https://ui.suiss.app/docs/blocks/users-table.md): A searchable users table with role filters, row selection, and bulk role and status actions.
- [Verify Code](https://ui.suiss.app/docs/blocks/verify-code.md): A two-factor authentication screen with a six-digit code entry, error feedback, and a resend countdown.
- [Verify Device](https://ui.suiss.app/docs/blocks/verify-device.md): A trusted-device sign-in flow that pairs instructions with a simulated approval alert and code entry.
- [Verify Email](https://ui.suiss.app/docs/blocks/verify-email.md): A check-your-inbox screen after signup, with open mail and resend actions and a cooldown timer.

## Optional

- [GitHub repository](https://github.com/e-suiss/ui)
- [npm package](https://www.npmjs.com/package/@esuiss/ui)