# Framebrick

> Website templates for Framer and code, animated React components and page blocks, from the studio behind Marcframe. Framer templates and every UI component are free; page blocks and the HTML, Figma and AI prompt editions come with Pro, and the Next.js and Astro editions with Ultimate, opening soon.

## Start here

- [Templates](https://framebrick.co/templates): every template, with live demos and the editions each one has
- [UI components](https://framebrick.co/components): animated React components for shadcn/ui projects, free, installed with the shadcn CLI
- [Page blocks](https://framebrick.co/blocks): whole page sections from our templates, previews for everyone, source and install with a Pro or Ultimate plan
- [AI tools](https://framebrick.co/mcp): the Framebrick MCP server and the component registry, for Claude Code, Cursor, Codex or any MCP client
- [Documentation](https://framebrick.co/docs): guides for every template; index for AI tools at https://framebrick.co/docs/llms.txt
- [Pricing](https://framebrick.co/pricing): the plans and the waitlist

## For coding agents

- Component registry: `https://framebrick.co/r/{name}.json`, public. In components.json: `"registries": { "@framebrick": "https://framebrick.co/r/{name}.json" }`, then `npx shadcn@latest add @framebrick/<name>`.
- Framebrick MCP server: `https://framebrick.co/api/mcp` (Streamable HTTP, free, no account). Tools: search, get_template, get_component, get_block, install_command, plan_page, get_plans. Search first, read an item before using it, install with the command it returns.
- [Use Framebrick with a coding agent](https://framebrick.co/docs/ai): the MCP server, the registry and shadcn's MCP server
- Agent Skills (free): [components](https://framebrick.co/skills/framebrick/SKILL.md), [page blocks](https://framebrick.co/skills/framebrick-blocks/SKILL.md), [templates](https://framebrick.co/skills/framebrick-templates/SKILL.md). Index: https://framebrick.co/skills/index.json. One-line install into Claude Code's skills folder: `curl -fsSL https://framebrick.co/install | node -`
- MCP prompts (commands): build, add, fix
- The blocks registry (/r/blocks) needs the registry token of a Pro or Ultimate plan (components.json `headers`); without it the answer is 401, so do not try to install blocks for a user who has no plan.

## UI components (28)

- [Sweep Button](https://framebrick.co/components/sweep-button): A label box and an arrow box that merge while a fill sweeps across the label.
- [Step Cards](https://framebrick.co/components/step-cards): A row of cards where the open one takes the free width and the closed ones narrow to their number.
- [Photo Tabs](https://framebrick.co/components/photo-tabs): Photos that are the tabs: the chosen one takes a fixed share, the others share the rest, and a panel cross-fades beside them.
- [Status Button](https://framebrick.co/components/status-button): A full-width submit button that shows idle, sending, sent and failed.
- [Spring Button](https://framebrick.co/components/spring-button): Button whose arrow turns on hover, with a soft lift and a press spring.
- [Fill Link](https://framebrick.co/components/fill-link): Full-width link row that fills on hover, inverts its text and nudges its content inward.
- [Underline Link](https://framebrick.co/components/underline-link): Text link with a line that draws in from the left and leaves to the right.
- [Segmented Control](https://framebrick.co/components/segmented-control): A row of options with a selected fill that slides between them.
- [Hamburger](https://framebrick.co/components/hamburger): Menu button whose three lines cross into an X.
- [Accordion List](https://framebrick.co/components/accordion-list): Divided rows that open by height; closed rows dim until hovered.
- [Zoom Card](https://framebrick.co/components/zoom-card): Media frame whose content zooms slowly on hover, with an optional caption.
- [Expanding Panels](https://framebrick.co/components/expanding-panels): A row of panels where the one you point at opens and the others narrow.
- [Parallax](https://framebrick.co/components/parallax): Content that drifts against the page while the frame scrolls past.
- [Slideshow](https://framebrick.co/components/slideshow): Endless carousel that auto-plays, can be dragged and peeks at the next slide.
- [Marquee](https://framebrick.co/components/marquee): Content that scrolls sideways forever at a steady speed, with an optional glide to a stop on hover.
- [Scroll Reveal](https://framebrick.co/components/scroll-reveal): Content that moves from an offset into place while it scrolls into view.
- [Stat Bars](https://framebrick.co/components/stat-bars): Percentage bars that grow, one after another, when the chart scrolls into view.
- [Label Cursor](https://framebrick.co/components/label-cursor): Custom cursor that morphs from a dot into a label or a ring over marked elements.
- [Arrow Flip Link](https://framebrick.co/components/arrow-flip-link): Text link whose round arrow leaves at the top right as a second one arrives from the bottom left.
- [Showreel](https://framebrick.co/components/showreel): A stack of frames that cuts to the next one every couple of seconds.
- [Flip Button](https://framebrick.co/components/flip-button): Button whose label leaves at the top while a copy rises from below.
- [Filter Panel](https://framebrick.co/components/filter-panel): Card of grouped chips that folds away behind a round button on narrow screens.
- [Step Sequence](https://framebrick.co/components/step-sequence): Numbered steps that take turns, with the media beside them cross-fading.
- [Lite YouTube](https://framebrick.co/components/lite-youtube): YouTube thumbnail and play button; the player only loads on the click.
- [Hero Video](https://framebrick.co/components/hero-video): Poster with a round play button over it; the whole frame plays and pauses.
- [Subscribe Input](https://framebrick.co/components/subscribe-input): E-mail field in a pill whose round button carries sending, success and failure.
- [Media Accordion](https://framebrick.co/components/media-accordion): Rows that open by height with a photo beside the title that grows with them.
- [Text Appear](https://framebrick.co/components/text-appear): A heading whose words rise into place out of a blur, one after another.

## Templates (65)

- [Cerette](https://framebrick.co/templates/cerette): Architecture and interior design template
- [Metuo](https://framebrick.co/templates/metuo): Therapy and coaching website template
- [Semono](https://framebrick.co/templates/semono): Corporate and business consulting template
- [Ciketo](https://framebrick.co/templates/ciketo): Logistics and shipping website template
- [Tustel](https://framebrick.co/templates/tustel): Photographer and creative portfolio template
- [KorDent](https://framebrick.co/templates/kordent): Dental clinic website template
- [Balancee](https://framebrick.co/templates/balancee): Business and consulting website template
- [Nitip](https://framebrick.co/templates/nitip): Digital marketing agency template
- [Emane](https://framebrick.co/templates/emane): Digital marketing agency template
- [Kelana](https://framebrick.co/templates/kelana): Yoga and meditation studio template
- [Muncul](https://framebrick.co/templates/muncul): Consulting and finance services template
- [Rectanc](https://framebrick.co/templates/rectanc): Real estate agency website template
- [Reshoot](https://framebrick.co/templates/reshoot): Photography creative agency template
- [Kuvat](https://framebrick.co/templates/kuvat): Creative digital agency template
- [Kendi](https://framebrick.co/templates/kendi): Modern blog and magazine template
- [Kalme](https://framebrick.co/templates/kalme): Calm digital marketing agency template
- [Kiwoo](https://framebrick.co/templates/kiwoo): Architecture and interior design template
- [Kuato](https://framebrick.co/templates/kuato): Digital marketing agency template
- [Karbol](https://framebrick.co/templates/karbol): Digital marketing agency template
- [Koddam](https://framebrick.co/templates/koddam): Financial and accounting consulting template
- [Arrus](https://framebrick.co/templates/arrus): Interior design agency template
- [Duration](https://framebrick.co/templates/duration): Modern blog and magazine template
- [Findit](https://framebrick.co/templates/findit): Real estate website template
- [Menowo](https://framebrick.co/templates/menowo): Startup and creative portfolio template
- [Catchup](https://framebrick.co/templates/catchup): Design, branding and digital growth template
- [Titen](https://framebrick.co/templates/titen): Construction and architecture template
- [Fitbricks](https://framebrick.co/templates/fitbricks): Gym and fitness website template
- [Mindbricks](https://framebrick.co/templates/mindbricks): Psychology and counseling template
- [Lookis](https://framebrick.co/templates/lookis): Photography and personal portfolio
- [Mukio](https://framebrick.co/templates/mukio): Consulting and finance services template
- [Marai Neesu](https://framebrick.co/templates/marai-neesu): Personal portfolio template
- [Tello](https://framebrick.co/templates/tello): Digital creative agency template
- [Brickstudio](https://framebrick.co/templates/brickstudio): Digital creative agency template
- [Compose Digi](https://framebrick.co/templates/compose-digi): Digital marketing agency template
- [Naliko](https://framebrick.co/templates/naliko): Personal profile and portfolio template
- [Biobricks](https://framebrick.co/templates/biobricks): Dashboard-style personal portfolio
- [Goeboek](https://framebrick.co/templates/goeboek): Real estate and property template
- [Brickfolio](https://framebrick.co/templates/brickfolio): One-page personal portfolio
- [Denzel](https://framebrick.co/templates/denzel): Blog and magazine template
- [Kirimo](https://framebrick.co/templates/kirimo): Creative portfolio template
- [Sename](https://framebrick.co/templates/sename): Yoga and meditation website template
- [Lusia](https://framebrick.co/templates/lusia): Minimal personal blog template
- [STOA](https://framebrick.co/templates/stoa): Digital marketing agency template
- [WeDoes](https://framebrick.co/templates/wedoes): Digital creative agency template
- [Archive](https://framebrick.co/templates/archive): Construction and architecture template
- [Hugo Vicario](https://framebrick.co/templates/hugo-vicario): Personal portfolio template
- [Kulino](https://framebrick.co/templates/kulino): Creative portfolio template
- [Marckits](https://framebrick.co/templates/marckits): Digital products store template
- [Socio Space](https://framebrick.co/templates/socio-space): Coworking space website template
- [Berrie](https://framebrick.co/templates/berrie): Minimal personal portfolio template
- [Bedeesk](https://framebrick.co/templates/bedeesk): Architecture and interior design template
- [Lumbung](https://framebrick.co/templates/lumbung): Blog and magazine template
- [Clickie](https://framebrick.co/templates/clickie): SaaS and startup landing template
- [Makadam](https://framebrick.co/templates/makadam): Creative portfolio template
- [Maxuse](https://framebrick.co/templates/maxuse): Digital marketing agency template
- [Skroope](https://framebrick.co/templates/skroope): Architecture and interior design template
- [JaneMills](https://framebrick.co/templates/jane-mills): Personal travel blog template
- [Gottlieb](https://framebrick.co/templates/gottlieb): Personal portfolio template
- [FocalSpot](https://framebrick.co/templates/focal-spot): Photography website template
- [Cocote](https://framebrick.co/templates/cocote): Minimal portfolio website template
- [Cubicles](https://framebrick.co/templates/cubicles): Business and consulting website template
- [Pering](https://framebrick.co/templates/pering): News magazine and podcast template
- [Koober](https://framebrick.co/templates/koober): Creative portfolio template
- [Marcframe](https://framebrick.co/templates/marcframe): Portfolio and digital store template
- [Batako](https://framebrick.co/templates/batako): Architecture and interior design template

## Page blocks (55, source with Pro or Ultimate)

- [Header Centered](https://framebrick.co/blocks/header-centered): Sticky header with the brand on the left, navigation centered and a call to action on the right. It clears and fades on scroll down; link labels roll on hover.
- [Header Split](https://framebrick.co/blocks/header-split): Sticky header with brand and links at the left and two rolling-label buttons at the right; menu inside the bar below 1024px.
- [Hero Projects](https://framebrick.co/blocks/hero-projects): Headline with rating, avatars and two actions, then a row of recent projects that open on hover.
- [Hero Image](https://framebrick.co/blocks/hero-image): Page heading and summary over a wide image that settles into place as it scrolls into view; optional breadcrumbs and facts.
- [Hero Bento](https://framebrick.co/blocks/hero-bento): Inner page opening above a grid of a large cover photo and two photo + fact rows.
- [Hero Title](https://framebrick.co/blocks/hero-title): Inner page opening: breadcrumbs, page heading, divider and a short description.
- [Hero Split](https://framebrick.co/blocks/hero-split): Split title with a lead and action, two photos side by side and three figures with dividers.
- [Hero Video](https://framebrick.co/blocks/hero-video): A centered label pill, heading, lead and two buttons above a wide video that loads and plays on click.
- [Hero Showreel](https://framebrick.co/blocks/hero-showreel): A short line beside a display heading, a text block with a corner mark and two buttons, and a small showreel of your work.
- [Hero Cover](https://framebrick.co/blocks/hero-cover): A full-bleed video or photo under a dark cover, the heading and buttons at the bottom, and figures with client quotes turning in glass cards.
- [Media Band](https://framebrick.co/blocks/media-band): A full-width looping video or photo between two sections that drifts against the page as it scrolls past.
- [Services Accordion](https://framebrick.co/blocks/services-accordion): Section header and every service as a numbered row that opens to photos, a description, a link and the tools used.
- [Services Pricing](https://framebrick.co/blocks/services-pricing): What a service includes beside a pricing card whose plan switch swaps the list, price and note.
- [Features Collage](https://framebrick.co/blocks/features-collage): Photo collage with floating highlight chips beside a heading, numbered feature cards and an action.
- [Services Alternate](https://framebrick.co/blocks/services-alternate): A row per service: a panel with the description, tools and a link beside a large photo, sides alternating; rows fill on hover.
- [Services Cards](https://framebrick.co/blocks/services-cards): A heading with a button, then two-column service cards whose photo settles and panel rises on hover.
- [Features Split](https://framebrick.co/blocks/features-split): A tall photo beside a label, heading, two paragraphs, a titled check list and a button, on the muted surface.
- [Services List](https://framebrick.co/blocks/services-list): Services as rows with a small photo that grows as the row opens, one at a time — or every row open, as on a services page.
- [Process Overlay](https://framebrick.co/blocks/process-overlay): Numbered steps joined by a line, in a card over a full-width photo.
- [Process Autoplay](https://framebrick.co/blocks/process-autoplay): Steps that take turns every few seconds beside a photo that cross-fades to the active one.
- [Process Slideshow](https://framebrick.co/blocks/process-slideshow): A heading, then numbered steps one slide at a time — the number, title and text beside a photo — with two arrows under the slide.
- [Projects Grid](https://framebrick.co/blocks/projects-grid): Section header and a two-column grid of project cards whose photos zoom on hover.
- [Projects Gallery](https://framebrick.co/blocks/projects-gallery): Every project as a grid of cards or a compact list, with a Grid / List switch.
- [Projects Next](https://framebrick.co/blocks/projects-next): End of a project page: the heading beside the next project's card.
- [Projects Case Study](https://framebrick.co/blocks/projects-case-study): A project's overview, process and results, with parallax photos and photos that move into place as you scroll.
- [Projects Mosaic](https://framebrick.co/blocks/projects-mosaic): A heading with buttons, six projects as a mosaic of wide and narrow cards, a featured project on a dark band, and the rest in a grid.
- [Listings Featured](https://framebrick.co/blocks/listings-featured): A split title above five listing cards, the first twice as wide; photos zoom on hover.
- [Listings Locations](https://framebrick.co/blocks/listings-locations): A centered heading above area cards — three, then two a row — whose photos settle on hover.
- [Listings Tabs](https://framebrick.co/blocks/listings-tabs): A split title, category tabs and full listing cards — location, beds, baths, area, agent and price — with a button to all listings.
- [Listings Filter](https://framebrick.co/blocks/listings-filter): A page title, then a filter card that stays in view beside the listings from 1024px and folds away below; chips narrow the grid.
- [Listing Detail](https://framebrick.co/blocks/listing-detail): A listing page: title, price and figures, a wide photo, then description, detail lists, gallery and video beside the agent, a tour form and nearby listings.
- [Stats Chart](https://framebrick.co/blocks/stats-chart): A short introduction centered above a chart of percentages whose bars grow into view.
- [Values List](https://framebrick.co/blocks/values-list): Small section header above numbered rows of values: number, title and description.
- [Stats Row](https://framebrick.co/blocks/stats-row): Three figures with a title and a line of text each, split by thin lines on an inverted band.
- [History Timeline](https://framebrick.co/blocks/history-timeline): Milestones on a line — four columns on wide screens, a vertical timeline below.
- [About Facts](https://framebrick.co/blocks/about-facts): A long statement, a photo beside two short paragraphs and an action, then four figures on cards.
- [Values Grid](https://framebrick.co/blocks/values-grid): A split title, then a tall photo beside four numbered value cards.
- [About Collage](https://framebrick.co/blocks/about-collage): A label and heading, three values side by side, then a staggered collage of three photos with short texts and two buttons.
- [Team Grid](https://framebrick.co/blocks/team-grid): Small section header above portraits with name, role and email, in up to three columns.
- [Team Profile](https://framebrick.co/blocks/team-profile): One person: a tall portrait, name, address, bio and a list of ways to reach them.
- [Testimonials Slideshow](https://framebrick.co/blocks/testimonials-slideshow): Heading over a photo, then client quotes in an auto-playing, draggable slideshow.
- [Testimonials Marquee](https://framebrick.co/blocks/testimonials-marquee): Review cards in two rows drifting in opposite directions, a snapping carousel on smaller screens.
- [Testimonials Mosaic](https://framebrick.co/blocks/testimonials-mosaic): Five client quotes on dark and light cards of two widths around a short looping video.
- [Testimonials Grid](https://framebrick.co/blocks/testimonials-grid): Client quotes on cards in fixed-width, centred columns under a centred heading, each card rising in as it comes into view.
- [FAQ Split](https://framebrick.co/blocks/faq-split): A heading and lead, then a portrait photo beside questions that open on their own.
- [Blog Grid](https://framebrick.co/blocks/blog-grid): Section header and a grid of post cards whose photos zoom on hover, optionally paged with Load more.
- [Blog Article](https://framebrick.co/blocks/blog-article): The body of a post beside its date and category, styled for your Markdown or MDX.
- [Careers Accordion](https://framebrick.co/blocks/careers-accordion): Open roles as rows that open to a summary, a link and the requirements, with Load more.
- [Careers Application](https://framebrick.co/blocks/careers-application): A role's title, summary and lists beside an application form with sending, success and error states.
- [CTA Marquee](https://framebrick.co/blocks/cta-marquee): A large invitation and a button above an endless strip of photos running edge to edge.
- [CTA Gallery](https://framebrick.co/blocks/cta-gallery): An invitation to start a project beside six square photos of past work — or, with details, ways to reach you beside wider photos.
- [Contact Split](https://framebrick.co/blocks/contact-split): Every way to reach you beside an enquiry form with services checkboxes and sending states.
- [Footer Columns](https://framebrick.co/blocks/footer-columns): Brand and contact, large page links, social rows that fill on hover, a very large closing link and the copyright.
- [Footer Newsletter](https://framebrick.co/blocks/footer-newsletter): A call-to-action photo card over the edge of an inverted footer; contact, two link columns and a newsletter sign-up.
- [Footer Logo](https://framebrick.co/blocks/footer-logo): A calm footer: a large wordmark, a statement with an action beside three link columns, and the legal line.

## Optional

- [License](https://framebrick.co/license): unlimited websites, yours or clients'; no reselling or sharing
- [Support](https://framebrick.co/support)
- [Advertise](https://framebrick.co/advertise)