Grok
1 copies
Not liked
Component Preview
dashboard.tsxAP
Demo App
Preview of your theme
Total Revenue
$15,231.89
+20.1% from last month
Subscriptions
+2,350
+180.1% from last month
Upgrade your subscription
You are currently on the free plan.
Create an account
Enter your email below to create your account.
CSS Variables
globals.css:root {
--background: oklch(0.98 0 0);
--foreground: oklch(0.20 0 0);
--card: oklch(0.97 0 0);
--card-foreground: oklch(0.18 0 0);
--popover: oklch(0.98 0 0);
--popover-foreground: oklch(0.18 0 0);
--primary: oklch(0.70 0.12 255);
--primary-foreground: oklch(0.98 0 0);
--secondary: oklch(0.94 0 0);
--secondary-foreground: oklch(0.20 0 0);
--muted: oklch(0.93 0 0);
--muted-foreground: oklch(0.45 0 0);
--accent: oklch(0.94 0 0);
--accent-foreground: oklch(0.20 0 0);
--destructive: oklch(0.63 0.19 23);
--destructive-foreground: oklch(1 0 0);
--border: oklch(0.89 0 0);
--input: oklch(0.92 0 0);
--ring: oklch(0.70 0.12 255);
--chart-1: oklch(0.70 0.12 255);
--chart-2: oklch(0.58 0.15 260);
--chart-3: oklch(0.55 0 0);
--chart-4: oklch(0.80 0 0);
--chart-5: oklch(0.40 0 0);
--sidebar: oklch(0.97 0 0);
--sidebar-foreground: oklch(0.20 0 0);
--sidebar-primary: oklch(0.20 0 0);
--sidebar-primary-foreground: oklch(0.98 0 0);
--sidebar-accent: oklch(0.94 0 0);
--sidebar-accent-foreground: oklch(0.20 0 0);
--sidebar-border: oklch(0.90 0 0);
--sidebar-ring: oklch(0.70 0.12 255);
--font-sans: Geist, Inter, sans-serif;
--font-serif: Georgia, serif;
--font-mono: Geist Mono, monospace;
--radius: 0.5rem;
--shadow-2xs: 0px 1px 2px oklch(0 0 0 / .05);
--shadow-xs: 0px 1px 3px oklch(0 0 0 / .06);
--shadow-sm: 0px 1px 4px oklch(0 0 0 / .07);
--shadow: 0px 2px 6px oklch(0 0 0 / .08);
--shadow-md: 0px 3px 8px oklch(0 0 0 / .09);
--shadow-lg: 0px 6px 14px oklch(0 0 0 / .10);
--shadow-xl: 0px 10px 20px oklch(0 0 0 / .12);
--shadow-2xl: 0px 14px 32px oklch(0 0 0 / .15);
}
.dark {
--background: oklch(0.10 0 0);
--foreground: oklch(0.98 0 0);
--card: oklch(0.13 0 0);
--card-foreground: oklch(0.98 0 0);
--popover: oklch(0.13 0 0);
--popover-foreground: oklch(0.98 0 0);
--primary: oklch(0.75 0.12 255);
--primary-foreground: oklch(0.98 0 0);
--secondary: oklch(0.18 0 0);
--secondary-foreground: oklch(0.98 0 0);
--muted: oklch(0.18 0 0);
--muted-foreground: oklch(0.65 0 0);
--accent: oklch(0.18 0 0);
--accent-foreground: oklch(0.98 0 0);
--destructive: oklch(0.55 0.20 25);
--destructive-foreground: oklch(0.98 0 0);
--border: oklch(0.18 0 0);
--input: oklch(0.18 0 0);
--ring: oklch(0.75 0.12 255);
--chart-1: oklch(0.75 0.12 255);
--chart-2: oklch(0.60 0.15 260);
--chart-3: oklch(0.50 0 0);
--chart-4: oklch(0.80 0 0);
--chart-5: oklch(0.40 0 0);
--sidebar: oklch(0.09 0 0);
--sidebar-foreground: oklch(0.98 0 0);
--sidebar-primary: oklch(0.75 0.12 255);
--sidebar-primary-foreground: oklch(0.98 0 0);
--sidebar-accent: oklch(0.18 0 0);
--sidebar-accent-foreground: oklch(0.98 0 0);
--sidebar-border: oklch(0.18 0 0);
--sidebar-ring: oklch(0.75 0.12 255);
--font-sans: Geist, Inter, sans-serif;
--font-serif: Georgia, serif;
--font-mono: Geist Mono, monospace;
--radius: 0.6rem;
}