7Ovr — 74 React Components, Preview & Copy

Also in the 7Ovr registry

Copy a prompt for your agent, copy the install command, or open the docs that ship it.

Mission Statement With Stats

about-1

Centered about us intro built on a mission statement, with an eyebrow badge and a four-metric strip for founding year, customers, countries, and team size.

@base-ui/react1 file

Founder Story With Photo

about-2

Two-column company story pairing a grayscale team photo with a founding narrative and a three-metric row for teams, uptime, and countries.

@base-ui/react1 file

Values Card Grid

about-3

Company values and principles laid out as a bordered grid of icon cards, each with a principle title and a short explanation.

@base-ui/react1 file

Mission Vision Values Columns

about-4

Mission, vision, and values presented as three editorial columns, each with an icon, eyebrow label, heading, and short paragraph.

@base-ui/react1 file

Assistant Thread With Timestamps

ai-chat-1

AI assistant chat interface with user and assistant bubbles, avatars, message timestamps, auto-following scroll, and a single-line composer.

@base-ui/react1 file

Chat With Suggested Prompt Start

ai-chat-2

AI chat opening on a suggested-prompt empty state, then switching to a message thread once a prompt is sent, with a multi-line composer.

@base-ui/react1 file

Live Chat With Typing Indicator

ai-chat-3

AI chat that replies live, showing a shimmering typing indicator, suggestion chips, and a textarea composer with keyboard shortcut hints.

@base-ui/react1 file

Dismissible Bar And Callout

announcement-1

Dismissible top announcement bar above a centered release callout card with a What's New badge, headline, and two call-to-action buttons.

@base-ui/react1 file

Product Update Card

announcement-2

Product update announcement card with a New badge and version label, feature headline, supporting detail, release date, and a link button.

@base-ui/react1 file

Persisted Dismissible Banner

announcement-3

Single-line announcement banner that remembers its dismissal in localStorage over a page placeholder, with a link to show it again.

@base-ui/react1 file

Sale Countdown Promo Bar

announcement-4

Sticky promo announcement bar with a live sale countdown ticking days, hours, minutes, and seconds beside a shop the sale button.

@base-ui/react1 file

Sidebar Dashboard Shell

app-shell-1

App shell pairing a collapsible sidebar with a top bar carrying search, notifications, and a user menu, over a dashboard of revenue and user stat cards.

@base-ui/react1 file

Top Bar Only With Tabs

app-shell-2

Sidebar-free app shell with a sticky top bar (logo, search, avatar menu) above tabbed content holding project cards, a task checklist, and an activity feed.

@base-ui/react1 file

Centered Blog Post

article-1

Blog post article with a category badge, author byline and read time, cover image, prose body with a blockquote, and tag and share footer.

@base-ui/react1 file

Article With Scroll-Spy Contents

article-2

Long-form article with a sticky table of contents sidebar that scroll-spies and highlights the active section, collapsing to one column on mobile.

@base-ui/react1 file

Documentation Page

article-3

Documentation article with breadcrumb navigation, a last-updated line, prose body containing a code block, and previous and next pagination cards.

@base-ui/react1 file

Centered Sign-In Card

auth-1

Sign-in card centered on the page with email and password fields, a remember-me checkbox, forgot-password link, and Google and GitHub login buttons.

zod, @base-ui/react1 file

Split Sign-In With Brand Panel

auth-2

Two-column sign-in pairing a dark brand panel that lists product features with a plain email and password form, no social login buttons.

zod, @base-ui/react1 file

Sign-Up With Plan Sidebar

auth-3

Sign-up form paired with a plan sidebar listing Free, Pro, and Team tiers, first and last name fields, and a terms checkbox gating submit.

zod, @base-ui/react1 file

Full-Height Split Sign-In

auth-4

Full-height split-screen sign-in with email, password, remember-me, and Google or GitHub buttons beside a dark marketing panel on a grid backdrop.

zod, @base-ui/react1 file

Tabbed Sign-In And Sign-Up

auth-5

Auth card with tabs that swap between sign-in and sign-up forms, validated per tab, plus Google, GitHub, and Apple social buttons.

zod, @base-ui/react1 file

Forgot Password Request

auth-6

Forgot-password card that validates an email, then switches to a check-your-inbox confirmation with a use-another-email option and back-to-sign-in link.

@base-ui/react1 file

Set New Password With Rules

auth-7

Reset-password card with new and confirm fields plus live requirement checks for length, uppercase, number, and match, ending in a success state.

@base-ui/react1 file

Icon Bento With Hero Tile

bento-1

Bento grid of feature cards where one tile spans two columns and rows, each carrying an icon, title, and short capability description.

@base-ui/react1 file

Equal Four-Tile Bento

bento-2

Bento grid of four identically sized tiles under a centered heading, each with a square icon, category badge, title, and one-line description.

@base-ui/react1 file

Divided Bento With Terminal Snippet

bento-3

Bento grid divided by hairline borders, led by a build-pipeline tile with a terminal snippet, plus an uptime stat and language tags.

1 file

Bento With Static Chart Visuals

bento-4

Bento grid whose hero automation tile carries a bar-chart visual, with supporting tiles showing deploy times, progress bars, and headline numbers.

@base-ui/react1 file

Current Plan Summary Card

billing-1

Current-plan billing card with monthly price, renewal date, a seat usage bar, and a dialog of radio tiers for switching plans.

@base-ui/react1 file

Invoice History Table

billing-2

Invoice history table with checkbox selection, status badges, per-row download links, and a bulk download of the selected billing invoices.

@base-ui/react1 file

Full Billing Dashboard

billing-3

Billing page combining a plan summary, storage usage bar, payment method card, and a sortable, paginated invoice table.

@tanstack/react-table, @base-ui/react1 file

Usage Metering Card

billing-4

Usage metering card with progress bars for seats, storage, API requests, and bandwidth, plus an estimated billing total for the cycle.

@base-ui/react1 file

Saved Payment Methods

billing-5

Payment methods list of saved cards with a default badge, set-default and remove actions, and an add-card dialog.

@base-ui/react1 file

Add Card Form

billing-6

Add payment method form with name, card number, expiry, CVC, a country select, and a set-as-default switch.

@base-ui/react1 file

Three Card Post Grid

blog-1

Blog post grid of three cards with cover images, category badges, titles, excerpts, read time, and author avatars.

@base-ui/react1 file

Divider Separated Post List

blog-2

Blog post list of five articles as divider-separated rows with category badge, date, title, excerpt, and author, with no cover images.

@base-ui/react1 file

booking-1

button, field, input, select

Month Grid With Day Detail

calendar-1

Month calendar grid with previous and next navigation, a Today shortcut, selectable days, and a detail panel for the chosen day's event.

@base-ui/react1 file

Weekly Agenda View

calendar-2

Weekly agenda calendar listing Monday to Sunday with time-slotted event rows, confirmed, tentative, and cancelled status colors, and week navigation.

@base-ui/react1 file

Month And Week Toggle

calendar-3

Calendar with a month and week view toggle, previous and next navigation, event chips on days, and an inline day panel.

@base-ui/react1 file

Open Roles By Department

careers-1

Open positions list grouping job roles by department, each row showing the title, location, and employment type with an apply link.

@base-ui/react1 file

Culture And Benefits Page

careers-3

Careers culture page selling life at the company with a photo strip, a three-up values grid, a perks and benefits row, and a closing call to action.

@base-ui/react1 file

Version Rail Release Notes

changelog-1

Changelog with a date and version rail on the left and Added, Improved, and Fixed change groups bulleted on the right.

@base-ui/react1 file

In-App What's New Card

changelog-3

Compact what's new card with a version pill, release date, highlighted changes with type icons and badges, and a full changelog link.

@base-ui/react1 file

Vertical Release Timeline

changelog-4

Changelog as a vertical timeline with a connected dot rail, each release showing a version badge, date, title, and color-coded changes.

@base-ui/react1 file

Traffic Range Switcher

charts-3

Stacked area chart of visitors and signups with a legend, hover tooltip, and a 7d, 30d, or 90d range select that swaps the dataset.

recharts, @base-ui/react1 file

Direct Message Thread

chat-1

One-to-one chat conversation with a contact header, sender-aligned message bubbles, a date marker, auto-follow scrolling, and a working composer.

@base-ui/react1 file

Inbox Messenger Layout

chat-2

Two-pane chat messenger with a selectable conversation list beside the active thread, each conversation keeping its own messages, plus a composer.

@base-ui/react1 file

Support Chat Widget

chat-3

Customer support chat widget with an agent header, a system marker, quick-reply chips, and a working composer in a compact help-desk panel.

@base-ui/react1 file

Group Chat Panel

chat-4

Group chat conversation with a member avatar stack header, messages from multiple named senders with per-sender avatars, and an online indicator.

@base-ui/react1 file

Split Waitlist With Preview

coming-soon-2

Coming soon split layout pairing a waitlist email form and signup count with a framed browser mockup previewing the product.

@base-ui/react1 file

Launch Progress Milestones

coming-soon-5

Coming soon screen with a launch progress bar and Design, Beta, and Launch milestone labels above a waitlist email form with a success state.

@base-ui/react1 file

Command Dialog With Shortcuts

command-palette-1

Command palette dialog opened from a Ctrl+K trigger button, listing grouped navigation and action commands with keyboard shortcut hints.

@base-ui/react1 file

Palette With Recent Items

command-palette-2

Command palette dialog with a Recent section of timestamped files and pages above categorized results, and a footer bar of keyboard hints.

@base-ui/react1 file

Cmd+K Searchable Palette

command-palette-3

Command palette wired to a global Cmd+K listener, opening a searchable dialog of grouped commands with Kbd shortcuts and a last-action readout.

@base-ui/react1 file

Palette With Preview Pane

command-palette-4

Inline two-column command palette with a searchable grouped result list beside a live preview pane for the highlighted item and its primary action.

@base-ui/react1 file

Two-Plan Table With Billing Toggle

comparison-1

Plan comparison table pitting Starter against Pro across grouped feature rows, with a monthly and annual toggle that changes the price and cell values.

@base-ui/react1 file

Named Competitor Table

comparison-4

Comparison table setting your product against Notion, Trello, and Asana across grouped feature rows with check, cross, or value cells.

@base-ui/react1 file

Contact Details And Form

contact-1

Contact section pairing email, phone, and office details with a message form using a topic select and toast confirmation.

@base-ui/react1 file

Single Card Contact Form

contact-2

Centered contact form card with split first and last name fields, topic select, message textarea, and a privacy consent checkbox.

@base-ui/react1 file

Contact With Office Locations

contact-3

Contact section with a message form beside a static map placeholder and address cards for the San Francisco, Berlin, and Singapore offices.

@base-ui/react1 file

Bottom Cookie Bar

cookie-consent-1

Cookie consent bar fixed to the bottom of the page with accept all and decline buttons and a cookie policy link.

@base-ui/react1 file

Corner Consent Card

cookie-consent-2

Cookie consent card pinned to the bottom left corner with accept all, reject, and preferences actions under a privacy heading.

@base-ui/react1 file

Cookie Preferences Panel

cookie-consent-3

Cookie preferences panel with switches for necessary, analytics, and marketing categories, plus save preferences and reject all buttons.

@base-ui/react1 file

Centered CTA Band

cta-1

Centered call to action section band with a heading, supporting copy, primary and secondary buttons, and a no credit card note.

@base-ui/react1 file

Inverted Banner CTA

cta-3

Full-width call to action banner on the primary color, heading and subtext left, single high-contrast button right.

@base-ui/react1 file

Email Capture CTA

cta-4

Call to action section with an inline email capture form, a submitted confirmation line, and a no spam privacy note.

@base-ui/react1 file

App Download CTA

cta-6

App download call to action section with App Store and Google Play buttons for the iOS and Android mobile apps.

1 file

Dashboard

Logged-in dashboard app template with a collapsible sidebar and command palette top bar wrapping stat cards, an interactive area chart, and a sortable, paginated data table.

@tanstack/react-table, recharts, @base-ui/react5 files

Overview With Range Select

dashboard-1

Analytics overview dashboard where a date-range select drives four stat cards above a monthly sessions bar chart.

recharts, @base-ui/react1 file

KPI Cards And Activity Feed

dashboard-2

Dashboard pairing four KPI cards carrying trend badges with a full-width recent activity feed of avatars, events, status badges, and timestamps.

@base-ui/react1 file

Flush Six Metric Strip

dashboard-3

Compact KPI strip of six metric tiles in a flush grid, each with label, value, and directional delta, switched by a quarter select.

@base-ui/react1 file

Overview With Recent Orders

dashboard-4

Dashboard overview pairing a four-metric KPI row with a recent orders table of customer avatars, status badges, and amounts.

@base-ui/react1 file

Illustrated Inbox Panel

empty-states-2

Empty inbox panel with a framed inbox illustration, a create-workspace dialog with a name field, a Learn More link, and a support footer.

@base-ui/react1 file

No Search Results

empty-states-3

No results found empty state for a filtered search, with a magnifier icon, guidance copy, and a Clear Filters action in a bordered card.

@base-ui/react1 file

First Project Prompt

empty-states-5

First-run empty state prompting users to create their first project, with New Project and Import buttons and a three-tip getting-started row.

@base-ui/react1 file

Oversized 404 Numeral

error-6

404 not found page led by a display-sized 404 numeral, a friendly headline, short copy, and go home plus go back buttons.

@base-ui/react1 file

Centered FAQ Accordion

faqs-1

FAQ accordion centered under a heading, with five collapsible questions covering plans, plan changes, free trials, billing, and data security.

@base-ui/react1 file

Two-Column FAQ Accordion

faqs-2

FAQ split into two balanced accordion columns of eight product questions, separated by border rules under a bordered header.

@base-ui/react1 file

FAQ With Contact Support Card

faqs-3

FAQ accordion beside an intro column holding a contact-support card whose dialog collects an email and message, confirmed by a toast.

@base-ui/react1 file

FAQ With Sticky Support Sidebar

faqs-4

FAQ accordion with a sticky sidebar card offering contact support in a dialog and a link to browse documentation.

@base-ui/react1 file

Searchable FAQ With Category Tabs

faqs-5

Help-center FAQ section with a live search input and General, Billing, and Security tabs showing match counts plus an empty state for no results.

@base-ui/react1 file

Six Card Icon Grid

features-1

Features grid of six icon cards, each with a short title and one line of supporting copy, in a three-column layout.

@base-ui/react1 file

Everything Included Checklist

features-3

Features checklist in two columns listing twelve check-marked capabilities (SSO, audit log, uptime SLA) with one-line descriptions, no cards or images.

1 file

Security Feature Spotlight

features-5

Single-feature spotlight pairing a headline, copy, and four-item checklist with a static security settings panel mock of labeled toggles.

@base-ui/react1 file

Dropzone With Upload Progress

file-upload-1

File upload card with a drag-and-drop dropzone and an attachment list showing a spinner per file while uploading and a check when finished.

@base-ui/react1 file

Inline File Field

file-upload-2

Compact inline file upload form field with a bordered Choose File row and one attachment showing the selected file name, size, and remove action.

@base-ui/react1 file

Uploader With Validation Toasts

file-upload-3

Drag-and-drop file uploader enforcing size and type validation, with uploading, done, and error attachment states, toasts, and per-file remove.

@base-ui/react1 file

Image Gallery Uploader

file-upload-4

Image gallery uploader with a responsive thumbnail grid, a cover badge on the first photo, hover remove buttons, an upload tile, and an image count.

@base-ui/react1 file

Brand Blurb With Link Columns

footer-1

Site footer pairing a brand mark and tagline with three link columns and GitHub, X, and Discord social buttons.

@base-ui/react1 file

Slim Single Bar

footer-2

Compact single-bar footer with a brand mark and tagline, an inline row of nav links, and a copyright notice in one slim row.

@base-ui/react1 file

Call To Action Footer

footer-5

Footer led by a call to action band with heading and button, above brand and sitemap columns and a social bottom bar.

@base-ui/react1 file

Filterable Photo Grid

gallery-1

Image gallery grid with tag filter toggles, hairline-gap tiles, hover overlays naming the contributor and location, and a lightbox dialog per photo.

@base-ui/react1 file

Product Screenshot Showcase

gallery-2

Product screenshot gallery section with a large browser-framed image, version badge and caption, plus a five-thumbnail strip that swaps the featured screen.

@base-ui/react1 file

Masonry Column Gallery

gallery-3

Masonry image gallery section built on CSS columns with varied-ratio tiles, tag filters, hover caption overlays, and a lightbox dialog per photo.

@base-ui/react1 file

Full Width Bar With CTA

header-1

Site header spanning the full width with a logo, inline navigation links, a call-to-action button, and a mobile menu sheet.

@base-ui/react1 file

Capsule Nav Header Without A CTA

header-14

Header with the wordmark on the left and the navigation collected into one muted capsule on the right, with a sliding active pill and no call to action.

motion, @base-ui/react1 file

Product Dropdown Menu

header-4

Header with a Product navigation menu dropdown listing Analytics, Automations, and Integrations, plus inline links, sign-in and CTA buttons, and a mobile sheet.

@base-ui/react1 file

Centered Hero With Trust Logos

hero-1

Centered hero section with a beta badge, headline, dual call-to-action buttons, and a trusted-by row of five plain-text company wordmarks.

@base-ui/react1 file

Split Hero With Dashboard Mockup

hero-2

Split two-column hero section pairing copy and a watch demo dialog with an analytics dashboard mockup of stat cards, a bar chart, and a channel table.

@base-ui/react1 file

Left-Aligned Hero With Metrics

hero-3

Left-aligned hero section with a release badge, headline, signup and docs CTAs, and an inline row of three icon metrics split by vertical separators.

@base-ui/react1 file

Grid Backdrop Email Capture

hero-4

Centered hero section over a masked grid and radial glow, with a beta badge and an inline email capture form that toasts on submit.

@base-ui/react1 file

Hero With Demo Video Dialog

hero-5

Centered hero section whose Watch Demo button opens a video dialog, above a trusted-by strip of five icon and wordmark company logos.

@base-ui/react1 file

Hero With Avatar Social Proof

hero-6

Centered hero section led by a clickable announcement pill, with dual CTAs and social proof: an overlapping avatar stack, five stars, and a trusted-by line.

@base-ui/react1 file

Three Step Icon Cards

how-it-works-1

How it works row of three numbered step cards, each with an icon tile, a title, and one line of supporting copy under a centered heading.

@base-ui/react1 file

Clickable Horizontal Stepper

how-it-works-3

Interactive how it works stepper with clickable steps along a progress line that fills to the active step, stacking vertically on mobile.

@base-ui/react1 file

Zig-Zag Steps With Mockups

how-it-works-4

How it works section of three alternating rows, each pairing a numbered step, description, and checklist with a mock UI preview panel on the opposite side.

@base-ui/react1 file

Compact Logo Tile Grid

integrations-2

Dense grid of 18 service logo tiles with category toggle filters, each tile opening a connect dialog for that integration.

@base-ui/react1 file

Searchable App Directory

integrations-3

Searchable integrations directory with a search input, category filter pills, and result cards that open a per-app connect dialog.

@base-ui/react1 file

Connection Toggle Settings

integrations-4

Settings-style integrations grid where each app card has a switch to connect or disconnect, with category badges and a live connected count.

@base-ui/react1 file

Split Logo Grid With CTA

integrations-5

Split integrations section pairing a headline, copy, and browse CTA with a bordered six-logo grid of tools teams already use.

@base-ui/react1 file

Single In Progress Column

kanban-2

Single In Progress kanban column of sortable rich task cards showing priority, labels, a due date, and a stacked assignee avatar group.

@dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities, @base-ui/react1 file

Four Column Project Board

kanban-3

Project kanban board with To Do, In Progress, Review, and Done columns, per-column counts, and drag and drop reordering across columns.

@dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities, @base-ui/react1 file

Personal Task Lanes

kanban-4

Personal my-tasks kanban with Today, This Week, and Later lanes of compact rows you drag and drop to reprioritize.

@dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities1 file

location-1

location-2

Integrations Logo Grid

logo-cloud-2

Integration logo grid of twelve brand marks in muted cells, each showing an icon and name, beneath a heading and subtext.

1 file

Logo Grid With Tooltips

logo-cloud-4

Logo grid of ten muted brand marks that brighten on hover and reveal the company name in a tooltip.

@base-ui/react1 file

Minimal Trust Strip

logo-cloud-5

Single row logo strip of six brand wordmarks under a trusted-by label, highlighting on hover, with no borders or cards.

1 file

menu-2

Signup Card With Form States

newsletter-3

Newsletter signup card driven by a client state machine, cycling idle, loading spinner, success, and inline email validation error states.

@base-ui/react1 file

Topic Picker Double Opt-In

newsletter-4

Multi-step newsletter card where readers toggle topic interests, then land on a double opt-in check-your-inbox confirmation step.

@base-ui/react1 file

Newsletter Signup With Social Proof

newsletter-5

Centered newsletter signup led by a subscriber avatar stack, star rating, and reader count, with inline email capture and a success state.

@base-ui/react1 file

Notifications Sheet Panel

notifications-1

Notifications sheet opened from a bell trigger, with icon tiles, unread highlighting, timestamps, an unread count, and a mark all read action.

@base-ui/react1 file

Bell Popover With Badge

notifications-2

Notification bell button carrying an unread count badge that opens a compact popover of avatar rows, mark all read, and a view all link.

@base-ui/react1 file

Notification Preferences Toggles

notifications-4

Notification preferences panel with a row per activity type and separate email and push toggle switches for each.

@base-ui/react1 file

Three-Card Setup Steps

onboarding-2

Onboarding laid out as three numbered step cards for importing data, inviting teammates, and customizing the workspace, each toggling to complete.

@base-ui/react1 file

Detail Header With Back Link

page-header-4

Detail view page header with a back link, status badge, owner avatar and created date metadata, a contributor avatar stack, and share and edit actions.

@base-ui/react1 file

Header With Metrics Strip

page-header-6

Analytics page header with an eyebrow, title, export and settings actions, and an inline four-metric stats strip showing deltas.

@base-ui/react1 file

Three Tier Plan Cards

pricing-1

Pricing section with Starter, Pro, and Enterprise cards, a monthly or annual billing toggle, and a ring highlighted Most Popular plan.

@base-ui/react1 file

Two Plan Split Panel

pricing-2

Two plan pricing split into one panel, a filled Pro side beside a plain Starter side, each with price, feature checklist, and CTA, plus a billing toggle.

@base-ui/react1 file

Plan Comparison Table

pricing-5

Static pricing comparison table with plans as columns and grouped feature rows, check and dash cells, a highlighted recommended column, and a CTA row.

@base-ui/react1 file

Public Profile With Tabs

profile-1

Public user profile with a cover banner, overlapping avatar, follower stats, Follow and Message actions, and tabs for posts and about.

@base-ui/react1 file

Compact Profile Card

profile-2

Compact centered profile card with avatar, role, location, a three column stat strip, and Follow and Message buttons for sidebars or directories.

@base-ui/react1 file

Organization Profile Card

profile-3

Company profile card with a logo mark, verified badge, stat strip, member avatar stack, and website and contact links.

@base-ui/react1 file

Now Next Later Phases

roadmap-2

Directional roadmap grouped into Now, Next, and Later phases with colored markers, a target month each, progress bars, and vote counts on upcoming items.

@base-ui/react1 file

SaaS Landing

saas-landing

Complete SaaS marketing homepage template assembled from free blocks: hero section, social proof, features, stats, testimonials, pricing, FAQ, and a closing CTA.

next-themes, @base-ui/react12 files

SaaS Landing 2

saas-landing-2

Product-tour SaaS landing page template: hero section with announcement pill, browser-framed gallery, tabbed features, how it works stepper, integrations, comparison, stats, testimonial, pricing, and FAQ.

@base-ui/react14 files

Faceted Docs Search Panel

search-1

Search panel with a query field, a sidebar of type facets with live counts that narrow the list, and results showing title, type badge, and snippet.

@base-ui/react1 file

Search Results Page

search-2

Search results page with a query field, live result count, empty state, and result cards carrying a type badge, snippet, and last updated date.

@base-ui/react1 file

Autocomplete Search Input

search-4

Search input with an autocomplete dropdown of recent searches and keyboard navigable suggestions, an empty state, and a slash to focus hint.

@base-ui/react1 file

Dashboard Rail With Stats

sidebar-1

App layout with a collapsible icon sidebar of grouped navigation beside a dashboard inset of stat tiles and a project listing.

@base-ui/react1 file

Flat Nav With Task Table

sidebar-2

Sidebar with a single flat navigation list (icon, label, badge count) beside a task table showing priority indicators, status badges, and a new-task dialog.

@base-ui/react1 file

Icon Rail With Tooltips

sidebar-3

Collapsible sidebar that shrinks to an icon rail with tooltips, holding grouped navigation, badge counts, and a user footer.

@base-ui/react1 file

Startup

Lean startup landing page template for early-stage products and waitlists: centered hero section with inline email capture, stats, feature grid, how it works timeline, testimonial, and waitlist signup.

@base-ui/react9 files

Bordered Four-Up Stat Band

stats-1

Four-column stats section band framed by separators, each metric pairing a large value and label with a badge showing its percentage change.

@base-ui/react1 file

Minimal Numbers Band

stats-2

Minimal four-up stats row of oversized numbers and short labels under one heading, with no icons, badges, dividers, or secondary copy.

1 file

Stat Cards With Trend Arrows

stats-3

Four bordered stat cards, each with an icon, a metric value, and an up or down trend arrow comparing the figure against last quarter.

1 file

Count-Up Stats On Scroll

stats-4

Four-up stat grid whose numbers count up from zero when scrolled into view, each cell pairing an icon with a growth delta badge.

@base-ui/react1 file

Inverted Stats Panel

stats-5

Stats band on a filled primary-color panel with a heading and four large inverted figures, a high-contrast by-the-numbers section.

1 file

90 Day Uptime Bars

status-3

Uptime history with per-service daily status bars for the last 90 days, colored by health, with uptime percentages and a legend.

1 file

Horizontal Numbered Stepper

steps-1

Horizontal progress stepper with numbered nodes, connectors, and labels across completed, current, and upcoming states for checkout or onboarding.

1 file

Vertical Stepper With Descriptions

steps-2

Vertical stepper on a connecting rail where each step shows a title and description across completed, current, and upcoming states.

1 file

Wizard Progress Bar Header

steps-3

Interactive step wizard header with a step counter, percentage, progress bar, the active step title and description, and back and continue buttons.

@base-ui/react1 file

Product Feedback Questionnaire

survey-1

Four-question product feedback survey card mixing single-choice, multi-select, and freeform answers, with progress and previous, skip, next, and submit controls.

@base-ui/react1 file

Cancellation Exit Survey Dialog

survey-3

Cancellation exit survey in a dialog opened from a plan card, asking a required reason then an optional what would have changed your mind question.

@base-ui/react1 file

Full Page Onboarding Survey

survey-5

Full-page onboarding survey showing one question per screen in oversized type, with letter-key shortcuts and a thin progress bar across the top.

@base-ui/react1 file

Branching Qualification Survey

survey-6

Branching sales qualification survey in a two-column split where the first answer disables questions that no longer apply, tracked by a path rail.

@base-ui/react1 file

Team Members Data Table

table-1

Sortable team members data table with search, checkbox row selection, bulk role and remove actions, status badges, row menus, and pagination.

@tanstack/react-table, @base-ui/react1 file

Hover Reveal Bio Cards

team-3

Four-column grid of eight team member cards that reveal a bio and social links on hover.

@base-ui/react1 file

Bordered Quote Trio

testimonials-1

Testimonials section with three customer quote cards in a hairline-divided grid, each with a quote glyph, avatar, name, role, and company.

@base-ui/react1 file

Wall Of Love Grid

testimonials-3

Wall of love testimonial grid with seven customer quote cards, each carrying a star rating, avatar, name, role, and company.

@base-ui/react1 file

Star Rated Review Cards

testimonials-4

Star-rated testimonial review cards in a responsive grid, each leading with a five-star rating row above the quote and a grayscale avatar.

@base-ui/react1 file

7Ovr contents

Filterable Jobs Board

Job Posting Detail Page

Inline Was This Helpful Survey

Net Promoter Score Survey

Invite Team Onboarding Step

First Run Welcome Screen

Multi Step Setup Wizard

Getting Started Widget

Welcome Checklist Card

Upvotable Roadmap

Article With Author Sidebar

Status Roadmap Board

Magazine Feature With Drop Cap

Quarterly Roadmap Columns

Oversized 404 Numeral

404 Error Page With Actions

Scheduled Maintenance Page

500 Server Error Page

404 Search And Popular Links

Access Denied Error Page

Task Board Kanban

Revenue Bars Chart

Active Users Area Chart

Traffic Range Switcher

7Ovr contents

Filterable Jobs Board

Job Posting Detail Page

Inline Was This Helpful Survey

Net Promoter Score Survey

Invite Team Onboarding Step

First Run Welcome Screen

Multi Step Setup Wizard

Getting Started Widget

Welcome Checklist Card

Upvotable Roadmap

Article With Author Sidebar

Status Roadmap Board

Magazine Feature With Drop Cap

Quarterly Roadmap Columns

Oversized 404 Numeral

404 Error Page With Actions

Scheduled Maintenance Page

500 Server Error Page

404 Search And Popular Links

Access Denied Error Page

Task Board Kanban

Revenue Bars Chart

Active Users Area Chart

Traffic Range Switcher

About 7Ovr

Also in the 7Ovr registry

Mission Statement With Stats

Founder Story With Photo

Values Card Grid

Mission Vision Values Columns

Assistant Thread With Timestamps

Chat With Suggested Prompt Start

Live Chat With Typing Indicator

Dismissible Bar And Callout

Product Update Card

Persisted Dismissible Banner

Sale Countdown Promo Bar

Sidebar Dashboard Shell

Top Bar Only With Tabs

Centered Blog Post

Article With Scroll-Spy Contents

Documentation Page

Centered Sign-In Card

Split Sign-In With Brand Panel

Sign-Up With Plan Sidebar

Full-Height Split Sign-In

Tabbed Sign-In And Sign-Up

Forgot Password Request

Set New Password With Rules

Icon Bento With Hero Tile

Equal Four-Tile Bento

Divided Bento With Terminal Snippet

Bento With Static Chart Visuals

Current Plan Summary Card