@esuiss

A vertically stacked set of headings that each reveal a section of content.

A modal dialog that interrupts the user to confirm an important action or acknowledge information.

An action sheet that slides up from the bottom of the screen to confirm or choose an action.

A static callout that draws attention to an important message without interrupting the user.

A container that keeps its content at a fixed width-to-height ratio.

A compact file card that shows a document or image with its name, details, upload state and actions.

A circular image that represents a person, with initials or an icon when no image is available.

A small inline label for status, counts or metadata.

A trail of links that shows where the current page sits in the site hierarchy.

A chat-style message bubble with variants, alignment, a tail and optional reactions.

A container that joins related buttons, inputs and menus into a single connected control.

A pill-shaped button that triggers an action, with variants for every level of emphasis.

A month-grid date picker for selecting a single date, several dates or a date range.

A raised container that groups related content and actions about a single subject.

A swipeable track of slides with buttons, dots and optional autoplay, built on Embla Carousel.

Themed building blocks for Recharts charts, with a shared color config, tooltip and legend.

A control that lets people turn a single option on or off.

A surface for code, terminal output and diffs, with copy, line numbers, line states and streaming syntax highlighting.

A section that people can expand and collapse to show or hide its content.

A text input with a filterable list of options, for choosing one or more values by typing.

A searchable menu of commands, used inline or as a command palette in a dialog.

A menu of actions that opens at the pointer when people right-click an area.

A modal window that appears above the page to focus people on a task or message.

A provider that sets the reading direction, left-to-right or right-to-left, for the components inside it.

A panel that slides in from an edge of the screen and can be dismissed with a swipe.

A menu of actions or options that opens from a button.

A placeholder that explains why a view has no content and what people can do next.

Building blocks for form fields that pair controls with labels, descriptions and error messages.

A navigation menu that covers the whole screen, for site links on small viewports.

A card that previews content behind a link when people hover over or focus it.

A text field with icons, text, buttons or keyboard hints attached inside its border.

A segmented field for entering one-time passcodes, one character per slot.

A single-line text field for entering and editing short values.

A flexible row that pairs media, a title, a description and actions, for lists and settings.

Displays a keyboard key or shortcut, with a platform-aware modifier symbol.

An accessible text label that names a form control.

An inline annotation for timelines and conversations, such as a date divider or system event.

A horizontal bar of menus, like a desktop application's menu bar.

A scroll container for chat transcripts that opens at the latest message and keeps scroll position stable.

Lays out a single chat message with an optional avatar, header and footer.

A styled native select element for choosing one option from a list.

A site navigation bar whose items open popover or full-width panels of links.

Navigation links for moving between pages of content, such as table results.

A floating panel anchored to a trigger, for supplementary content and lightweight controls.

A horizontal bar that shows the completion of a task.

A step-by-step form that shows one question at a time, with validation, skipping and keyboard shortcuts.

A set of radio buttons where only one option can be selected at a time.

Panels separated by draggable handles that let users resize sections of a layout.

A scrollable region with slim, custom-styled scrollbars.

A button that opens a list of options so people can pick one value.

A thin line that visually divides content, horizontally or vertically.

A panel that slides in from an edge of the screen over the page.

A collapsible app sidebar for navigation, with icon, off-canvas and mobile sheet modes.

A pulsing placeholder block that stands in for content while it loads.

A track with one or more draggable thumbs for choosing a value or range.

An eight-spoke activity indicator that shows an indeterminate wait.

A toggle control that turns a single setting on or off.

A floating bottom navigation bar whose overflow and extra sections expand from a More button.

Styled native table elements for displaying rows of structured data.

A set of tabs that switches between panels of related content in the same place.

A multi-line text field that grows with its content, with an optional resize handle.

A theme provider with a light, dark and system toggle and an animated switch between them.

Brief, stacked notifications that appear at the bottom of the screen and dismiss themselves.

A set of toggle buttons for choosing one or several related options, including segmented controls.

A two-state button that stays pressed until it's pressed again.

A small label that appears next to an element on hover or keyboard focus.

Rows for the steps an agent takes: reasoning, tool calls, sources, plans and file edits.

A scrolling, 3D-curved wheel of options, like the iOS picker, for choosing values such as dates and times.

A rounded card in the style of home screen widgets, with fixed sizes and optional drag-to-resize.

A row of menus that renders as a menubar on desktop and a single More actions sheet on mobile.

A list of actions that opens as a dropdown menu on desktop and an action sheet on mobile.

An application frame with a collapsible sidebar on desktop and a floating tab bar on mobile.

A searchable command menu that opens in a dialog on desktop and a drawer on mobile.

A confirmation prompt that opens as an alert dialog on desktop and an action sheet on mobile.

Actions for an element that open as a context menu on right click, or an action sheet on long press on mobile.

A date field that opens a calendar popover on desktop and wheel pickers in a drawer on mobile.

A non-modal panel anchored to a trigger on desktop that becomes a bottom drawer on mobile.

A modal window that opens as a centered dialog on desktop and a bottom drawer on mobile.

A site header that renders a navigation menu on wide screens and a fullscreen menu when space runs out.

A list that pages through items with numbered pagination on desktop and a Load more button on mobile.

A side panel that renders as a Sheet on desktop and a swipeable Drawer on mobile.

A single-choice picker that renders a custom Select on desktop and a native select on mobile.

A link preview that shows a hover card on desktop and a drawer on mobile.

A searchable single-choice picker that renders a Combobox on desktop and a search drawer on mobile.

A segmented control for one exclusive choice that becomes a native select on mobile.

A two- or three-column sidebar, list and detail layout that becomes a push navigation stack on mobile.

Tabular data that renders as a table on desktop and a grouped list on mobile.

A navigation trail that shows breadcrumbs on desktop and a back link with history on mobile.

A floating pill at the top of the screen that shows live activities and brief notifications, like the Dynamic Island.

A one-time code field that offers an incoming code, fills it digit by digit, and verifies it automatically.

A context menu that lifts the pressed item into an enlarged preview above its actions, like iOS context menus.

A scroll container that refreshes its content when the user pulls down from the top.

A scrolling list with a search field tucked above it that appears when the user scrolls up.

An A to Z index bar for jumping between sections of a long list by tapping, dragging, or typing.

A list with an edit mode for selecting multiple rows and acting on them from a floating toolbar.

A numeric field with minus and plus buttons that step the value, accelerating while held.

A list row that reveals action buttons when swiped sideways, with optional full swipe to run an action.

A dismissible feature tip shown inline or as a popover, remembered once dismissed and sequenced in groups.

A floating bar that offers to undo the last action for a few seconds before committing it.

A gradient area with visible dots and a value axis on the right edge of the plot.

A single filled area with a smooth curve showing one series across six months.

Two overlapping areas whose fills fade out toward the bottom using SVG linear gradients.

A stock price chart with time-range toggles, a scrubbing cursor that updates the header, and animated transitions between ranges.

A single filled area whose points are joined by straight segments instead of a smoothed curve.

A heart-rate band showing each hour's low-to-high range as a shaded area with an average line through it.

A watchlist with a tiny gradient area chart beside each price, colored by whether the stock is rising or falling.

Two stacked areas normalized so every month fills 100%, showing each series' share rather than its value.

Two areas stacked on top of each other so the top edge shows the combined total, with a legend.

A single filled area drawn as steps, holding each value flat until the next reading.

A week of step counts where clicking a bar selects it, dims the others and updates the header.

A single series of rounded vertical bars, one per month.

Horizontal bars with category names on the left and a distinct color for each category.

Twenty-four thin bars of screen time per hour, with a dashed line marking the hourly average.

A screen-time report with stacked category bars, a week and day toggle, selectable days and a most-used apps list.

A single bar series with each value printed above its bar and no grid lines.

Two series drawn as grouped bars side by side for each month.

Monthly cash flow bars that turn green above zero and red below it, with a zero baseline.

A weather forecast where each horizontal pill spans the day's low and high on a shared gradient scale.

Two series stacked into one bar per month, with a legend below the plot.

A single smooth line through six months of values, without point markers.

A weight trend with a dot at every monthly reading and a fixed value axis on the right.

A solid line for actual values that continues as a dashed forecast over a shaded future range.

Nightly sleep hours with a goal line and dots colored green or orange depending on whether the goal was met.

Daily step counts plotted against a labeled dashed goal line at 10,000 steps.

Monthly temperatures for several cities, with chips to show or hide each city and an average, high or low switch.

A single line with a dot and a printed value at every point, and no grid.

A single line drawn with straight segments between readings instead of a smoothed curve.

Two lines compared on the same axes, with a legend identifying each series.

A single line drawn as horizontal steps, holding each value until the next reading.

A donut where one slice is enlarged and outlined with an outer arc to highlight it.

A full pie split into five device slices, separated by thin card-colored borders.

A donut with the total number of users displayed in the center of the ring.

A donut chart with a hollow center and small gaps between slices.

A semicircular gauge-style pie showing battery share by device, with a caption under the arc.

A storage breakdown donut with a device switch, hover-linked list and lifted slices, plus a linear usage bar.

A pie with each category name drawn outside its slice and joined by a leader line.

A donut with a legend beneath it that lists every category and its color.

Two concentric pies: an inner ring of grouped totals surrounded by an outer ring of individual categories.

A donut whose slices are pulled apart with wide gaps and rounded corners.

A single filled radar shape showing this month's scores across six training skills.

A single radar shape with a solid dot marking the value on every axis.

A single radar shape drawn over circular rings instead of polygonal grid lines.

A borderless radar shape over shaded circular rings separated by card-colored lines.

A single solid radar shape with no grid and no outline, leaving only the shape and axis labels.

A phone model comparison where toggle chips show up to three models, which grow in and out of the radar.

Two overlapping radar shapes with a legend beneath that names each series.

Two radar outlines with no fill, comparing this month and last month by stroke alone.

Two overlapping radar shapes comparing this month with last month.

A single radar shape with a visible 0 to 100 value scale along the vertical axis.

A row of small battery rings, one per device, that turn red when charge is at or below 20%.

Concentric radial bars, one per device, each running around a gray background track.

A 240-degree gauge arc showing an air quality reading with its value and rating below the center.

A weekly activity view where picking a day animates three large rings and updates each ring's totals.

Concentric radial bars with each category's name printed at the start of its bar.

A three-quarter arc tracking progress toward a goal, with the count shown in the center.

Three nested activity rings for move, exercise and stand, drawn as plain SVG circles.

A half-circle arc with two series stacked end to end and the combined total beneath it.

A single full-circle progress ring with a percentage and caption centered inside.

Concentric radial bars whose unfilled track is a soft tint of each bar's own color.

A bar chart whose tooltip is fully custom markup, showing a large total, a unit and the day.

A stacked bar chart whose tooltip marks each series with a dashed outline indicator.

A stacked bar chart showing the default tooltip indicator, a small colored square for each series.

A bar chart of daily active energy whose tooltip shows a name, value and kcal unit through a custom formatter.

A stacked bar chart whose tooltip shows an icon for each series in place of a color swatch.

A tooltip playground on quarterly revenue bars, with controls for indicator, trigger, title total and hidden parts.

A gradient area chart whose tooltip heading shows a longer date than the axis ticks.

A stacked bar chart whose tooltip marks each series with a thin vertical color bar.

A stacked bar chart whose tooltip lists series names and values without color indicators.

A stacked bar chart whose tooltip omits the category heading and shows only the series rows.

A three-step checkout with delivery, payment, and review steps beside an order summary.

A product configurator for choosing a model, finish, and storage, with a live price and Add to Bag button.

A shopping bag review page with quantity steppers, removable line items, and a totals summary.

A feature spotlight that pairs an auto-advancing accordion of features with a matching cross-fading image.

A bento grid of product feature tiles mixing photography, gradient figures, and short claims.

A dark bento grid of headline product stats, with a photo tile and an animated charging bar.

A messaging app layout with a conversation list beside the selected thread and a message composer.

A support landing section with a floating chat panel, quick-reply suggestions, and a launcher button.

A single message thread inside a phone frame, with heart reactions and simulated replies.

An app analytics dashboard with a metric switcher, an interactive area chart, and a regional breakdown.

A health summary dashboard with pinned metric cards, sparklines, and category views in a sidebar.

A store admin overview with sales stats, an online versus in-store bar chart, and a filterable orders list.

An empty shopping bag state with sign-in and shopping actions above a row of recommended products.

An offline empty state with a retry action that reconnects and reveals a grid of albums.

A search page showing live suggestions, a no-results state, and suggested queries.

A narrow site footer with a breadcrumb, a collapsible link directory, and legal lines.

A full site footer with footnotes, a breadcrumb, a five-column link directory, and legal links.

A footer with a band of service highlights, a newsletter signup, a link directory, and legal links.

A filterable accessories grid with category chips and add-to-bag buttons that update a bag counter.

A horizontally scrolling carousel of product cards with previous and next controls.

A product lineup comparing models side by side, each with finish swatches, a price, and buy actions.

A dark, centered product hero whose image, gradient title, and glow change with the selected finish.

A centered product launch hero with an eyebrow, headline, two actions, a wide image, and a pricing line.

A pair of promotional hero tiles, each with a title, tagline, two actions, and a product image.

A mail inbox sorted into Primary, Transactions, Updates, and Promotions, with a message reader and inline reply.

A three-column mail client with mailboxes, a searchable message list, and a message reader with reply.

A support ticket inbox with status views, a ticket list with priorities, and a detail pane for replying and resolving.

An admin activity log grouped by day, with a type filter and expandable before-and-after details.

A live admin activity feed that streams new events, with session stats and a pause control.

A security overview with a computed score ring, alert counts by severity, and resolvable alerts.

A two-step account sign-in form that asks for an email, then reveals a password field.

A passwordless sign-in screen that runs a simulated face scan in a dialog, then welcomes the user.

A mobile app welcome screen with a Sign in with suiss bottom sheet for sharing or hiding an email.

A store landing header with a draggable carousel of category tiles and a heading that follows the selection.

A sticky global navigation bar with mega-menu panels, search and bag actions, above a sample product hero.

A sticky product sub-navigation that highlights the section in view, shown on a dark product page.

A dark subscription bundle picker comparing three plans and the services each one includes.

A device protection plan picker with device chips, payment options, an optional theft add-on, and a live total.

A cloud storage plan picker with a monthly or yearly toggle, four plan cards, and a switch action.

A role editor that lists roles beside grouped permission switches, with save and revert for unsaved changes.

A permissions matrix with a checkbox for every permission and role, grouped by area, with a save action.

An access request queue where admins approve or deny permission requests, with an approval length setting.

An account settings page with a profile sidebar and a Sign-In and Security section of editable cards.

A phone-style Settings screen with a search field, an account row, and grouped rows with switches.

Per-app notification settings with a live lock screen preview that reflects each choice.

A full account creation form with name, country, birthday, email, and password fields and live password rules.

A one-question-at-a-time signup flow for name, email, and password, with a progress indicator.

A free trial signup split between a promotional image panel and a short form with a password strength meter.

A user directory with a member list beside a detail pane for profile, sessions, and security settings.

An invite form that collects several email addresses as chips, assigns a role, and lists pending invitations.

A searchable users table with role filters, row selection, and bulk role and status actions.

A two-factor authentication screen with a six-digit code entry, error feedback, and a resend countdown.

A trusted-device sign-in flow that pairs instructions with a simulated approval alert and code entry.

A check-your-inbox screen after signup, with open mail and resend actions and a cooldown timer.

Highlights code with Shiki and returns the tokens for each line.

The scroll state and controls behind the message scroller.

Reports whether the viewport is narrower than the mobile breakpoint.

Detects Apple platforms so shortcuts can show the matching modifier key.

The state and keyboard shortcuts behind the questionnaire.

Keeps the page from shifting when an overlay hides the scrollbar.

A shared Shiki highlighter that loads languages and themes on demand.

The cn helper that merges Tailwind CSS class names.

The suiss/ui colors for light and dark mode, with the radius scale and the system font stack.