Compositions

In Catalyst, a composition combines primitives with layout and content to support a larger UI task. A sign-in form, for example, can bring together labels, text fields, helper text, and a submit button. Your application supplies the data and business logic.

This is the same level of assembly illustrated by shadcn/ui blocks, which combine components into forms, navigation, and page layouts.

Compose at two levels

• Component behavior: Combine a component's behavior with another element or component. Radix UI uses asChild, while Base UI uses render. Follow the API supported by the Catalyst primitive you are using.
• Interface structure: Arrange multiple primitives into a form, navigation area, or page section. Keep each component's semantics and interactions intact as you connect them.

Build a composition

• Composition guide — Use asChild and compose with your own React components.
• Scaffolding — Start a Catalyst project from an application layout template.