# Blocks

56 blocks for React, React Native, SwiftUI and Jetpack Compose, each copied into your project with the CLI.

Source: https://ui.suiss.app/docs/blocks

- [Bag Checkout](https://ui.suiss.app/docs/blocks/bag-checkout): A three-step checkout with delivery, payment, and review steps beside an order summary.
- [Bag Configure](https://ui.suiss.app/docs/blocks/bag-configure): 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): 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): 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): A bento grid of product feature tiles mixing photography, gradient figures, and short claims.
- [Bento Stats](https://ui.suiss.app/docs/blocks/bento-stats): 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): 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): 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): A single message thread inside a phone frame, with heart reactions and simulated replies.
- [Dash Analytics](https://ui.suiss.app/docs/blocks/dash-analytics): 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): 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): 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): 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): 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): A search page showing live suggestions, a no-results state, and suggested queries.
- [Footer Compact](https://ui.suiss.app/docs/blocks/footer-compact): A narrow site footer with a breadcrumb, a collapsible link directory, and legal lines.
- [Footer Directory](https://ui.suiss.app/docs/blocks/footer-directory): 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): 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): 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): A horizontally scrolling carousel of product cards with previous and next controls.
- [Grid Lineup](https://ui.suiss.app/docs/blocks/grid-lineup): 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): 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): 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): 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): 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): 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): 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): 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): 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): 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): 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): 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): 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): 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): 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): 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): A paged onboarding flow with illustrations, a page indicator and Continue and Skip buttons.
- [Permission Primer](https://ui.suiss.app/docs/blocks/permission-primer): 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): A dark subscription bundle picker comparing three plans and the services each one includes.
- [Price Care](https://ui.suiss.app/docs/blocks/price-care): 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): 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): 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): 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): 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): 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): 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): Per-app notification settings with a live lock screen preview that reflects each choice.
- [Signup Form](https://ui.suiss.app/docs/blocks/signup-form): 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): 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): 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): 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): 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): 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): 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): 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): A check-your-inbox screen after signup, with open mail and resend actions and a cooldown timer.