Installation

Install

Both packages, with React 19 or later.

pnpm add @snapshot-ui/react @snapshot-ui/core

Import the stylesheet

Once, at the root of your app. styles.css holds the tokens and every component. base.css is optional: it sets the page background, the body type, the font rendering details and an ink focus ring for your own links and fields.

import '@snapshot-ui/core/styles.css';
import '@snapshot-ui/core/base.css';

The CSS sits in cascade layers, so your own unlayered CSS always wins, and Tailwind's utilities win over the components.

Load the font

Snapshot UI sets body text at weight 450, which only a variable font has. In Next.js, next/font self-hosts it and sets the family the tokens read:

import { Sofia_Sans } from 'next/font/google';

const sofia = Sofia_Sans({ subsets: ['latin'], display: 'swap', variable: '--font-sans' });

export default function RootLayout({ children }) {
return (
  <html lang="en" className={sofia.variable}>
    <body>{children}</body>
  </html>
);
}

Anywhere else, install @fontsource-variable/sofia-sans and import it once. The font stack already includes its family name.

Next.js server components

Every component file carries 'use client', so a server component or an MDX page can render them directly. React Aria itself must never be imported into a server component.

Tailwind CSS, if you use it

tailwind.css exposes the tokens as utilities, such as bg-canvas, text-slate, rounded-control and p-part. It also removes Tailwind's default radii, text sizes and shadows, so an off-system value like rounded-lg compiles to nothing.

@import 'tailwindcss';
@import '@snapshot-ui/core/tailwind.css';
@import '@snapshot-ui/core/styles.css';