Styling
Learn how to style your Sushify Next.js application using Tailwind CSS and shadcn/ui
Sushify Next.js uses a modern styling approach with Tailwind CSS and shadcn/ui components, providing a beautiful, customizable design system out of the box.
Tech Stack
- Tailwind CSS - Utility-first CSS framework
- shadcn/ui - Re-usable component library
- Radix UI - Unstyled, accessible component primitives
- CSS Variables - Theme customization
Color Themes
Sushify provides 19 pre-built color themes through the @repo/tailwind-config/color-kits package. You can easily switch between themes by changing a single import in your global CSS file.
Preview all themes live! Visit the Themes Gallery to see interactive demos of all available color themes.
Switching Themes
To change your application's theme, update the import in app/globals.css:
@import "@repo/tailwind-config/color-kits/memphis-style.css";Simply replace memphis-style.css with any of the available themes below.
Available Themes
| Theme Name | File Name | Description |
|---|---|---|
| Default | default.css | Clean, professional default theme |
| Memphis Style | memphis-style.css | Bold, colorful 80s-inspired design |
| Neo Brutalism | neo-brutalism.css | Bold, high-contrast brutalist design |
| Cyberpunk | cyberpunk.css | Futuristic neon-inspired theme |
| Glassmorphism | glassmorphism.css | Modern frosted glass aesthetic |
| Gradient Modern | gradient-modern.css | Smooth gradient-based design |
| Aurora | aurora.css | Northern lights inspired colors |
| Ocean Breath | ocean-breath.css | Calm, oceanic color palette |
| Sunset | sunset.css | Warm sunset gradient theme |
| Forest | forest.css | Natural, earthy green tones |
| Nordic | nordic.css | Minimalist Scandinavian design |
| Pastel | pastel.css | Soft, gentle pastel colors |
| Candy | candy.css | Sweet, vibrant candy colors |
| Neon | neon.css | Bright, electric neon theme |
| Retro | retro.css | Vintage-inspired color scheme |
| Monokai | monokai.css | Developer-favorite dark theme |
| Modern Minimal | modern-mininal.css | Ultra-clean minimalist design |
twitter.css | Twitter/X inspired theme | |
| Supabase | supabase.css | Supabase brand colors |
Example Usage
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "@repo/tailwind-config/color-kits/cyberpunk.css";
/* Your custom styles below */All themes include support for both light and dark modes, and work seamlessly with shadcn/ui components.
Configuration
Tailwind Config
The Tailwind configuration is located in tailwind.config.ts:
import type { Config } from "tailwindcss";
const config: Config = {
darkMode: ["class"],
content: [
"./pages/**/*.{ts,tsx}",
"./components/**/*.{ts,tsx}",
"./app/**/*.{ts,tsx}",
"./src/**/*.{ts,tsx}",
],
theme: {
extend: {
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
// ... more color tokens
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
},
},
plugins: [require("tailwindcss-animate")],
};
export default config;Global Styles
Global styles are defined in app/globals.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
/* ... more CSS variables */
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
/* ... dark mode variables */
}
}