Full page sections — heroes, feature grids, bento layouts, and more. Drop into any React or Framer project.
A foundational hero section with standard CSS variables. Centered layout with badge, heading, subtext, and dual CTA.
A foundational layout built for developers and designers alike. Simplify your workflow.
A grid-based feature layout with icon blocks, headings, and descriptive text.
Every component is designed to bridge the gap between rigorous codebase standards and modern design tooling.
No more disconnected CSS files. Built inline with standard variables for seamless sync.
True component-driven architecture for both your dev environment and Framer workspace.
Fluid topography and flexbox-driven layouts adapt out of the box.
A 3-column feature grid with optional heading and hover micro-interactions.
No more disconnected CSS files. Built inline with standard variables for seamless sync.
True component-driven architecture for both your dev environment and Framer workspace.
Fluid topography and flexbox-driven layouts adapt out of the box.
A 2-column header paired with a prominent visual showcase container.
Turn scattered ideas into polished interfaces with a local component library designed for high-velocity teams.
A 3-column bento-style card layout with integrated expandable wireframe modals.
A two-column hero with text on the left and a visual element on the right.
A local-first component library that bridges React and Framer. Write once, deploy everywhere.
Large display numbers in a horizontal bar with dividers. Thin weight for impact.
A vertical timeline with numbered steps, connector lines, and description blocks.
Three steps from code to production.
Build components in your IDE using standard React, TypeScript, and inline styles. No lock-in.
Use the local dashboard to visualize, tweak props, and test across viewports in real time.
Export raw source for React/Next.js or bundle as a single .framer.tsx for Framer — one click.
A bordered card with headline on the left and action buttons on the right.
Start shipping production-ready components in minutes. No configuration required.
A clean footer with optional navigation columns, brand mark, and legal links.
A hero with radial gradient background, announcement badge, and dual ghost CTA buttons. Center or left-aligned variants.
Linear-style split heading/description row with a full-width showcase visual below.
Stop stitching together disconnected design systems. Frameium gives every engineer and designer a single, typed source of truth — running locally, versioned in Git, and visual in Framer.
2×2 bordered grid of numbered feature cards with hover state. Clean and structural.
Partner and customer logo strip with a static grid or scrolling ticker variant.
Trusted by teams at
Accent-bordered testimonial grid with quote, author, role, and optional avatar.
Frameium cut our component handoff time in half. We write it once and it just works in Framer.
Finally — a design system that doesn't fight you. The inline style pattern is genius for AI-assisted workflows.
Our team went from 3-day component cycles to same-day. Frameium is genuinely transformative.
The best component library I've worked with. Clean, typed, and the preview dashboard is 🔥
Tab navigation that switches between feature content panels. Linear-style numbered tabs.
One unified workflow from local development to production deployment.
Build your component library in your IDE using standard React and TypeScript. Every component is a typed, standalone module — no magic, no build steps.
Vertical timeline changelog with dates, tags, titles, and descriptions.
10 new React section templates including HeroGradient, LogoCloud ticker, ComparisonTable, and more. All built to the Frameium design system spec.
Completely rebuilt the sections dashboard with the new PreviewBrowser component — full code panel, copy button, and viewport controls.
Body scroll lock now properly restores on modal close in all browsers. Previously broke on Safari iOS.
All section components now pass tsc --noEmit with strict: true. Improved prop documentation across the board.
Clean feature comparison grid with check/cross indicators across pricing tiers.
All plans include the full component library. Upgrade for team features and priority support.
Full-width CTA section with radial gradient, large heading, and centered ghost buttons.
2-column bordered grid of news/update cards with dot indicators and category labels.