Theming

Sona UI components use semantic CSS variables and Tailwind utility classes. They are designed to inherit your project's visual language, including its light and dark themes.

Use semantic tokens

Most components rely on the standard shadcn semantic tokens for surfaces, text, controls, borders, and focus states. Keep those names stable, then adjust their values to match your product.

Components that need Sona-specific values declare the small sona-theme foundation. The CLI installs it only when a component needs it. It adds the Sona radius and danger-state tokens without copying this documentation site's stylesheet into your project.

Set up dark mode

For a Next.js project, install next-themes and provide it at the root of the application. Other frameworks can use the same semantic tokens with their preferred theme strategy.

npm install next-themes

src/app/providers.tsx

"use client";
 
import type * as React from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";
 
export function ThemeProvider({
children,
...props
}: React.ComponentProps<typeof NextThemesProvider>) {
return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
}

src/app/layout.tsx

import { ThemeProvider } from "./providers";
 
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
  <html lang="en" suppressHydrationWarning>
    <body>
      <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
        {children}
      </ThemeProvider>
    </body>
  </html>
);
}

Customize the palette

Define semantic values in the Tailwind CSS entry file. The example below is a compact foundation that Sona UI components can inherit.

css

src/app/globals.css

@theme {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-primary: var(--primary);
--color-muted: var(--muted);
--color-accent: var(--accent);
--color-destructive: var(--destructive);
--color-border: var(--border);
--color-ring: var(--ring);
--radius-lg: var(--radius);
}
 
:root {
--radius: 0.75rem;
--background: oklch(0.98 0 0);
--foreground: oklch(0.18 0 0);
--card: oklch(1 0 0);
--primary: oklch(0.6 0.2 250);
--muted: oklch(0.95 0 0);
--accent: oklch(0.91 0 0);
--destructive: oklch(0.53 0.19 25);
--border: oklch(0 0 0 / 8%);
--ring: oklch(0.55 0.2 250);
}
 
.dark {
--background: oklch(0.19 0 0);
--foreground: oklch(0.94 0 0);
--card: oklch(0.21 0 0);
--primary: oklch(0.7 0.16 250);
--muted: oklch(0.26 0 0);
--accent: oklch(0.31 0 0);
--destructive: oklch(0.5 0.22 25);
--border: oklch(1 0 0 / 10%);
--ring: oklch(0.7 0.16 250);
}

When the provider uses the class attribute, define both root and dark values explicitly. This keeps theme changes controlled by the class rather than the browser color-scheme setting.

Style the installed source

Sona UI gives you local source files, so you can change classes and structure where the component is used. Prefer semantic utilities from your theme so the component continues to work in every color mode.

<AccordionItem className="bg-accent text-accent-foreground" />

Contact

Found a bug or need help theming a component? Open an issue on GitHub.

License & Usage

Sona UI is available under the MIT license. You may use, modify, and distribute components in personal and commercial projects.