Logo

Blocks

Pre-built, complex component compositions that demonstrate real-world usage patterns. Install these blocks via CLI to quickly scaffold complete UI patterns in your wireframe mockups.

Hero Section
Landing page hero with badge, heading, CTA buttons, and feature list

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/hero-section.json

Components

buttontextheadingbadgemediastackicons
Login Form
Authentication form with email/password inputs and social login options

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/login-form.json

Components

buttoncardinputlabeltextseparatorcheckboxicons
Register Form
Multi-step registration with tabs for personal and account information

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/register-form.json

Components

buttoncardinputlabeltextcheckboxtabsicons
Contact Form
Professional contact form with name, email, subject, and message fields

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/contact-form.json

Components

buttoncardinputlabeltexttextareaselecticons
Dashboard
Admin dashboard with stat cards, charts, recent activity, and data table

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/dashboard.json

Components

cardtextchartbadgetableavataricons
Pricing
Three-tier pricing cards with features and highlighted popular plan

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/pricing.json

Components

buttoncardtextbadgeseparatorheadingicons
Product Grid
E-commerce product listing with search, filters, and product cards

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/product-grid.json

Components

cardtextbadgebuttonmediaheadingselectinputicons
Profile Page
User profile with avatar, bio, stats, and tabbed content

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/profile-page.json

Components

cardtextbadgebuttonavatarseparatortabsmediaitemicons
Settings Page
Multi-tab settings interface for profile, account, and notifications

Installation

pnpm dlx shadcn@latest add https://wireframe-ui.vercel.app/r/settings-page.json

Components

buttoncardinputlabeltextseparatorswitchtabsavatartextareaselecticons