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.
Marketing categories
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.
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.
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.
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.
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.