Skip to content
Getting Started

Getting Started

Install the package, wire up the stylesheet, render your first component.

Installation

bun add @mikenotthepope/substrateui

Peer Dependencies

bun add 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 "@mikenotthepope/substrateui/styles.css";
@source "../node_modules/@mikenotthepope/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.

This will be your repo name.

Next.js
TypeScript
Tailwind