beste-ui

Stat cards that flip in from a back-facing 3D rotation using framer-motion spring physics with staggered timing and perspective depth.

Cards that flip 180 degrees on hover to show answer. Interactive 3D effect for engaging presentation.

Interactive flip cards with 3D rotation effect showing icon and title on front, detailed features and CTA on back. Perfect for showcasing service offerings or capabilities.

Immersive 3D carousel with stacked cards, smooth transitions, depth effects, and navigation controls.

Interactive call-to-action card with 3D perspective tilt on mouse move, image background with zoom effect, and a sweeping shine animation on hover.

Permission-denied page for team apps: an accent lock chip and bold headline on the left, the signed-in account card with an account switch link and a square-bullet list of access requirements on the right.

Left-aligned 404 for documentation and marketing sites: the requested path is shown struck through in monospace above a did-you-mean box linking to the closest matching page.

Compact bordered 404 card with a circular icon, status label, heading, one-line explanation, and stacked full-width buttons. Sized for app shells and modals as well as full pages.

Card-style 404 panel that echoes the requested URL in monospace, pairs a browser-history back button with link actions, and closes with a support and status link row.

404 page that recovers the visit with a grid of destination cards, each with an icon, title, description, and hover arrow, followed by a centered row of fallback buttons.

Studio 404 that recovers a dead project URL: a square eyebrow and status code over a hairline rule, an accent headline and seal button, then two large project cards with category lines and hover arrow chips.

Blog 404 that turns a dead post URL into reading: centered messaging above a three-up article grid with cover images, category badges, dates, and read times.

Store 404 for dead product URLs: the message and shopping buttons sit above a four-up product grid with square imagery, prices, and optional strikethrough compare-at prices.

Monochrome 404 for a renamed article: a display headline and pill call to action above three recent entries, each a full-colour image tile with a plain date line and a bold title.

404 page that counts down to an automatic redirect and calls onRedirect once it reaches zero, with a cancel button that stops the timer and a manual go-now link.

404 page that doubles as a sitemap: left-aligned messaging over four columns of grouped section links, so visitors on a large site can jump straight to the area they wanted.

Search-first 404 page: a controlled search field with a submit handler, plus a bordered list of suggested pages with titles, descriptions, and hover arrows.

Server error page with a square eyebrow and status code over a hairline rule, a bold accent headline, a bordered incident table of reference, timestamp and service rows, and a retry seal button beside a status page link.

About section with eyebrow, stacked stats and a read-more CTA beside a media card with a watch-reel play button.

Podcast overview section with cover art, stats grid (episodes, launch date, listeners, awards), and expandable long description. Perfect for show about pages and media kit sections.

About section on a soft muted card with a monospace parenthetical eyebrow, a bold studio wordmark, a large centered statement, a logos strip, and a four-column stats band.

Centered parenthetical eyebrow and a large statement heading, followed by a three-up row of icon pillars pairing a circular icon with a title and one-line description.

About section: eyebrow label, two-tone heading, two portraits beside a 2x2 stats grid.

An about intro followed by a horizontally scrollable strip mixing image, stat, quote and values cards.

About section with an eyebrow label and read-more action on the left, a bold heading with two side-by-side images on the right, and a four-column stats band below.

Two-column about with a tall image on one side and an eyebrow, heading, description, and 2x2 stats grid on the other.

An academy section with an eyebrow over a hairline rule, a two-column heading, and three course cards that each float a live progress checklist above a category, title, and lesson count.

Stats cards with a colored top border accent, icon, value, label, and description. Great for highlighting platform capabilities.

Card with colored accent left border and inline call-to-action. Perfect for attention-grabbing inline conversion prompts.

Lists allowed and prohibited usage of a service or platform with check and cross icons. Includes a violation reporting section. Suitable for SaaS, hosting, and community platforms.

A permissions error that names the missing role, lists the people who can grant it with their portraits, and floats a live access request card on an image tile beside the copy.

Shows WCAG conformance level, accessibility features, and issue reporting options. Perfect for demonstrating commitment to digital accessibility standards.

Expandable accordion sections with category headers and checkmark-style feature lists in a two-column grid. Perfect for organized feature overviews and pricing page inclusions.

Interactive feature section with an eyebrow, big heading and description above a two-column layout: a single-collapsible accordion of feature items on the left and a sticky image on the right that swaps to the active item's image on click.

Collapsible accordion changelog where each release expands to reveal description and change list.

Interactive accordion layout where each step expands to reveal detailed instructions and action buttons. Perfect for setup guides that let users complete tasks at their own pace.

Accordion on the left, swappable media surface on the right. Each row picks its own media kind: image, video, or live registry-component asset.

Accordion on the left, swappable workflow asset on the right. Each row picks its own piece: trigger pair, step config, approval gate, or test run.

Full-height account picker that lists saved accounts with avatars, names, and emails, plus a use-another-account row. Perfect for multi-account apps, SSO hubs, and returning-user sign-in.

Full-height lockout screen shown after too many failed attempts, with a live mm:ss countdown, a retry button that unlocks when the timer ends, and a reset-password link. Perfect for rate-limited sign-in protection.

A settings dashboard with a vertical section nav that live-switches panels: an editable profile, security with a two-factor toggle and active sessions, notification switches, a billing panel with plan/payment/invoices, and a team list with per-member role selects.

Full-height onboarding step where the user picks an account type from selectable radio cards with icons and descriptions, then continues. Perfect for tailoring sign-up flows by persona or plan.

Collection intake listed year by year with a summary beside each set of works, opening a viewer that scrolls rather than steps: every acquisition is a snap section and the header counter follows whichever fills the screen.

2-column grid of action cards with descriptions and CTA buttons. Great for quick actions, getting started steps, or primary user journeys.

Security settings card showing active login sessions with device icons, browser info, location, and sign-out controls. Perfect for account security settings pages.

Tours and experiences booking card with hero image overlay, rating, duration, difficulty badge, date picker, traveler counter, language selector, highlights list, and reserve CTA. Perfect for guided tours, classes, and local experiences.

Vertical timeline showing posts, photos, comments, follows, shares, and videos with color-coded icons. Perfect for activity feeds and user history pages.

A use case with an eyebrow over a hairline rule, a two-column heading, and three image tiles that each float a live appointment card above a title and description.