Getting Started
Theming
Customize Tessina UI to match your brand
Customizing Colors
Tessina UI uses CSS variables for theming. You can customize colors by modifying the CSS variables in your global CSS file.
Color Tokens
All color tokens use HSL format:
:root {
--background: 0 0% 100%; /* Page background */
--foreground: 0 0% 3.9%; /* Main text color */
--primary: 0 0% 9%; /* Primary brand color */
--primary-foreground: 0 0% 98%; /* Text on primary */
--secondary: 0 0% 96.1%; /* Secondary color */
--destructive: 0 84.2% 60.2%; /* Error/danger color */
--border: 0 0% 89.8%; /* Border color */
--radius: 0.5rem; /* Border radius */
}Example: Blue Theme
:root {
--primary: 221 83% 53%; /* Blue */
--primary-foreground: 210 40% 98%;
}Example: Green Theme
:root {
--primary: 142 71% 45%; /* Green */
--primary-foreground: 144 61% 98%;
}Dark Mode
Tessina UI includes dark mode support. Override the .dark class variables:
.dark {
--background: 0 0% 3.9%;
--foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 0 0% 9%;
}Enabling Dark Mode
Use a theme provider like next-themes:
import { ThemeProvider } from "next-themes";
export default function RootLayout({ children }) {
return (
<html suppressHydrationWarning>
<body>
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
{children}
</ThemeProvider>
</body>
</html>
);
}Border Radius
Customize the global border radius:
:root {
--radius: 0rem; /* Square corners */
--radius: 0.5rem; /* Default (8px) */
--radius: 1rem; /* More rounded (16px) */
}Per-Component Customization
You can also customize individual components using Tailwind classes:
<Button className="rounded-full bg-purple-600">
Custom Button
</Button>