Getting Started

Everything you need to install SubstrateUI and render your first component.

Installation

Terminal

npm install substrateui

Peer Dependencies

Terminal

npm install tailwindcss@latest @tailwindcss/postcss tw-animate-css next-themes

CSS Setup

Replace your globals.css with the following:

globals.css

@import "tailwindcss";
@import "tw-animate-css";
@import "substrateui/styles.css";
@source "../node_modules/substrateui";

Font Setup (Recommended)

SubstrateUI is designed for DM Sans + DM Mono. Set them up via next/font/google in your root layout:

layout.tsx

import { DM_Sans, DM_Mono } from "next/font/google"

const sans = DM_Sans({ subsets: ["latin"], variable: "--font-sans" })
const mono = DM_Mono({
  weight: ["400", "500"],
  subsets: ["latin"],
  variable: "--font-mono",
})

// Apply to <html> or <body>:
// className={`${sans.variable} ${mono.variable}`}

Dark Mode Setup

Wrap your app in a ThemeProvider from next-themes:

layout.tsx

import { ThemeProvider } from "next-themes"

export default function RootLayout({ children }) {
  return (
    <html suppressHydrationWarning>
      <body>
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
        >
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}

Your First Component

Here's a complete example combining Button, Stack, Card, and Field:

Create Project

Spin up a new project in one click.

Project Name

This will be your repo name.

Next.js

TypeScript

Tailwind

import { Button, Stack, Card, CardHeader, CardTitle, CardContent, CardFooter, Field, FieldLabel, FieldHint, Input, Badge, Cluster } from 'substrateui'

export function CreateProject() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Create Project</CardTitle>
      </CardHeader>
      <CardContent>
        <Stack gap="md">
          <Field>
            <FieldLabel>Project Name</FieldLabel>
            <Input placeholder="my-awesome-app" />
            <FieldHint>This will be your repo name.</FieldHint>
          </Field>
          <Cluster gap="sm">
            <Badge>Next.js</Badge>
            <Badge variant="secondary">TypeScript</Badge>
          </Cluster>
        </Stack>
      </CardContent>
      <CardFooter>
        <Button variant="amber">Create</Button>
      </CardFooter>
    </Card>
  )
}