S
suiss/ui
Area Chart Axesarea-chart-axesA gradient area with visible dots and a value axis on the right edge of the plot.
Area Chart Defaultarea-chart-defaultA single filled area with a smooth curve showing one series across six months.
Area Chart Gradientarea-chart-gradientTwo overlapping areas whose fills fade out toward the bottom using SVG linear gradients.
Area Chart Interactivearea-chart-interactiveA stock price chart with time-range toggles, a scrubbing cursor that updates the header, and animated transitions between ranges.
Area Chart Lineararea-chart-linearA single filled area whose points are joined by straight segments instead of a smoothed curve.
Area Chart Rangearea-chart-rangeA heart-rate band showing each hour's low-to-high range as a shaded area with an average line through it.
Area Chart Sparklinearea-chart-sparklineA watchlist with a tiny gradient area chart beside each price, colored by whether the stock is rising or falling.
Area Chart Stackedarea-chart-stackedTwo areas stacked on top of each other so the top edge shows the combined total, with a legend.
Area Chart Stacked Expandarea-chart-stacked-expandTwo stacked areas normalized so every month fills 100%, showing each series' share rather than its value.
Area Chart Steparea-chart-stepA single filled area drawn as steps, holding each value flat until the next reading.
Bag Checkoutbag-checkoutA three-step checkout with delivery, payment, and review steps beside an order summary.
Bag Configurebag-configureA product configurator for choosing a model, finish, and storage, with a live price and Add to Bag button.
Bag Reviewbag-reviewA shopping bag review page with quantity steppers, removable line items, and a totals summary.
Bar Chart Activebar-chart-activeA week of step counts where clicking a bar selects it, dims the others and updates the header.
Bar Chart Defaultbar-chart-defaultA single series of rounded vertical bars, one per month.
Bar Chart Horizontalbar-chart-horizontalHorizontal bars with category names on the left and a distinct color for each category.
Bar Chart Hourlybar-chart-hourlyTwenty-four thin bars of screen time per hour, with a dashed line marking the hourly average.
Bar Chart Interactivebar-chart-interactiveA screen-time report with stacked category bars, a week and day toggle, selectable days and a most-used apps list.
Bar Chart Labeledbar-chart-labeledA single bar series with each value printed above its bar and no grid lines.
Bar Chart Multiplebar-chart-multipleTwo series drawn as grouped bars side by side for each month.
Bar Chart Negativebar-chart-negativeMonthly cash flow bars that turn green above zero and red below it, with a zero baseline.
Bar Chart Rangebar-chart-rangeA weather forecast where each horizontal pill spans the day's low and high on a shared gradient scale.
Bar Chart Stackedbar-chart-stackedTwo series stacked into one bar per month, with a legend below the plot.
Bento Closer Lookbento-closer-lookA feature spotlight that pairs an auto-advancing accordion of features with a matching cross-fading image.
Bento Featuresbento-featuresA bento grid of product feature tiles mixing photography, gradient figures, and short claims.
Bento Statsbento-statsA dark bento grid of headline product stats, with a photo tile and an animated charging bar.
Chat Conversationschat-conversationsA messaging app layout with a conversation list beside the selected thread and a message composer.
Chat Supportchat-supportA support landing section with a floating chat panel, quick-reply suggestions, and a launcher button.
Chat Threadchat-threadA single message thread inside a phone frame, with heart reactions and simulated replies.
Dash Analyticsdash-analyticsAn app analytics dashboard with a metric switcher, an interactive area chart, and a regional breakdown.
Dash Healthdash-healthA health summary dashboard with pinned metric cards, sparklines, and category views in a sidebar.
Dash Storedash-storeA store admin overview with sales stats, an online versus in-store bar chart, and a filterable orders list.
Empty Bagempty-bagAn empty shopping bag state with sign-in and shopping actions above a row of recommended products.
Empty Offlineempty-offlineAn offline empty state with a retry action that reconnects and reveals a grid of albums.
Empty Searchempty-searchA search page showing live suggestions, a no-results state, and suggested queries.
Footer Compactfooter-compactA narrow site footer with a breadcrumb, a collapsible link directory, and legal lines.
Footer Directoryfooter-directoryA full site footer with footnotes, a breadcrumb, a five-column link directory, and legal links.
Footer Servicesfooter-servicesA footer with a band of service highlights, a newsletter signup, a link directory, and legal links.
Grid Accessoriesgrid-accessoriesA filterable accessories grid with category chips and add-to-bag buttons that update a bag counter.
Grid Carouselgrid-carouselA horizontally scrolling carousel of product cards with previous and next controls.
Grid Lineupgrid-lineupA product lineup comparing models side by side, each with finish swatches, a price, and buy actions.
Hero Cinematichero-cinematicA dark, centered product hero whose image, gradient title, and glow change with the selected finish.
Hero Producthero-productA centered product launch hero with an eyebrow, headline, two actions, a wide image, and a pricing line.
Hero Tileshero-tilesA pair of promotional hero tiles, each with a title, tagline, two actions, and a product image.
Inbox Categoriesinbox-categoriesA mail inbox sorted into Primary, Transactions, Updates, and Promotions, with a message reader and inline reply.
Inbox Mailinbox-mailA three-column mail client with mailboxes, a searchable message list, and a message reader with reply.
Inbox Supportinbox-supportA support ticket inbox with status views, a ticket list with priorities, and a detail pane for replying and resolving.
Line Chart Defaultline-chart-defaultA single smooth line through six months of values, without point markers.
Line Chart Dotsline-chart-dotsA weight trend with a dot at every monthly reading and a fixed value axis on the right.
Line Chart Forecastline-chart-forecastA solid line for actual values that continues as a dashed forecast over a shaded future range.
Line Chart Goalline-chart-goalDaily step counts plotted against a labeled dashed goal line at 10,000 steps.
Line Chart Goal Dotsline-chart-goal-dotsNightly sleep hours with a goal line and dots colored green or orange depending on whether the goal was met.
Line Chart Interactiveline-chart-interactiveMonthly temperatures for several cities, with chips to show or hide each city and an average, high or low switch.
Line Chart Labeledline-chart-labeledA single line with a dot and a printed value at every point, and no grid.
Line Chart Linearline-chart-linearA single line drawn with straight segments between readings instead of a smoothed curve.
Line Chart Multipleline-chart-multipleTwo lines compared on the same axes, with a legend identifying each series.
Line Chart Stepline-chart-stepA single line drawn as horizontal steps, holding each value until the next reading.
Log Activitylog-activityAn admin activity log grouped by day, with a type filter and expandable before-and-after details.
Log Livelog-liveA live admin activity feed that streams new events, with session stats and a pause control.
Log Securitylog-securityA security overview with a computed score ring, alert counts by severity, and resolvable alerts.
Login Accountlogin-accountA two-step account sign-in form that asks for an email, then reveals a password field.
Login Passkeylogin-passkeyA passwordless sign-in screen that runs a simulated face scan in a dialog, then welcomes the user.
Login Sheetlogin-sheetA mobile app welcome screen with a Sign in with suiss bottom sheet for sharing or hiding an email.
Nav Categoriesnav-categoriesA store landing header with a draggable carousel of category tiles and a heading that follows the selection.
Nav Globalnav-globalA sticky global navigation bar with mega-menu panels, search and bag actions, above a sample product hero.
Nav Localnav-localA sticky product sub-navigation that highlights the section in view, shown on a dark product page.
Pie Chart Activepie-chart-activeA donut where one slice is enlarged and outlined with an outer arc to highlight it.
Pie Chart Defaultpie-chart-defaultA full pie split into five device slices, separated by thin card-colored borders.
Pie Chart Donutpie-chart-donutA donut chart with a hollow center and small gaps between slices.
Pie Chart Donut Textpie-chart-donut-textA donut with the total number of users displayed in the center of the ring.
Pie Chart Halfpie-chart-halfA semicircular gauge-style pie showing battery share by device, with a caption under the arc.
Pie Chart Interactivepie-chart-interactiveA storage breakdown donut with a device switch, hover-linked list and lifted slices, plus a linear usage bar.
Pie Chart Labelpie-chart-labelA pie with each category name drawn outside its slice and joined by a leader line.
Pie Chart Legendpie-chart-legendA donut with a legend beneath it that lists every category and its color.
Pie Chart Nestedpie-chart-nestedTwo concentric pies: an inner ring of grouped totals surrounded by an outer ring of individual categories.
Pie Chart Separatedpie-chart-separatedA donut whose slices are pulled apart with wide gaps and rounded corners.
Price Bundleprice-bundleA dark subscription bundle picker comparing three plans and the services each one includes.
Price Careprice-careA device protection plan picker with device chips, payment options, an optional theft add-on, and a live total.
Price Storageprice-storageA cloud storage plan picker with a monthly or yearly toggle, four plan cards, and a switch action.
Radar Chart Defaultradar-chart-defaultA single filled radar shape showing this month's scores across six training skills.
Radar Chart Dotsradar-chart-dotsA single radar shape with a solid dot marking the value on every axis.
Radar Chart Grid Circleradar-chart-grid-circleA single radar shape drawn over circular rings instead of polygonal grid lines.
Radar Chart Grid Filledradar-chart-grid-filledA borderless radar shape over shaded circular rings separated by card-colored lines.
Radar Chart Grid Noneradar-chart-grid-noneA single solid radar shape with no grid and no outline, leaving only the shape and axis labels.
Radar Chart Interactiveradar-chart-interactiveA phone model comparison where toggle chips show up to three models, which grow in and out of the radar.
Radar Chart Legendradar-chart-legendTwo overlapping radar shapes with a legend beneath that names each series.
Radar Chart Lines Onlyradar-chart-lines-onlyTwo radar outlines with no fill, comparing this month and last month by stroke alone.
Radar Chart Multipleradar-chart-multipleTwo overlapping radar shapes comparing this month with last month.
Radar Chart Radius Axisradar-chart-radius-axisA single radar shape with a visible 0 to 100 value scale along the vertical axis.
Radial Chart Batteriesradial-chart-batteriesA row of small battery rings, one per device, that turn red when charge is at or below 20%.
Radial Chart Defaultradial-chart-defaultConcentric radial bars, one per device, each running around a gray background track.
Radial Chart Gaugeradial-chart-gaugeA 240-degree gauge arc showing an air quality reading with its value and rating below the center.
Radial Chart Interactiveradial-chart-interactiveA weekly activity view where picking a day animates three large rings and updates each ring's totals.
Radial Chart Labelradial-chart-labelConcentric radial bars with each category's name printed at the start of its bar.
Radial Chart Progressradial-chart-progressA three-quarter arc tracking progress toward a goal, with the count shown in the center.
Radial Chart Ringsradial-chart-ringsThree nested activity rings for move, exercise and stand, drawn as plain SVG circles.
Radial Chart Stackedradial-chart-stackedA half-circle arc with two series stacked end to end and the combined total beneath it.
Radial Chart Textradial-chart-textA single full-circle progress ring with a percentage and caption centered inside.
Radial Chart Tintedradial-chart-tintedConcentric radial bars whose unfilled track is a soft tint of each bar's own color.
Roles Editorroles-editorA role editor that lists roles beside grouped permission switches, with save and revert for unsaved changes.
Roles Matrixroles-matrixA permissions matrix with a checkbox for every permission and role, grouped by area, with a save action.
Roles Requestsroles-requestsAn access request queue where admins approve or deny permission requests, with an approval length setting.
Settings Accountsettings-accountAn account settings page with a profile sidebar and a Sign-In and Security section of editable cards.
Settings Devicesettings-deviceA phone-style Settings screen with a search field, an account row, and grouped rows with switches.
Settings Notificationssettings-notificationsPer-app notification settings with a live lock screen preview that reflects each choice.
Signup Formsignup-formA full account creation form with name, country, birthday, email, and password fields and live password rules.
Signup Stepssignup-stepsA one-question-at-a-time signup flow for name, email, and password, with a progress indicator.
Signup Trialsignup-trialA free trial signup split between a promotional image panel and a short form with a password strength meter.
Tooltip Chart Customtooltip-chart-customA bar chart whose tooltip is fully custom markup, showing a large total, a unit and the day.
Tooltip Chart Dashedtooltip-chart-dashedA stacked bar chart whose tooltip marks each series with a dashed outline indicator.
Tooltip Chart Dottooltip-chart-dotA stacked bar chart showing the default tooltip indicator, a small colored square for each series.
Tooltip Chart Formattertooltip-chart-formatterA bar chart of daily active energy whose tooltip shows a name, value and kcal unit through a custom formatter.
Tooltip Chart Iconstooltip-chart-iconsA stacked bar chart whose tooltip shows an icon for each series in place of a color swatch.
Tooltip Chart Interactivetooltip-chart-interactiveA tooltip playground on quarterly revenue bars, with controls for indicator, trigger, title total and hidden parts.
Tooltip Chart Label Formattertooltip-chart-label-formatterA gradient area chart whose tooltip heading shows a longer date than the axis ticks.
Tooltip Chart Linetooltip-chart-lineA stacked bar chart whose tooltip marks each series with a thin vertical color bar.
Tooltip Chart No Indicatortooltip-chart-no-indicatorA stacked bar chart whose tooltip lists series names and values without color indicators.
Tooltip Chart No Labeltooltip-chart-no-labelA stacked bar chart whose tooltip omits the category heading and shows only the series rows.
Users Detailusers-detailA user directory with a member list beside a detail pane for profile, sessions, and security settings.
Users Inviteusers-inviteAn invite form that collects several email addresses as chips, assigns a role, and lists pending invitations.
Users Tableusers-tableA searchable users table with role filters, row selection, and bulk role and status actions.
Verify Codeverify-codeA two-factor authentication screen with a six-digit code entry, error feedback, and a resend countdown.
Verify Deviceverify-deviceA trusted-device sign-in flow that pairs instructions with a simulated approval alert and code entry.
Verify Emailverify-emailA check-your-inbox screen after signup, with open mail and resend actions and a cooldown timer.