Do I need to know how to code?

Not for the Framer edition. You change text, images, colors, fonts and layouts in Framer's visual editor and publish with one click. The Next.js, Astro and HTML editions are for developers and ship with setup guides.

How do I get a template?

Framer: open the template page and click Remix — it copies into your Framer account, no Framebrick account needed. Code editions (Next.js, Astro, HTML), on the templates that have them: sign in with your email and download the zip; free accounts get 10 downloads a month, Pro has no limit.

What is the difference between Monthly, Yearly and Lifetime?

They give the same access to every template. Yearly and Lifetime add priority email support. Monthly and Yearly renew until you cancel, and Pro ends with the paid period; Lifetime is one payment and never ends.

Are the templates really free?

Yes, every one of them, for your own site or a client's. Remixing in Framer needs no account; downloading code editions needs a free account. Pro is optional: it adds unlimited downloads, the Figma files and AI prompts, early access and no sponsored cards.

What is the difference between the Framer and code editions?

The Framer edition is a project you remix into your Framer account and edit visually. Code editions (Next.js, Astro, HTML) are the same design as a standalone codebase you host anywhere. Each template page lists the editions it has.

Yes, within 7 days of your first Pro payment if you haven't downloaded a Figma file or an AI prompt pack yet. Billing mistakes are refunded any time. See the refund policy.

FreeAll 65 templates and every component · Pro from $9/mo

Components that move. Templates that launch.

Free animated React components and complete website templates. Copy a component into your project, or remix a whole site in Framer.

Browse components Explore templates

$npx shadcn@latest add https://framebrick.co/r/subscribe-input.json

React · Next.js · Tailwind CSS · Motion · Framer

Free components

Motion you can drop into any project

Interactions lifted from our templates, redesigned in the shadcn/ui look. Try them right here — then install with one command.

All components

Book a viewing

Flip Button

Button whose label leaves at the top while a copy rises from below.

Try any address, or one ending in .test to see the failure.

Subscribe InputNew

E-mail field in a pill whose round button carries sending, success and failure.

Showing projects as grid

Segmented Control

A row of options with a selected fill that slides between them.

Positioning, audience research and a clear voice, so every page speaks to the right people.

Layouts, type and motion designed together, tested at every screen size before a line of code.

Fast, accessible sites built on Next.js, with content your team can edit without a developer.

Accordion List

Divided rows that open by height; closed rows dim until hovered.

Hover: label

Hover: label + plus

Hover: ring

Label Cursor

Custom cursor that morphs from a dot into a label or a ring over marked elements.

Aurora2026

Expanding Panels

A row of panels where the one you point at opens and the others narrow.

94%

Projects delivered on time

78%

Clients who come back

62%

Traffic from organic search

Stat Bars

Percentage bars that grow, one after another, when the chart scrolls into view.

NorthwindLumenArcadiaKestrelHaldenOakmereNorthwindLumenArcadiaKestrelHaldenOakmere

Marquee

Content that scrolls sideways forever at a steady speed, with an optional glide to a stop on hover.

New · page blocks

Whole sections you stack, then theme

Heroes, services, projects, testimonials and more from our templates, in one default look. Stack them like a wireframe, change a few CSS variables, and every block follows.

All blocks

Inside the library

22
Free components: 65
Free templates: 47
Page blocks: 9
Industries

A few places to start

Complete websites with every page they need. Click through the live preview before you decide.

All 65 templates

Browse templates by business

Built for people who ship

Whether you copy one component or launch a whole template, you get code and designs made to be changed.

Source you own
Components land in your codebase as real files, not a package. Templates remix into your Framer account, and selected ones also download as a Next.js, Astro or HTML project.
Motion, done carefully
Springs and reveals measured from our templates, transform-only for smooth scrolling, and reduced-motion safe.
Themeable and dark-ready
Components use the standard shadcn variables, so they follow your theme and dark mode automatically.
Real pages, real CMS
Templates come with blogs, projects, services and team pages driven by the CMS — add an item, get a page.
AI prompts included
Every component has a prompt for v0, Lovable, Bolt or Claude that rebuilds the look and the exact motion.
Help from a real person
Stuck on setup or customization? Email us and we reply within 1–2 business days.

Pricing

Every template is free. Pro takes it further.

Remix any of our 65 templates in Framer without an account, or download a code edition with a free one. Pro removes the download limit and adds the Figma files and AI prompts.

Free

$0forever

No card needed

Every template and every UI component, for personal and client work.

Browse templates

All 65 templates — remix in Framer, no account
Code editions: 10 downloads a month with a free account
Every Framebrick UI component
Unlimited bookmarks
Docs and email help

Pro · Yearly

Questions, answered

Can't find what you're looking for? Our support team is one email away.

Contact support

Not for the Framer edition. You change text, images, colors, fonts and layouts in Framer's visual editor and publish with one click. The Next.js, Astro and HTML editions are for developers and ship with setup guides.

Start with something free today

Install a component in one command, or remix any of our 65 free templates in Framer.

Browse components Browse all 65 templates

Components that move. Templates that launch.