Building Blocks for the Web
Clean, modern building blocks built from the components. Copy and paste into your apps. Works with all frameworks. Open Source. Free forever.
All categories
login-01
A simple, centered login form with email and password fields. Use as the starting point for an authentication page.
login-02
A two-column login page: form on one side, a decorative panel on the other. Use as an alternative, more spacious authentication page layout.
signup-01
A simple, centered signup form with name, email, password and confirm password fields. Use as the starting point for a registration page.
dashboard-01
A dashboard with a sidebar, stat cards, an interactive area chart and a data table. Use as the starting point for an admin or analytics app-shell.
login-03
A centered login card with GitHub and Google provider buttons, an 'or continue with' divider, and email/password fields. Use for an authentication page with social sign-in.
pricing-01
A responsive three-tier pricing section with a featured plan, feature checklists and per-plan calls to action. Use on a marketing or upgrade page.
stats-01
A row of four KPI stat cards with values and trend deltas. Use as the header of a dashboard or analytics overview.
faq-01
A centered FAQ section built on the accordion, with a heading and a contact prompt. Use on a marketing, pricing or support page.
cta-01
A bordered, centered call-to-action band with a headline, supporting copy and two buttons. Use to close a landing page.
contact-01
A centered contact form card with name, email and message fields. Use as a standalone contact page or a section.
hero-01
A centered marketing hero with a badge, a large display headline, supporting copy and two calls to action. Use as the top of a landing page.
testimonials-01
A grid of testimonial cards with quotes and avatars (initials fallback). Use as social proof on a marketing page.
settings-01
A settings card with profile fields, notification switches and save/cancel actions. Use as an account or preferences page.
signup-02
A two-column signup page: decorative panel on one side, name/email/password form on the other. Use as a spacious registration page.
feature-grid-01
A responsive grid of feature cards, each with an icon, title and description. Use to showcase product capabilities on a landing page.
chat-01
A chat card with a contact header, a scrollable message thread with user/agent bubbles, and a working message input. Use for support chat or messaging UIs.
team-01
A team management card listing members with avatars and per-member role selects, plus an invite-by-email row. Use in settings or workspace admin pages.
products-01
A products data table with live search, status badges, per-row action menus and responsive columns. Use for catalog, inventory or CRUD list pages.
dashboard-02
An analytics overview: a KPI stat row above a responsive grid that composes the interactive area chart, a stacked bar chart, a donut and a KPI ring. Use as an analytics landing page.
onboarding-01
A multi-step onboarding card with a numbered step indicator, a progress bar and per-step form fields, plus Back/Continue navigation. Use as a first-run setup flow.
hero-01-animated
The animated twin of hero-01: the same centered marketing hero, revealed as a staggered fade-up on mount. Drop-in replacement — same Hero export. Built on the motion engine (tw-animate-css), respects prefers-reduced-motion.
stats-01-animated
The animated twin of stats-01: the KPI values count up on mount and the cards cascade in as a staggered fade-up. Drop-in replacement — same Stats export. Built on the motion engine and the useCountUp hook, respects prefers-reduced-motion.
feature-grid-01-animated
The animated twin of feature-grid-01: the heading reveals first, then the feature cards cascade in as a staggered fade-up on mount. Drop-in replacement — same FeatureGrid export. Built on the motion engine (tw-animate-css), respects prefers-reduced-motion.
kanban-01
A three-column kanban board (to do / in progress / done) with cards you drag between columns, using native HTML5 drag-and-drop — no dependencies. Columns show a live count and highlight while a card is dragged over them. Use as the base for a task board or pipeline view.
cart-01
An e-commerce cart: line items with a thumbnail, variant, per-line quantity stepper and remove action, plus an order summary card (subtotal, free-over-threshold shipping, total) and a checkout button. Totals recompute live. Use as the cart page of a storefront.
checkout-01
A two-column checkout: contact, shipping address and payment form fields on one side, an order summary (line items, subtotal, shipping, tax, total) with a Pay button on the other. Use as the checkout page of a storefront.
product-detail-01
A product detail page: an image gallery with selectable thumbnails, title, rating, price and description, a size selector, a quantity stepper and an add-to-cart button whose total updates with quantity. Use as a storefront product page.
admin-orders-01
An e-commerce back-office dashboard: a KPI row (revenue, orders, AOV, refunds with deltas) over an orders table with customer avatars, status badges, per-row actions, live search and status filter tabs. Use as the admin panel of a storefront.
admin-reservations-01
A reservations back-office dashboard: a KPI row (today's bookings, guests, occupancy, no-shows) over a bookings table with guest avatars, resource, time, party size, confirmed/held/cancelled status badges, per-row actions, live search and status filter tabs. Use as the admin panel of a booking system.
admin-analytics-01
An e-commerce analytics overview: a KPI row (revenue, orders, conversion, sessions), a monthly revenue area chart and a top-products-by-revenue breakdown with share bars. Use as the analytics tab of a store admin.
admin-customers-01
A customers back-office view: a KPI row (total customers, new this month, repeat rate) over a customers table with avatars, order count, lifetime spend, last order, active/new/churned segment badges, per-row actions and live search. Use as the customers tab of a store admin.