Guides

Components

Components

A tour of the built-in components and how they compose together.

March 19, 2026

Written by Sasha Lindqvist

Composition model

Components are designed to be combined rather than configured through long prop lists. Small, single-purpose pieces compose into the larger patterns you actually need on a page.

Layout primitives

Layout primitives handle spacing and alignment so individual components don't need to reimplement it. Reach for these first before adding custom spacing rules.

Interactive components

Interactive components manage their own internal state (open/closed, selected/unselected) but always expose a controlled mode for cases where the surrounding app needs to own that state instead.

Where to go from here

  • Revisit Theming to restyle any component

  • Return to the Quickstart for a refresher on the basics

  • Check Configuration for instance-level behavior options

Create a free website with Framer, the website builder loved by startups, designers and agencies.