Build your component library

This topic takes your React components from your repo to tiles on the Components tab that authors can drag, bind and style. Bring your own components for everything that makes your site yours. Studio's built-in components fill the gaps. If you haven't yet, read Your components in Studio for what registration does and what stays yours.

Every page in this topic uses one example, the team blog.

• Content. The Blog post content type blog_post, whose entries live under /blog. Its entry AI 101 is at /blog/ai-101.
• Components. BlogHero, in src/components/BlogHero.tsx, with the props title, summary and image. Avatar, with the props src and size, and Byline, with the prop text. Stack, with the props direction and gap and the slot children. Avatar, Byline and Stack sit inside the Author card section, which is linked to the author_card global field. Authors build the card from them in Studio, so it isn't registered as one component.
• Groups. BlogHero goes in Blog · Components on the Components tab. The atomic pieces, Avatar and Byline, go in Blog · Elements, and the layout component Stack goes in Blog · Layout.
• A second template, only where a page needs one. Featured post, at /blog/featured.

Check what Studio already ships

Studio ships 19 components, such as Header, Image, Button and Repeater. Before you build a heading or an image component, check Built-in components. Build your own when a built-in doesn't match your design.

The order to build in

1. From a design to components. Decide what to register, and what not to.
2. Component shape checklist. Check that each component can be bound, selected and styled.
3. Register a component. Make it a tile on the Components tab, and check it works.
4. Component schema: props, types and defaults. Look up every prop type and option.

Then refine, when you need to.

• Group components and add thumbnails, so authors find your tiles.
• Lazy-load components, so heavy components don't slow the first load.
• Share state between components, such as a value one component sets and another reads.
• Render rich text and embedded entries.

Pick your path

• You're starting from a Figma design. Go to From a design to components.
• You already have a React component library. Go to Register a component. To have the CLI write the registration code for you, use studio:component:register from CLI commands.
• Your components already register, but authors can't find them on the Components tab. Go to Group components and add thumbnails.

Where components go next

• Build sections from your components: Build sections.
• Give a component's props values from content: Bind a component.
• Let authors style your components with your design tokens: Make your components styleable.