Skip to main content
Components are the building blocks of your design system. Each component is a reusable piece of UI — a card, a heading, a product tile, a call-to-action — that content teams can use when creating content. Components render natively as SwiftUI on iOS, Jetpack Compose on Android, and React on web.

​
Two types of components

Layout components define the overall structure of a content type. They specify where content properties go (title, subtitle, hero image) and where component blocks can be added. Every content type has one layout component. View components are the blocks that content teams add when building content. Paragraphs, headings, images, quotes, calls to action — these are all view components.

​
The component editor

The component editor is a split-view workspace:
  • Code editor — write component code in BindJS, a TypeScript-based syntax inspired by SwiftUI
  • Live preview — see your component render in real time as you type
Changes save automatically. There’s no save button — just write code and watch it update.

​
Create a component

Navigate to Components in your project sidebar and click the + button. Enter a name for your component (e.g., ArticleCard, HeroSection, ProductTile). Component names must start with a letter and contain only letters and numbers. Your new component opens in the editor with starter code: 
const metadata = {
  title: "YourComponent"
}

const properties = { } satisfies ComponentProperties;

const body = (props: InferProps<typeof properties>): Component => {
  return VStack([
    Text("YourComponent")
  ])
}

export default defineComponent({
  metadata,
  properties,
  body
});

​
Write component code

Components use BindJS, a declarative syntax for building UI. If you’ve used SwiftUI, the patterns will feel familiar.

​
Layout and structure

Stack components vertically, horizontally, or in layers: 
VStack([
  Text("Title"),
  Text("Subtitle")
])

HStack([
  Image(props.icon),
  Text(props.label)
])

ZStack([
  Image(props.background),
  Text(props.overlay)
])

​
Styling with modifiers

Chain modifiers to style components: 
Text(props.title)
  .font("title")
  .bold()
  .foregroundStyle(Color("primary"))

Image(props.heroImage)
  .frame({ height: 200 })
  .cornerRadius(12)

​
Common components

ComponentPurpose
Text()Display text
Image()Display images
Button()Interactive buttons
VStack()Vertical layout
HStack()Horizontal layout
ZStack()Layered layout
Spacer()Flexible space
ScrollView()Scrollable content
See the BindJS Reference for the full component and modifier library.

​
Add properties

Properties make components configurable. Content teams fill in property values when using your component. 
const properties = {
  title: {
    type: "string",
    default: "Untitled"
  },
  subtitle: {
    type: "string"
  },
  showImage: {
    type: "boolean",
    default: true
  }
} satisfies ComponentProperties;
Use properties in your component body: 
const body = (props: InferProps<typeof properties>): Component => {
  return VStack([
    Text(props.title).font("headline"),
    Text(props.subtitle).foregroundStyle(Color("secondary"))
  ])
}
When content teams add this component, they’ll see fields for title, subtitle, and showImage in the inspector.

​
Organize with collections

Create collections to organize components by category — Cards, Forms, Navigation, Marketing. Drag components between collections or right-click to move them.

​
Publish through packages

Components don’t publish individually. Instead, you publish them as part of a package — a versioned snapshot of your entire component library. Navigate to Components → Packages and click Create:
  1. Enter a version number (e.g., 1.0.0)
  2. Add an optional description
  3. Click Publish Package
The package captures all your components at that moment. Content types reference a specific package version, so your content always renders consistently even as you continue developing components.
Learn more about the publishing workflow in Publishing Packages.

​
Version history

Every change to a component is tracked. Click the … menu next to the component name and select View History to see previous versions, compare changes, and restore an earlier version if needed.

​
What’s next

Content Types

Learn how content types combine layout components with allowed view components.

BindJS Reference

Explore the full library of components, modifiers, and functions.