Getting Started
Substrate is a token-driven React component library for building marketing sites and product interfaces. Install the packages, import the CSS, set a few HTML attributes, and every component responds to your theme settings.
Installation
Install the Substrate packages into your React project:
npm install @substrate/react-core @substrate/react-sections @substrate/icons1. Import the CSS
In your app entry point or global stylesheet:
@import '@substrate/react-core/styles.css';
@import '@substrate/react-sections/styles.css';2. Set root attributes
Add theme attributes to your <html> element. These control the visual system globally:
<html
data-brand="default"
data-mode="light"
data-radius="balanced"
data-density="default"
data-gray="slate"
>3. Use a component
Import from @substrate/react-core for UI primitives or @substrate/react-sections for full page sections:
import { Button } from '@substrate/react-core'
import { Hero1, Hero1Defaults } from '@substrate/react-sections'
export default function App() {
return (
<>
<Hero1 {...Hero1Defaults} />
<Button>Get started</Button>
</>
)
}4. Explore the theme tool
Open the theme playground to adjust color, typography, density, shape, and more — then export a CSS file, design.md, or Figma tokens.