Customization

Updated 23 April 2026

Watch Demo

Make it feel like your product

Sections ship with a neutral, modern baseline. Use props, configuration objects, and your existing CSS or utility classes to bring them in line with your brand.

Customizing via props

Every section accepts a set of props to control content, alignment, and emphasis. For example, a hero might expose:

  • title and subtitle
  • primaryAction and secondaryAction
  • alignment ("left", "center")
  • showEyebrow and eyebrowLabel

See the API reference for the full list of props available on each section component.

Overriding styles

The library is intentionally unopinionated about your styling solution. You can:

  • Use CSS modules or a global stylesheet and target exposed class names.
  • Pass custom className or style props where available.
  • Wrap sections in your own layout primitives or design system components.

Configuration objects

For more complex sections-like feature grids or pricing tables-you can drive content via configuration objects:

const features = [
  { title: "Fast integration", body: "Drop in prebuilt sections." },
  { title: "Typed props", body: "Confidently iterate with TypeScript." },
];

<FeaturesSection items={features} />

This pattern keeps your content in plain data structures that can be reused across pages or loaded from a CMS.