---
name: "@esuiss"
slug: "esuiss"
description: "Copy-paste components, patterns, interactions, charts and blocks for React with Next.js and Vite, React Native with Expo, SwiftUI and Jetpack Compose."
category: "Charts/data viz"
tags: ["auth", "backgrounds", "blocks", "buttons", "cards", "charts", "dashboard", "forms", "loaders", "media", "mobile", "navigation", "overlays", "tables", "theming"]
framework: "react"
license: "MIT"
author: "e-suiss"
website: "https://suiss.app/ui"
github: "https://github.com/e-suiss/ui"
registry: "https://suiss.app/ui/r/registry/registry.json"
pro: false
pro_url: null
github_stars: 1
component_count: 232
generated_at: "2026-10-20T06:35:22.791Z"
---

# @esuiss

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

## Links

- Website: https://suiss.app/ui
- GitHub: https://github.com/e-suiss/ui
- Registry JSON: https://suiss.app/ui/r/registry/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/esuiss
- This file: https://sh4dcn.vercel.app/md/esuiss.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://suiss.app/ui/r/registry/registry.json
pnpm dlx shadcn@latest add https://suiss.app/ui/r/registry/registry.json
bunx shadcn@latest add https://suiss.app/ui/r/registry/registry.json
# clone the source repo
git clone https://github.com/e-suiss/ui.git
# fetch the raw registry index
curl -s https://suiss.app/ui/r/registry/registry.json
```

## Components (232)

| name | type | description | install |
| --- | --- | --- | --- |
| accordion | registry:ui | A vertically stacked set of headings that each reveal a section of content. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/accordion.json` |
| alert-dialog | registry:ui | A modal dialog that interrupts the user to confirm an important action or acknowledge information. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/alert-dialog.json` |
| alert-sheet | registry:ui | An action sheet that slides up from the bottom of the screen to confirm or choose an action. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/alert-sheet.json` |
| alert | registry:ui | A static callout that draws attention to an important message without interrupting the user. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/alert.json` |
| aspect-ratio | registry:ui | A container that keeps its content at a fixed width-to-height ratio. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/aspect-ratio.json` |
| attachment | registry:ui | A compact file card that shows a document or image with its name, details, upload state and actions. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/attachment.json` |
| avatar | registry:ui | A circular image that represents a person, with initials or an icon when no image is available. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/avatar.json` |
| badge | registry:ui | A small inline label for status, counts or metadata. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/badge.json` |
| breadcrumb | registry:ui | A trail of links that shows where the current page sits in the site hierarchy. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/breadcrumb.json` |
| bubble | registry:ui | A chat-style message bubble with variants, alignment, a tail and optional reactions. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/bubble.json` |
| button-group | registry:ui | A container that joins related buttons, inputs and menus into a single connected control. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/button-group.json` |
| button | registry:ui | A pill-shaped button that triggers an action, with variants for every level of emphasis. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/button.json` |
| calendar | registry:ui | A month-grid date picker for selecting a single date, several dates or a date range. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/calendar.json` |
| card | registry:ui | A raised container that groups related content and actions about a single subject. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/card.json` |
| carousel | registry:ui | A swipeable track of slides with buttons, dots and optional autoplay, built on Embla Carousel. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/carousel.json` |
| chart | registry:ui | Themed building blocks for Recharts charts, with a shared color config, tooltip and legend. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/chart.json` |
| checkbox | registry:ui | A control that lets people turn a single option on or off. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/checkbox.json` |
| code-block | registry:ui | A surface for code, terminal output and diffs, with copy, line numbers, line states and streaming syntax highlighting. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/code-block.json` |
| collapsible | registry:ui | A section that people can expand and collapse to show or hide its content. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/collapsible.json` |
| combobox | registry:ui | A text input with a filterable list of options, for choosing one or more values by typing. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/combobox.json` |
| command | registry:ui | A searchable menu of commands, used inline or as a command palette in a dialog. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/command.json` |
| context-menu | registry:ui | A menu of actions that opens at the pointer when people right-click an area. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/context-menu.json` |
| dialog | registry:ui | A modal window that appears above the page to focus people on a task or message. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/dialog.json` |
| direction | registry:ui | A provider that sets the reading direction, left-to-right or right-to-left, for the components inside it. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/direction.json` |
| drawer | registry:ui | A panel that slides in from an edge of the screen and can be dismissed with a swipe. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/drawer.json` |
| dropdown-menu | registry:ui | A menu of actions or options that opens from a button. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/dropdown-menu.json` |
| empty | registry:ui | A placeholder that explains why a view has no content and what people can do next. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/empty.json` |
| field | registry:ui | Building blocks for form fields that pair controls with labels, descriptions and error messages. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/field.json` |
| fullscreen-menu | registry:ui | A navigation menu that covers the whole screen, for site links on small viewports. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/fullscreen-menu.json` |
| hover-card | registry:ui | A card that previews content behind a link when people hover over or focus it. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/hover-card.json` |
| input-group | registry:ui | A text field with icons, text, buttons or keyboard hints attached inside its border. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/input-group.json` |
| input-otp | registry:ui | A segmented field for entering one-time passcodes, one character per slot. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/input-otp.json` |
| input | registry:ui | A single-line text field for entering and editing short values. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/input.json` |
| item | registry:ui | A flexible row that pairs media, a title, a description and actions, for lists and settings. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/item.json` |
| kbd | registry:ui | Displays a keyboard key or shortcut, with a platform-aware modifier symbol. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/kbd.json` |
| label | registry:ui | An accessible text label that names a form control. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/label.json` |
| marker | registry:ui | An inline annotation for timelines and conversations, such as a date divider or system event. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/marker.json` |
| menubar | registry:ui | A horizontal bar of menus, like a desktop application's menu bar. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/menubar.json` |
| message-scroller | registry:ui | A scroll container for chat transcripts that opens at the latest message and keeps scroll position stable. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/message-scroller.json` |
| message | registry:ui | Lays out a single chat message with an optional avatar, header and footer. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/message.json` |
| native-select | registry:ui | A styled native select element for choosing one option from a list. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/native-select.json` |
| navigation-menu | registry:ui | A site navigation bar whose items open popover or full-width panels of links. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/navigation-menu.json` |
| pagination | registry:ui | Navigation links for moving between pages of content, such as table results. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/pagination.json` |
| popover | registry:ui | A floating panel anchored to a trigger, for supplementary content and lightweight controls. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/popover.json` |
| progress | registry:ui | A horizontal bar that shows the completion of a task. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/progress.json` |
| questionnaire | registry:ui | A step-by-step form that shows one question at a time, with validation, skipping and keyboard shortcuts. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/questionnaire.json` |
| radio-group | registry:ui | A set of radio buttons where only one option can be selected at a time. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/radio-group.json` |
| resizable | registry:ui | Panels separated by draggable handles that let users resize sections of a layout. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/resizable.json` |
| scroll-area | registry:ui | A scrollable region with slim, custom-styled scrollbars. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/scroll-area.json` |
| select | registry:ui | A button that opens a list of options so people can pick one value. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/select.json` |
| separator | registry:ui | A thin line that visually divides content, horizontally or vertically. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/separator.json` |
| sheet | registry:ui | A panel that slides in from an edge of the screen over the page. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/sheet.json` |
| sidebar | registry:ui | A collapsible app sidebar for navigation, with icon, off-canvas and mobile sheet modes. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/sidebar.json` |
| skeleton | registry:ui | A pulsing placeholder block that stands in for content while it loads. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/skeleton.json` |
| slider | registry:ui | A track with one or more draggable thumbs for choosing a value or range. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/slider.json` |
| spinner | registry:ui | An eight-spoke activity indicator that shows an indeterminate wait. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/spinner.json` |
| switch | registry:ui | A toggle control that turns a single setting on or off. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/switch.json` |
| tab-bar | registry:ui | A floating bottom navigation bar whose overflow and extra sections expand from a More button. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/tab-bar.json` |
| table | registry:ui | Styled native table elements for displaying rows of structured data. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/table.json` |
| tabs | registry:ui | A set of tabs that switches between panels of related content in the same place. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/tabs.json` |
| textarea | registry:ui | A multi-line text field that grows with its content, with an optional resize handle. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/textarea.json` |
| theme | registry:ui | A theme provider with a light, dark and system toggle and an animated switch between them. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/theme.json` |
| toast | registry:ui | Brief, stacked notifications that appear at the bottom of the screen and dismiss themselves. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/toast.json` |
| toggle-group | registry:ui | A set of toggle buttons for choosing one or several related options, including segmented controls. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/toggle-group.json` |
| toggle | registry:ui | A two-state button that stays pressed until it's pressed again. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/toggle.json` |
| tooltip | registry:ui | A small label that appears next to an element on hover or keyboard focus. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/tooltip.json` |
| trace | registry:ui | Rows for the steps an agent takes: reasoning, tool calls, sources, plans and file edits. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/trace.json` |
| wheel-picker | registry:ui | A scrolling, 3D-curved wheel of options, like the iOS picker, for choosing values such as dates and times. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/wheel-picker.json` |
| widget | registry:ui | A rounded card in the style of home screen widgets, with fixed sizes and optional drag-to-resize. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/widget.json` |
| action-bar | registry:component | A row of menus that renders as a menubar on desktop and a single More actions sheet on mobile. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/action-bar.json` |
| action-menu | registry:component | A list of actions that opens as a dropdown menu on desktop and an action sheet on mobile. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/action-menu.json` |
| app-shell | registry:component | An application frame with a collapsible sidebar on desktop and a floating tab bar on mobile. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/app-shell.json` |
| command-palette | registry:component | A searchable command menu that opens in a dialog on desktop and a drawer on mobile. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/command-palette.json` |
| confirm | registry:component | A confirmation prompt that opens as an alert dialog on desktop and an action sheet on mobile. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/confirm.json` |
| context-actions | registry:component | Actions for an element that open as a context menu on right click, or an action sheet on long press on mobile. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/context-actions.json` |
| date-picker | registry:component | A date field that opens a calendar popover on desktop and wheel pickers in a drawer on mobile. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/date-picker.json` |
| flyout | registry:component | A non-modal panel anchored to a trigger on desktop that becomes a bottom drawer on mobile. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/flyout.json` |
| modal | registry:component | A modal window that opens as a centered dialog on desktop and a bottom drawer on mobile. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/modal.json` |
| navbar | registry:component | A site header that renders a navigation menu on wide screens and a fullscreen menu when space runs out. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/navbar.json` |
| paged-list | registry:component | A list that pages through items with numbered pagination on desktop and a Load more button on mobile. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/paged-list.json` |
| panel | registry:component | A side panel that renders as a Sheet on desktop and a swipeable Drawer on mobile. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/panel.json` |
| picker | registry:component | A single-choice picker that renders a custom Select on desktop and a native select on mobile. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/picker.json` |
| preview | registry:component | A link preview that shows a hover card on desktop and a drawer on mobile. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/preview.json` |
| search-picker | registry:component | A searchable single-choice picker that renders a Combobox on desktop and a search drawer on mobile. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/search-picker.json` |
| segment-picker | registry:component | A segmented control for one exclusive choice that becomes a native select on mobile. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/segment-picker.json` |
| split-view | registry:component | A two- or three-column sidebar, list and detail layout that becomes a push navigation stack on mobile. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/split-view.json` |
| table-list | registry:component | Tabular data that renders as a table on desktop and a grouped list on mobile. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/table-list.json` |
| trail | registry:component | A navigation trail that shows breadcrumbs on desktop and a back link with history on mobile. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/trail.json` |
| island | registry:component | A floating pill at the top of the screen that shows live activities and brief notifications, like the Dynamic Island. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/island.json` |
| otp-autofill | registry:component | A one-time code field that offers an incoming code, fills it digit by digit, and verifies it automatically. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/otp-autofill.json` |
| preview-menu | registry:component | A context menu that lifts the pressed item into an enlarged preview above its actions, like iOS context menus. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/preview-menu.json` |
| pull-to-refresh | registry:component | A scroll container that refreshes its content when the user pulls down from the top. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/pull-to-refresh.json` |
| search-reveal | registry:component | A scrolling list with a search field tucked above it that appears when the user scrolls up. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/search-reveal.json` |
| section-index | registry:component | An A to Z index bar for jumping between sections of a long list by tapping, dragging, or typing. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/section-index.json` |
| selection-list | registry:component | A list with an edit mode for selecting multiple rows and acting on them from a floating toolbar. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/selection-list.json` |
| stepper | registry:component | A numeric field with minus and plus buttons that step the value, accelerating while held. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/stepper.json` |
| swipe-actions | registry:component | A list row that reveals action buttons when swiped sideways, with optional full swipe to run an action. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/swipe-actions.json` |
| tip | registry:component | A dismissible feature tip shown inline or as a popover, remembered once dismissed and sequenced in groups. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/tip.json` |
| undo-bar | registry:component | A floating bar that offers to undo the last action for a few seconds before committing it. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/undo-bar.json` |
| area-chart-axes | registry:block | A gradient area with visible dots and a value axis on the right edge of the plot. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/area-chart-axes.json` |
| area-chart-default | registry:block | A single filled area with a smooth curve showing one series across six months. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/area-chart-default.json` |
| area-chart-gradient | registry:block | Two overlapping areas whose fills fade out toward the bottom using SVG linear gradients. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/area-chart-gradient.json` |
| area-chart-interactive | registry:block | A stock price chart with time-range toggles, a scrubbing cursor that updates the header, and animated transitions between ranges. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/area-chart-interactive.json` |
| area-chart-linear | registry:block | A single filled area whose points are joined by straight segments instead of a smoothed curve. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/area-chart-linear.json` |
| area-chart-range | registry:block | A heart-rate band showing each hour's low-to-high range as a shaded area with an average line through it. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/area-chart-range.json` |
| area-chart-sparkline | registry:block | A watchlist with a tiny gradient area chart beside each price, colored by whether the stock is rising or falling. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/area-chart-sparkline.json` |
| area-chart-stacked-expand | registry:block | Two stacked areas normalized so every month fills 100%, showing each series' share rather than its value. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/area-chart-stacked-expand.json` |
| area-chart-stacked | registry:block | Two areas stacked on top of each other so the top edge shows the combined total, with a legend. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/area-chart-stacked.json` |
| area-chart-step | registry:block | A single filled area drawn as steps, holding each value flat until the next reading. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/area-chart-step.json` |
| bar-chart-active | registry:block | A week of step counts where clicking a bar selects it, dims the others and updates the header. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/bar-chart-active.json` |
| bar-chart-default | registry:block | A single series of rounded vertical bars, one per month. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/bar-chart-default.json` |
| bar-chart-horizontal | registry:block | Horizontal bars with category names on the left and a distinct color for each category. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/bar-chart-horizontal.json` |
| bar-chart-hourly | registry:block | Twenty-four thin bars of screen time per hour, with a dashed line marking the hourly average. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/bar-chart-hourly.json` |
| bar-chart-interactive | registry:block | A screen-time report with stacked category bars, a week and day toggle, selectable days and a most-used apps list. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/bar-chart-interactive.json` |
| bar-chart-labeled | registry:block | A single bar series with each value printed above its bar and no grid lines. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/bar-chart-labeled.json` |
| bar-chart-multiple | registry:block | Two series drawn as grouped bars side by side for each month. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/bar-chart-multiple.json` |
| bar-chart-negative | registry:block | Monthly cash flow bars that turn green above zero and red below it, with a zero baseline. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/bar-chart-negative.json` |
| bar-chart-range | registry:block | A weather forecast where each horizontal pill spans the day's low and high on a shared gradient scale. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/bar-chart-range.json` |
| bar-chart-stacked | registry:block | Two series stacked into one bar per month, with a legend below the plot. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/bar-chart-stacked.json` |
| line-chart-default | registry:block | A single smooth line through six months of values, without point markers. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/line-chart-default.json` |
| line-chart-dots | registry:block | A weight trend with a dot at every monthly reading and a fixed value axis on the right. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/line-chart-dots.json` |
| line-chart-forecast | registry:block | A solid line for actual values that continues as a dashed forecast over a shaded future range. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/line-chart-forecast.json` |
| line-chart-goal-dots | registry:block | Nightly sleep hours with a goal line and dots colored green or orange depending on whether the goal was met. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/line-chart-goal-dots.json` |
| line-chart-goal | registry:block | Daily step counts plotted against a labeled dashed goal line at 10,000 steps. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/line-chart-goal.json` |
| line-chart-interactive | registry:block | Monthly temperatures for several cities, with chips to show or hide each city and an average, high or low switch. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/line-chart-interactive.json` |
| line-chart-labeled | registry:block | A single line with a dot and a printed value at every point, and no grid. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/line-chart-labeled.json` |
| line-chart-linear | registry:block | A single line drawn with straight segments between readings instead of a smoothed curve. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/line-chart-linear.json` |
| line-chart-multiple | registry:block | Two lines compared on the same axes, with a legend identifying each series. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/line-chart-multiple.json` |
| line-chart-step | registry:block | A single line drawn as horizontal steps, holding each value until the next reading. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/line-chart-step.json` |
| pie-chart-active | registry:block | A donut where one slice is enlarged and outlined with an outer arc to highlight it. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/pie-chart-active.json` |
| pie-chart-default | registry:block | A full pie split into five device slices, separated by thin card-colored borders. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/pie-chart-default.json` |
| pie-chart-donut-text | registry:block | A donut with the total number of users displayed in the center of the ring. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/pie-chart-donut-text.json` |
| pie-chart-donut | registry:block | A donut chart with a hollow center and small gaps between slices. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/pie-chart-donut.json` |
| pie-chart-half | registry:block | A semicircular gauge-style pie showing battery share by device, with a caption under the arc. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/pie-chart-half.json` |
| pie-chart-interactive | registry:block | A storage breakdown donut with a device switch, hover-linked list and lifted slices, plus a linear usage bar. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/pie-chart-interactive.json` |
| pie-chart-label | registry:block | A pie with each category name drawn outside its slice and joined by a leader line. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/pie-chart-label.json` |
| pie-chart-legend | registry:block | A donut with a legend beneath it that lists every category and its color. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/pie-chart-legend.json` |
| pie-chart-nested | registry:block | Two concentric pies: an inner ring of grouped totals surrounded by an outer ring of individual categories. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/pie-chart-nested.json` |
| pie-chart-separated | registry:block | A donut whose slices are pulled apart with wide gaps and rounded corners. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/pie-chart-separated.json` |
| radar-chart-default | registry:block | A single filled radar shape showing this month's scores across six training skills. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/radar-chart-default.json` |
| radar-chart-dots | registry:block | A single radar shape with a solid dot marking the value on every axis. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/radar-chart-dots.json` |
| radar-chart-grid-circle | registry:block | A single radar shape drawn over circular rings instead of polygonal grid lines. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/radar-chart-grid-circle.json` |
| radar-chart-grid-filled | registry:block | A borderless radar shape over shaded circular rings separated by card-colored lines. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/radar-chart-grid-filled.json` |
| radar-chart-grid-none | registry:block | A single solid radar shape with no grid and no outline, leaving only the shape and axis labels. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/radar-chart-grid-none.json` |
| radar-chart-interactive | registry:block | A phone model comparison where toggle chips show up to three models, which grow in and out of the radar. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/radar-chart-interactive.json` |
| radar-chart-legend | registry:block | Two overlapping radar shapes with a legend beneath that names each series. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/radar-chart-legend.json` |
| radar-chart-lines-only | registry:block | Two radar outlines with no fill, comparing this month and last month by stroke alone. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/radar-chart-lines-only.json` |
| radar-chart-multiple | registry:block | Two overlapping radar shapes comparing this month with last month. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/radar-chart-multiple.json` |
| radar-chart-radius-axis | registry:block | A single radar shape with a visible 0 to 100 value scale along the vertical axis. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/radar-chart-radius-axis.json` |
| radial-chart-batteries | registry:block | A row of small battery rings, one per device, that turn red when charge is at or below 20%. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/radial-chart-batteries.json` |
| radial-chart-default | registry:block | Concentric radial bars, one per device, each running around a gray background track. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/radial-chart-default.json` |
| radial-chart-gauge | registry:block | A 240-degree gauge arc showing an air quality reading with its value and rating below the center. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/radial-chart-gauge.json` |
| radial-chart-interactive | registry:block | A weekly activity view where picking a day animates three large rings and updates each ring's totals. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/radial-chart-interactive.json` |
| radial-chart-label | registry:block | Concentric radial bars with each category's name printed at the start of its bar. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/radial-chart-label.json` |
| radial-chart-progress | registry:block | A three-quarter arc tracking progress toward a goal, with the count shown in the center. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/radial-chart-progress.json` |
| radial-chart-rings | registry:block | Three nested activity rings for move, exercise and stand, drawn as plain SVG circles. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/radial-chart-rings.json` |
| radial-chart-stacked | registry:block | A half-circle arc with two series stacked end to end and the combined total beneath it. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/radial-chart-stacked.json` |
| radial-chart-text | registry:block | A single full-circle progress ring with a percentage and caption centered inside. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/radial-chart-text.json` |
| radial-chart-tinted | registry:block | Concentric radial bars whose unfilled track is a soft tint of each bar's own color. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/radial-chart-tinted.json` |
| tooltip-chart-custom | registry:block | A bar chart whose tooltip is fully custom markup, showing a large total, a unit and the day. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/tooltip-chart-custom.json` |
| tooltip-chart-dashed | registry:block | A stacked bar chart whose tooltip marks each series with a dashed outline indicator. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/tooltip-chart-dashed.json` |
| tooltip-chart-dot | registry:block | A stacked bar chart showing the default tooltip indicator, a small colored square for each series. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/tooltip-chart-dot.json` |
| tooltip-chart-formatter | registry:block | A bar chart of daily active energy whose tooltip shows a name, value and kcal unit through a custom formatter. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/tooltip-chart-formatter.json` |
| tooltip-chart-icons | registry:block | A stacked bar chart whose tooltip shows an icon for each series in place of a color swatch. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/tooltip-chart-icons.json` |
| tooltip-chart-interactive | registry:block | A tooltip playground on quarterly revenue bars, with controls for indicator, trigger, title total and hidden parts. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/tooltip-chart-interactive.json` |
| tooltip-chart-label-formatter | registry:block | A gradient area chart whose tooltip heading shows a longer date than the axis ticks. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/tooltip-chart-label-formatter.json` |
| tooltip-chart-line | registry:block | A stacked bar chart whose tooltip marks each series with a thin vertical color bar. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/tooltip-chart-line.json` |
| tooltip-chart-no-indicator | registry:block | A stacked bar chart whose tooltip lists series names and values without color indicators. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/tooltip-chart-no-indicator.json` |
| tooltip-chart-no-label | registry:block | A stacked bar chart whose tooltip omits the category heading and shows only the series rows. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/tooltip-chart-no-label.json` |
| bag-checkout | registry:block | A three-step checkout with delivery, payment, and review steps beside an order summary. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/bag-checkout.json` |
| bag-configure | registry:block | A product configurator for choosing a model, finish, and storage, with a live price and Add to Bag button. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/bag-configure.json` |
| bag-review | registry:block | A shopping bag review page with quantity steppers, removable line items, and a totals summary. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/bag-review.json` |
| bento-closer-look | registry:block | A feature spotlight that pairs an auto-advancing accordion of features with a matching cross-fading image. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/bento-closer-look.json` |
| bento-features | registry:block | A bento grid of product feature tiles mixing photography, gradient figures, and short claims. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/bento-features.json` |
| bento-stats | registry:block | A dark bento grid of headline product stats, with a photo tile and an animated charging bar. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/bento-stats.json` |
| chat-conversations | registry:block | A messaging app layout with a conversation list beside the selected thread and a message composer. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/chat-conversations.json` |
| chat-support | registry:block | A support landing section with a floating chat panel, quick-reply suggestions, and a launcher button. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/chat-support.json` |
| chat-thread | registry:block | A single message thread inside a phone frame, with heart reactions and simulated replies. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/chat-thread.json` |
| dash-analytics | registry:block | An app analytics dashboard with a metric switcher, an interactive area chart, and a regional breakdown. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/dash-analytics.json` |
| dash-health | registry:block | A health summary dashboard with pinned metric cards, sparklines, and category views in a sidebar. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/dash-health.json` |
| dash-store | registry:block | A store admin overview with sales stats, an online versus in-store bar chart, and a filterable orders list. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/dash-store.json` |
| empty-bag | registry:block | An empty shopping bag state with sign-in and shopping actions above a row of recommended products. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/empty-bag.json` |
| empty-offline | registry:block | An offline empty state with a retry action that reconnects and reveals a grid of albums. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/empty-offline.json` |
| empty-search | registry:block | A search page showing live suggestions, a no-results state, and suggested queries. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/empty-search.json` |
| footer-compact | registry:block | A narrow site footer with a breadcrumb, a collapsible link directory, and legal lines. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/footer-compact.json` |
| footer-directory | registry:block | A full site footer with footnotes, a breadcrumb, a five-column link directory, and legal links. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/footer-directory.json` |
| footer-services | registry:block | A footer with a band of service highlights, a newsletter signup, a link directory, and legal links. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/footer-services.json` |
| grid-accessories | registry:block | A filterable accessories grid with category chips and add-to-bag buttons that update a bag counter. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/grid-accessories.json` |
| grid-carousel | registry:block | A horizontally scrolling carousel of product cards with previous and next controls. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/grid-carousel.json` |
| grid-lineup | registry:block | A product lineup comparing models side by side, each with finish swatches, a price, and buy actions. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/grid-lineup.json` |
| hero-cinematic | registry:block | A dark, centered product hero whose image, gradient title, and glow change with the selected finish. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/hero-cinematic.json` |
| hero-product | registry:block | A centered product launch hero with an eyebrow, headline, two actions, a wide image, and a pricing line. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/hero-product.json` |
| hero-tiles | registry:block | A pair of promotional hero tiles, each with a title, tagline, two actions, and a product image. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/hero-tiles.json` |
| inbox-categories | registry:block | A mail inbox sorted into Primary, Transactions, Updates, and Promotions, with a message reader and inline reply. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/inbox-categories.json` |
| inbox-mail | registry:block | A three-column mail client with mailboxes, a searchable message list, and a message reader with reply. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/inbox-mail.json` |
| inbox-support | registry:block | A support ticket inbox with status views, a ticket list with priorities, and a detail pane for replying and resolving. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/inbox-support.json` |
| log-activity | registry:block | An admin activity log grouped by day, with a type filter and expandable before-and-after details. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/log-activity.json` |
| log-live | registry:block | A live admin activity feed that streams new events, with session stats and a pause control. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/log-live.json` |
| log-security | registry:block | A security overview with a computed score ring, alert counts by severity, and resolvable alerts. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/log-security.json` |
| login-account | registry:block | A two-step account sign-in form that asks for an email, then reveals a password field. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/login-account.json` |
| login-passkey | registry:block | A passwordless sign-in screen that runs a simulated face scan in a dialog, then welcomes the user. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/login-passkey.json` |
| login-sheet | registry:block | A mobile app welcome screen with a Sign in with suiss bottom sheet for sharing or hiding an email. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/login-sheet.json` |
| nav-categories | registry:block | A store landing header with a draggable carousel of category tiles and a heading that follows the selection. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/nav-categories.json` |
| nav-global | registry:block | A sticky global navigation bar with mega-menu panels, search and bag actions, above a sample product hero. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/nav-global.json` |
| nav-local | registry:block | A sticky product sub-navigation that highlights the section in view, shown on a dark product page. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/nav-local.json` |
| price-bundle | registry:block | A dark subscription bundle picker comparing three plans and the services each one includes. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/price-bundle.json` |
| price-care | registry:block | A device protection plan picker with device chips, payment options, an optional theft add-on, and a live total. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/price-care.json` |
| price-storage | registry:block | A cloud storage plan picker with a monthly or yearly toggle, four plan cards, and a switch action. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/price-storage.json` |
| roles-editor | registry:block | A role editor that lists roles beside grouped permission switches, with save and revert for unsaved changes. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/roles-editor.json` |
| roles-matrix | registry:block | A permissions matrix with a checkbox for every permission and role, grouped by area, with a save action. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/roles-matrix.json` |
| roles-requests | registry:block | An access request queue where admins approve or deny permission requests, with an approval length setting. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/roles-requests.json` |
| settings-account | registry:block | An account settings page with a profile sidebar and a Sign-In and Security section of editable cards. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/settings-account.json` |
| settings-device | registry:block | A phone-style Settings screen with a search field, an account row, and grouped rows with switches. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/settings-device.json` |
| settings-notifications | registry:block | Per-app notification settings with a live lock screen preview that reflects each choice. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/settings-notifications.json` |
| signup-form | registry:block | A full account creation form with name, country, birthday, email, and password fields and live password rules. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/signup-form.json` |
| signup-steps | registry:block | A one-question-at-a-time signup flow for name, email, and password, with a progress indicator. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/signup-steps.json` |
| signup-trial | registry:block | A free trial signup split between a promotional image panel and a short form with a password strength meter. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/signup-trial.json` |
| users-detail | registry:block | A user directory with a member list beside a detail pane for profile, sessions, and security settings. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/users-detail.json` |
| users-invite | registry:block | An invite form that collects several email addresses as chips, assigns a role, and lists pending invitations. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/users-invite.json` |
| users-table | registry:block | A searchable users table with role filters, row selection, and bulk role and status actions. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/users-table.json` |
| verify-code | registry:block | A two-factor authentication screen with a six-digit code entry, error feedback, and a resend countdown. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/verify-code.json` |
| verify-device | registry:block | A trusted-device sign-in flow that pairs instructions with a simulated approval alert and code entry. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/verify-device.json` |
| verify-email | registry:block | A check-your-inbox screen after signup, with open mail and resend actions and a cooldown timer. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/verify-email.json` |
| use-highlighted-code | registry:hook | Highlights code with Shiki and returns the tokens for each line. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/use-highlighted-code.json` |
| use-message-scroller | registry:hook | The scroll state and controls behind the message scroller. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/use-message-scroller.json` |
| use-mobile | registry:hook | Reports whether the viewport is narrower than the mobile breakpoint. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/use-mobile.json` |
| use-platform | registry:hook | Detects Apple platforms so shortcuts can show the matching modifier key. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/use-platform.json` |
| use-questionnaire | registry:hook | The state and keyboard shortcuts behind the questionnaire. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/use-questionnaire.json` |
| use-scrollbar-gap | registry:hook | Keeps the page from shifting when an overlay hides the scrollbar. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/use-scrollbar-gap.json` |
| highlighter | registry:lib | A shared Shiki highlighter that loads languages and themes on demand. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/highlighter.json` |
| utils | registry:lib | The cn helper that merges Tailwind CSS class names. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/utils.json` |
| theme-suiss | registry:theme | The suiss/ui colors for light and dark mode, with the radius scale and the system font stack. | `npx shadcn@latest add https://suiss.app/ui/r/{style}/theme-suiss.json` |

## For AI agents

```text
You are adding components from @esuiss to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/esuiss.md) for the component list.
2. Fetch the machine-readable index: https://suiss.app/ui/r/registry/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: esuiss).
```