Spirit UI

First install the @spirit-ui/design-system package.

npm install @spirit-ui/design-system

After installing the package, import the external stylesheet to provide the base style variables, fonts, and utility classes.

app/layout.tsx

import "@spirit-ui/design-system/styles";
 
export default function RootLayout({
  children,
} : {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {children}
      </body>
    </html>
  )
}

After installing the package, add the ThemeProvider to root layout of your application. This will manage what theme your application should use from Spirit UI.

Currently, only light and dark mode themes are supported with the default being light.

app/layout.tsx

import "@spirit-ui/design-system/styles";
 
import { ThemeProvider } from "@/components/theme-provider"
 
export default function RootLayout({
  children,
} : {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  )
}

Ensure to add the suppressHydrationWarning attribute to the <html> element of your root layout.

If you don't add the attribute, you will get hydration mismatch warnings. This is because we dynamically update the root element with the [data-theme] attribute to determine which theme values to use.

This property only applies one level deep, so it won't prevent hydration warnings on other elements.

You can now start importing the Spirit UI color variables and components to use in your application.

Getting Started