Skip to content

UI components

Copy-paste UI, or prompt your AI builder.

Responsive, accessible React + Tailwind components. Preview them live, copy the code into your project, or copy the matching prompt into v0, Lovable, Bolt, Claude or Cursor to generate your own version.

Hero

Centered hero with email capture

Centered landing hero with announcement pill, headline, inline email capture with validation and a row of customer logos.

Split hero with product mock

Two-column hero with copy, checklist and CTAs on the left and a browser-window dashboard mock built entirely from divs on the right.

Dark gradient hero

Bold dark hero with a blurred multi-colour glow, gradient-text headline, pill buttons and avatar-stack social proof.

Features

Feature grid with icons

Six-item feature grid with tinted icon tiles, short titles and descriptions under a centered section heading.

Bento feature grid

Asymmetric bento grid of feature cards: a large colored hero tile with chat bubbles, a tall channel list and two compact tiles.

Alternating feature rows

Zig-zag feature section where copy and a gradient UI mock swap sides on each row, with checklists under every description.

Pricing

Three-tier pricing with billing toggle

Three pricing cards with a monthly/yearly segmented toggle, highlighted popular plan, feature checklists and per-plan CTAs.

Pricing comparison table

Feature-by-plan comparison table with grouped rows, check and dash icons, a highlighted middle plan and horizontal scroll on mobile.

Single plan pricing card

One-plan pricing card with an included-features list on the left and a dark price panel with trial CTA and guarantee on the right.

Testimonials

Testimonial wall

Masonry wall of customer quotes with star ratings and gradient initial avatars, flowing into one, two or three columns.

Testimonial spotlight

Single large customer quote with avatar, company wordmark and three outcome metrics underneath.

Call to action

Gradient CTA banner

Rounded indigo-to-violet call-to-action banner with decorative circles, headline, supporting copy and two buttons.

App download CTA

Dark split call-to-action promoting a mobile app, with store buttons on one side and a phone mock built from divs on the other.

Stats

Stats row

Four big-number statistics in a hairline-divided grid with labels and small context notes, for trust sections.

KPI cards with sparklines

Four dashboard KPI cards showing value, trend badge and an inline SVG sparkline with area fill, colored by good or bad change.

FAQ

FAQ accordion

Accessible single-open FAQ accordion with rotating chevrons, proper aria-expanded and region wiring, and a support link.

Two-column FAQ

Static FAQ with a sticky-style intro column and a two-column description list of questions and answers, no JavaScript.

Cards

Product cards

E-commerce product cards with gradient image placeholder, badge, wishlist button, rating, sale price and add-to-cart action.

Profile card

User profile card with gradient cover, initials avatar, verified badge, availability pill, skills, stats and follow/message buttons.

Blog post cards

Three blog post cards with gradient cover art, category tag, reading time, clamped excerpt and author footer.

Forms

Contact sales form

Two-panel contact form with company info, labelled fields, select, textarea, consent checkbox and a success state on submit.

Newsletter signup with validation

Newsletter signup card with inline email validation, error and loading states, and a success confirmation message.

Multi-step form

Three-step onboarding wizard with a numbered progress stepper, back and continue buttons, radio plan cards and a completion state.

Auth

Sign-in card

Centered sign-in card with SSO button, divider, email and password fields with show/hide toggle, remember me and loading state.

Sign-up with password strength

Sign-up card with live password strength meter, four rule checklist, show/hide toggle and a submit button gated on strength.

Dashboard

Dashboard sidebar layout

App shell with a sidebar nav and count badges, top bar with search, notifications and avatar, and a greeting with summary tiles.

Analytics overview

Web analytics overview with grouped bar chart from divs, traffic source stacked bar with legend and a top pages list with deltas.

Activity feed

Vertical activity timeline with colored event icons, connecting line, actor and target links, an inline comment quote and timestamps.

Settings tabs

Accessible settings page with keyboard-navigable tabs, form fields, toggle switches and a billing summary panel.

Tables

Sortable data table

Customer data table with clickable sortable column headers, aria-sort, status badges, right-aligned currency and horizontal scroll.

Team members table

Team management table with avatar and email cells, colored role badges, active-now indicator, row action menus and invite button.

Feedback

Alert banners and toast

Info, success, warning and error alert banners with icons, optional actions and dismiss buttons, plus a dark undo toast.

Empty state

Dashed-border empty state with a layered icon illustration, helpful copy, primary and secondary actions and a help link.

Confirmation modal dialog

Destructive-action modal with backdrop, focus trap, Escape to close, focus return and type-to-confirm input gating the delete button.

Blog & content

Blog article layout

Readable long-form article template with back link, title, lede, author bar with actions, diagram header, prose, quote, code and tags.

Changelog timeline

Product changelog as a vertical timeline with dates in a side gutter on desktop, version chips and New/Improved/Fixed tags.

E-commerce

Shopping cart with summary

Cart with quantity steppers, remove buttons, a free-shipping progress bar and a live order summary with tax and total.

Product detail with variant picker

Product detail page with gallery placeholder, rating, color swatches, size selector with sold-out state and add-to-bag feedback.

Checkout order summary

Checkout sidebar card with line items, applied discount code, cost breakdown, total and a secure pay button with trust notes.