Theming
Use these tokens in any project.
Create a shadcn/ui project with Base UI
npx shadcn@latest init -b base -p novaReplace the theme variables
Copy the :root and .dark blocks from this site's global.css into your stylesheet, along with the extra @theme inline mappings:
@theme inline {
--font-sans: "SF Pro Text", "SF Pro", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--font-mono: "SF Mono", Menlo, ui-monospace, SFMono-Regular, monospace;
--font-display: var(--font-dm-sans), "SF Pro Display", -apple-system, system-ui, sans-serif;
--color-success: var(--success);
--color-warning: var(--warning);
--color-info: var(--info);
--color-border-strong: var(--border-strong);
}Load the display font
import { DM_Sans } from "next/font/google"
const dmSans = DM_Sans({ subsets: ["latin"], variable: "--font-dm-sans" })
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" className={dmSans.variable} suppressHydrationWarning>
<body>{children}</body>
</html>
)
}Add components
Anything from Components, Blocks, or Charts now picks up the theme.
npx shadcn@latest add button card chart