beste-ui

A four column board showing the real work in progress, each column stating the rule that lets a piece move on and carrying the linked cards currently sitting in it, with a written state for a column that is empty.

A pay transparency table whose track pills swap the band column while the levels, their scope, and the headcount at each stay in place, closing on the written rules that govern the numbers beside a soft panel carrying the call to action.

Asymmetric two-column layout with heading on the left and question-answer pairs on the right. A conversational way to introduce your company.

Full-height cross-device sign-in with a scannable QR code, a manual fallback code, and a live waiting-for-confirmation indicator. Perfect for signing in on desktop by scanning with a phone app.

A newsroom listing with a square eyebrow, a two-column heading band over a hairline rule, and four equally weighted stories as bordered cards, each linking through a hover-zoom image, a category kicker, a bold headline, a summary, and a byline pinned to the card foot.

An image-free newsroom index with a square eyebrow, a two-column heading band over a hairline rule, four linked release cards that each pair an accent counter with a kicker, headline, dek, and byline, and a seal button to the full archive.

Six-card grid displaying quality metrics with icons, progress bars, and numeric scores for performance, security, and reliability. Perfect for system health dashboards or compliance overviews.

A quarterly results matrix of hairline cells, each pairing a light figure with a signed change tinted by whether the movement is good or bad rather than by its direction, over a line of context.

A two-column ledger pairing the question a reader sent on the left with the thing that was built in response on the right, under column labels that only appear on desktop.

Background job queue monitor showing processed, pending, and failed counts with healthy, warning, and critical status indicators.

A centered showcase with an eyebrow, light heading, and paragraph over a wide image tile that floats a live quick-actions bar, followed by a four-up grid of icon-led action descriptions.

Compact quick news list with bullet points, source attribution, and external link indicators. Perfect for news digests.

Product grid with a left filter sidebar where hovering a card reveals a quick-shop tray with sizes and an add-to-cart button, plus a category tag and sale badge, powered by the shared product-filters engine. Self-fetches from your API via productsUrl with an SSR-friendly first page, runs client-side on a dataset, or emits queries in controlled server mode.

Grid of testimonial cards with decorative quote marks and HTML-supported text highlighting. Perfect for showcasing multiple customer reviews with emphasis on key phrases.

Rotating testimonial quotes with author info and persistent call-to-action buttons. Perfect for social proof that stays fresh.

Large testimonial quote as the hero element with call-to-action buttons below. Perfect for social proof driven conversion.

A hero that gives the display heading over to a customer sentence, credits the speaker beneath it, and evidences the quote with a hairline provenance table before the product line, actions, and a tile floating the figure behind the claim.

Cards with quote icons in corners, arranged in a grid. Elegant design for emphasizing key points with typography.

Masonry column wall of varied-length testimonial cards with avatars.

A testimonial with an eyebrow over a hairline rule, pairing a large light quote and author on the left with an image tile that floats a live star-rating card on the right.

Plan selection using radio button cards with visual selection state. Perfect for checkout flows and single-plan selection interfaces.

Numbered list article with ratings, highlights, and jump navigation. Perfect for top-10 lists and curated recommendations.

Centered grid of star-rated testimonial cards with avatars.

Too-many-requests page with a square eyebrow and status code, an accent headline, three bordered usage cells, and a live cooldown counter that swaps itself for a retry seal button when it reaches zero.

API rate limit monitor with color-coded usage bars per endpoint. Shows current usage, limits, and visual threshold indicators.

Responsive grid of feature review cards with star ratings and review counts. Ideal for feature ratings, user reviews, or quality metrics.

Two long replies set as letters rather than pull quotes, each running at full length on a hairline and signed off with the sender's portrait, where they work and the date it arrived.

Coming soon section with a status dashboard displaying service readiness with color-coded indicators for ready, in-progress, and planned states. Perfect for transparent launch communication.

Three columns keyed to how long the reader has rather than what they want, each opening with the time span, a promise for it, and the two or three pieces that fit inside it.

Local market dashboard showing median home price, days on market, inventory, and year-over-year changes for real estate.

Compact recent-work list of ruled rows, each a link with a small thumbnail, title, year, and an arrow.

Recipe article with ingredients list, step-by-step instructions, prep/cook times, and serving info. Perfect for food blogs and cooking content.

Recipe marketplace with filter chips and a six-card grid. Each card stacks the apps it connects, the installs counter, and a use-recipe CTA.

A wide photographic band with a scrim, floating a live video card in the middle of it, over three hairline notes that state how the recordings are made and what ships with them.

A past events archive leading with an image tile that floats a recording card, then listing every earlier session as linked hairline rows with its date, place, and running time.

Full-height two-factor backup screen that displays single-use recovery codes in a grid with copy and download actions, a warning callout, and a confirmation checkbox that gates the continue button. Perfect for 2FA setup and account recovery.

Full-height account recovery screen with a numbered grid of word inputs and paste-to-fill support, plus a restore button that unlocks once every word is entered. Perfect for seed phrase and recovery-phrase restore flows.

Full-height loading screen shown while redirecting to an identity provider, with a spinner and a manual-continue fallback link. Perfect for SSO and OAuth handoff states.

Referral sharing card with copyable link, referral code, email invite input, and reward information. Perfect for referral programs and invite-a-friend features.

A pre-launch referral leaderboard with a square eyebrow, a heading, and a bordered ranked list of members with avatars and invite counts, one row highlighted as the viewer, above a dark seal share button.

A referral section walking through three numbered steps and the full terms as a hairline table, beside a column that sticks and floats a live credit card on an image tile.

A referral coming-soon section with a centered square eyebrow and heading, a referral progress bar, a list of reward tiers with locked and unlocked states, and a dark seal share button.

Shows refund period badge, eligible conditions, and exclusions with a request button. Perfect for e-commerce stores displaying return and refund terms.

Browser-chrome card hosting a regex playground — pattern + active flag pills up top, test rows with inline match highlights and capture column, summary footer. Every label is editable; no media props required.

Pricing with dropdown region/currency selector showing localized prices. Perfect for global products with regional pricing tiers.

Geo-restriction page: an accent globe chip and headline, the detected region in a bordered strip, a two-column ruled list of markets with their rollout status, and a notify-me seal button.

Color-coded regulatory notices with info, warning, and critical severity levels. Each notice has a colored left border, icon, and detailed content.

Product recommendations grid with images, prices, and add to cart buttons. Perfect for cross-selling and upselling on product pages.