Next.js

Kickstart with the Next.js starter 🚀

coreui-nextjs-typescript-starter Everything is setup to use CoreUI. Press Use this template on GitHub and start building.

Initialize a NextJS Project

If you don't already have a Next.js project set up, you can follow the official Next.js setup guide to create a new project quickly.

Make sure you have Tailwind CSS v4 installed

Follow these instructions if you don't have Tailwind CSS v4 installed in your project. You just need to have a globals.css file. Note: Tailwind CSS v4 doesn't require a config file by default.

Add the CoreUI styles

Include these styles in your main CSS file where Tailwind is imported:

app/globals.css

@import 'tailwindcss';@theme {  /* CoreUI Raw Colors */  --color-gray-950: #171717;  --color-gray-900: #1c1c1c;  --color-gray-800: #262626;  --color-gray-700: #333333;  --color-gray-600: #5c5c5c;  --color-gray-500: #7b7b7b;  --color-gray-400: #a3a3a3;  --color-gray-300: #d1d1d1;  --color-gray-200: #ebebeb;  --color-gray-100: #f5f5f5;  --color-gray-50: #f7f7f7;  --color-gray-0: #ffffff;  --color-gray-alpha-24: #a3a3a33d;  --color-gray-alpha-16: #a3a3a329;  --color-gray-alpha-10: #a3a3a31a;  --color-slate-950: #0e121b;  --color-slate-900: #181b25;  --color-slate-800: #222530;  --color-slate-700: #2b303b;  --color-slate-600: #525866;  --color-slate-500: #717784;  --color-slate-400: #99a0ae;  --color-slate-300: #cacfd8;  --color-slate-200: #eaecf0;  --color-slate-100: #f2f5f8;  --color-slate-50: #f5f7fa;  --color-slate-0: #ffffff;  --color-slate-alpha-24: #99a0ae3d;  --color-slate-alpha-16: #99a0ae29;  --color-slate-alpha-10: #99a0ae1a;  --color-blue-950: #122368;  --color-blue-900: #182f8b;  --color-blue-800: #1f3bad;  --color-blue-700: #2547d0;  --color-blue-600: #3559e9;  --color-blue-500: #335cff;  --color-blue-400: #4d82ff;  --color-blue-300: #97baff;  --color-blue-200: #c0d5ff;  --color-blue-100: #d5e2ff;  --color-blue-50: #ebf1ff;  --color-blue-alpha-24: #476cff3d;  --color-blue-alpha-16: #476cff29;  --color-blue-alpha-10: #476cff1a;  --color-orange-950: #71330a;  --color-orange-900: #96440d;  --color-orange-800: #b75310;  --color-orange-700: #ce5e12;  --color-orange-600: #e16614;  --color-orange-500: #fa7319;  --color-orange-400: #ffa468;  --color-orange-300: #ffc197;  --color-orange-200: #ffd9c0;  --color-orange-100: #ffe6d5;  --color-orange-50: #fff3eb;  --color-orange-alpha-24: #fa73193d;  --color-orange-alpha-16: #fa731929;  --color-orange-alpha-10: #fa73191a;  --color-red-950: #681219;  --color-red-900: #8b1822;  --color-red-800: #ad1f2b;  --color-red-700: #d02533;  --color-red-600: #e93544;  --color-red-500: #fb3748;  --color-red-400: #ff6875;  --color-red-300: #ff97a0;  --color-red-200: #ffc0c5;  --color-red-100: #ffd5d8;  --color-red-50: #ffebec;  --color-red-alpha-24: #fb37483d;  --color-red-alpha-16: #fb374829;  --color-red-alpha-10: #fb37481a;  --color-green-950: #0b4627;  --color-green-900: #16643b;  --color-green-800: #1a7544;  --color-green-700: #178c4e;  --color-green-600: #1daf61;  --color-green-500: #1fc16b;  --color-green-400: #3ee089;  --color-green-300: #84ebb4;  --color-green-200: #c2f5da;  --color-green-100: #d6f5e8;  --color-green-50: #e3f7ec;  --color-green-alpha-24: #1fc16b3d;  --color-green-alpha-16: #1fc16b29;  --color-green-alpha-10: #1fc16b1a;  --color-yellow-950: #624c18;  --color-yellow-900: #86661d;  --color-yellow-800: #a78025;  --color-yellow-700: #c99a2c;  --color-yellow-600: #e6a819;  --color-yellow-500: #f6b51e;  --color-yellow-400: #ffd268;  --color-yellow-300: #ffe097;  --color-yellow-200: #ffecc0;  --color-yellow-100: #ffefcc;  --color-yellow-50: #fffaeb;  --color-yellow-alpha-24: #fbc64b3d;  --color-yellow-alpha-16: #fbc64b29;  --color-yellow-alpha-10: #fbc64b1a;  --color-purple-950: #351a75;  --color-purple-900: #3d1d86;  --color-purple-800: #4c25a7;  --color-purple-700: #5b2cc9;  --color-purple-600: #693ee0;  --color-purple-500: #7d52f4;  --color-purple-400: #8c71f6;  --color-purple-300: #a897ff;  --color-purple-200: #cac0ff;  --color-purple-100: #dcd5ff;  --color-purple-50: #efebff;  --color-purple-alpha-24: #784def3d;  --color-purple-alpha-16: #784def29;  --color-purple-alpha-10: #784def1a;  --color-sky-950: #124b68;  --color-sky-900: #18658b;  --color-sky-800: #1f7ead;  --color-sky-700: #2597d0;  --color-sky-600: #35ade9;  --color-sky-500: #47c2ff;  --color-sky-400: #68cdff;  --color-sky-300: #97dcff;  --color-sky-200: #c0eaff;  --color-sky-100: #d5f1ff;  --color-sky-50: #ebf8ff;  --color-sky-alpha-24: #47c2ff3d;  --color-sky-alpha-16: #47c2ff29;  --color-sky-alpha-10: #47c2ff1a;  --color-pink-950: #68123d;  --color-pink-900: #8b1852;  --color-pink-800: #ad1f66;  --color-pink-700: #d0257a;  --color-pink-600: #e9358f;  --color-pink-500: #fb4ba3;  --color-pink-400: #ff68b3;  --color-pink-300: #ff97cb;  --color-pink-200: #ffc0df;  --color-pink-100: #ffd5ea;  --color-pink-50: #ffebf4;  --color-pink-alpha-24: #fb4ba33d;  --color-pink-alpha-16: #fb4ba329;  --color-pink-alpha-10: #fb4ba31a;  --color-teal-950: #0b463e;  --color-teal-900: #16645a;  --color-teal-800: #1a7569;  --color-teal-700: #178c7d;  --color-teal-600: #1daf9c;  --color-teal-500: #22d3bb;  --color-teal-400: #3fdec9;  --color-teal-300: #84ebdd;  --color-teal-200: #c2f5ee;  --color-teal-100: #d0fbf5;  --color-teal-50: #e4fbf8;  --color-teal-alpha-24: #22d3bb3d;  --color-teal-alpha-16: #22d3bb29;  --color-teal-alpha-10: #22d3bb1a;  --color-white-alpha-24: #ffffff3d;  --color-white-alpha-16: #ffffff29;  --color-white-alpha-10: #ffffff1a;  --color-black-alpha-24: #1717173d;  --color-black-alpha-16: #17171729;  --color-black-alpha-10: #1717171a;  /* CoreUI Dynamic Neutral Colors */  --color-neutral-950: var(--color-gray-950);  --color-neutral-900: var(--color-gray-900);  --color-neutral-800: var(--color-gray-800);  --color-neutral-700: var(--color-gray-700);  --color-neutral-600: var(--color-gray-600);  --color-neutral-500: var(--color-gray-500);  --color-neutral-400: var(--color-gray-400);  --color-neutral-300: var(--color-gray-300);  --color-neutral-200: var(--color-gray-200);  --color-neutral-100: var(--color-gray-100);  --color-neutral-50: var(--color-gray-50);  --color-neutral-0: var(--color-gray-0);  --color-neutral-alpha-24: var(--color-gray-alpha-24);  --color-neutral-alpha-16: var(--color-gray-alpha-16);  --color-neutral-alpha-10: var(--color-gray-alpha-10);  /* CoreUI Dynamic Primary Colors */  --color-primary-dark: var(--color-blue-800);  --color-primary-darker: var(--color-blue-700);  --color-primary-base: var(--color-blue-500);  --color-primary-light: var(--color-blue-100);  --color-primary-lighter: var(--color-blue-50);  --color-primary-alpha-24: var(--color-blue-alpha-24);  --color-primary-alpha-16: var(--color-blue-alpha-16);  --color-primary-alpha-10: var(--color-blue-alpha-10);  /* CoreUI Social Colors */  --color-social-apple: #000;  --color-social-twitter: #010101;  --color-social-github: #24292f;  --color-social-notion: #1e2226;  --color-social-tidal: #000;  --color-social-amazon: #353e47;  --color-social-zendesk: #16140d;  /* CoreUI Overlay Colors */  --color-overlay-gray: #3333333d;  --color-overlay-slate: #2b303b3d;  --color-overlay: var(--color-overlay-gray);  /* CoreUI Semantic Colors */  --color-static-black: var(--color-neutral-950);  --color-static-white: var(--color-neutral-0);  --color-bg-strong-950: var(--color-neutral-950);  --color-bg-surface-800: var(--color-neutral-800);  --color-bg-sub-300: var(--color-neutral-300);  --color-bg-soft-200: var(--color-neutral-200);  --color-bg-weak-50: var(--color-neutral-50);  --color-bg-weak-25: var(--color-neutral-50);  --color-bg-white-0: var(--color-neutral-0);  --color-text-strong-950: var(--color-neutral-950);  --color-text-sub-600: var(--color-neutral-600);  --color-text-soft-400: var(--color-neutral-400);  --color-text-disabled-300: var(--color-neutral-300);  --color-text-white-0: var(--color-neutral-0);  --color-stroke-strong-950: var(--color-neutral-950);  --color-stroke-sub-300: var(--color-neutral-300);  --color-stroke-soft-200: var(--color-neutral-200);  --color-stroke-white-0: var(--color-neutral-0);  --color-faded-dark: var(--color-neutral-800);  --color-faded-base: var(--color-neutral-500);  --color-faded-light: var(--color-neutral-200);  --color-faded-lighter: var(--color-neutral-100);  --color-information-dark: var(--color-blue-950);  --color-information-base: var(--color-blue-500);  --color-information-light: var(--color-blue-200);  --color-information-lighter: var(--color-blue-50);  --color-warning-dark: var(--color-orange-950);  --color-warning-base: var(--color-orange-500);  --color-warning-light: var(--color-orange-200);  --color-warning-lighter: var(--color-orange-50);  --color-error-dark: var(--color-red-950);  --color-error-base: var(--color-red-500);  --color-error-light: var(--color-red-200);  --color-error-lighter: var(--color-red-50);  --color-success-dark: var(--color-green-950);  --color-success-base: var(--color-green-500);  --color-success-light: var(--color-green-200);  --color-success-lighter: var(--color-green-50);  --color-away-dark: var(--color-yellow-950);  --color-away-base: var(--color-yellow-500);  --color-away-light: var(--color-yellow-200);  --color-away-lighter: var(--color-yellow-50);  --color-feature-dark: var(--color-purple-950);  --color-feature-base: var(--color-purple-500);  --color-feature-light: var(--color-purple-200);  --color-feature-lighter: var(--color-purple-50);  --color-verified-dark: var(--color-sky-950);  --color-verified-base: var(--color-sky-500);  --color-verified-light: var(--color-sky-200);  --color-verified-lighter: var(--color-sky-50);  --color-highlighted-dark: var(--color-pink-950);  --color-highlighted-base: var(--color-pink-500);  --color-highlighted-light: var(--color-pink-200);  --color-highlighted-lighter: var(--color-pink-50);  --color-stable-dark: var(--color-teal-950);  --color-stable-base: var(--color-teal-500);  --color-stable-light: var(--color-teal-200);  --color-stable-lighter: var(--color-teal-50);  /* CoreUI Typography System - Dynamic from tokens.ts */  --text-title-h1: 3.5rem;  --text-title-h1--line-height: 4rem;  --text-title-h1--letter-spacing: -0.01em;  --text-title-h1--font-weight: 500;  --text-title-h2: 3rem;  --text-title-h2--line-height: 3.5rem;  --text-title-h2--letter-spacing: -0.01em;  --text-title-h2--font-weight: 500;  --text-title-h3: 2.5rem;  --text-title-h3--line-height: 3rem;  --text-title-h3--letter-spacing: -0.01em;  --text-title-h3--font-weight: 500;  --text-title-h4: 2rem;  --text-title-h4--line-height: 2.5rem;  --text-title-h4--letter-spacing: -0.005em;  --text-title-h4--font-weight: 500;  --text-title-h5: 1.5rem;  --text-title-h5--line-height: 2rem;  --text-title-h5--letter-spacing: 0em;  --text-title-h5--font-weight: 500;  --text-title-h6: 1.25rem;  --text-title-h6--line-height: 1.75rem;  --text-title-h6--letter-spacing: 0em;  --text-title-h6--font-weight: 500;  --text-label-xl: 1.5rem;  --text-label-xl--line-height: 2rem;  --text-label-xl--letter-spacing: -0.015em;  --text-label-xl--font-weight: 500;  --text-label-lg: 1.125rem;  --text-label-lg--line-height: 1.5rem;  --text-label-lg--letter-spacing: -0.015em;  --text-label-lg--font-weight: 500;  --text-label-md: 1rem;  --text-label-md--line-height: 1.5rem;  --text-label-md--letter-spacing: -0.011em;  --text-label-md--font-weight: 500;  --text-label-sm: 0.875rem;  --text-label-sm--line-height: 1.25rem;  --text-label-sm--letter-spacing: -0.006em;  --text-label-sm--font-weight: 500;  --text-label-xs: 0.75rem;  --text-label-xs--line-height: 1rem;  --text-label-xs--letter-spacing: 0em;  --text-label-xs--font-weight: 500;  --text-label-2xs: 0.6875rem;  --text-label-2xs--line-height: 1rem;  --text-label-2xs--letter-spacing: 0em;  --text-label-2xs--font-weight: 500;  --text-paragraph-xl: 1.5rem;  --text-paragraph-xl--line-height: 2rem;  --text-paragraph-xl--letter-spacing: -0.015em;  --text-paragraph-xl--font-weight: 400;  --text-paragraph-lg: 1.125rem;  --text-paragraph-lg--line-height: 1.5rem;  --text-paragraph-lg--letter-spacing: -0.015em;  --text-paragraph-lg--font-weight: 400;  --text-paragraph-md: 1rem;  --text-paragraph-md--line-height: 1.5rem;  --text-paragraph-md--letter-spacing: -0.011em;  --text-paragraph-md--font-weight: 400;  --text-paragraph-sm: 0.875rem;  --text-paragraph-sm--line-height: 1.25rem;  --text-paragraph-sm--letter-spacing: -0.006em;  --text-paragraph-sm--font-weight: 400;  --text-paragraph-xs: 0.75rem;  --text-paragraph-xs--line-height: 1rem;  --text-paragraph-xs--letter-spacing: 0em;  --text-paragraph-xs--font-weight: 400;  --text-subheading-md: 1rem;  --text-subheading-md--line-height: 1.5rem;  --text-subheading-md--letter-spacing: 0.06em;  --text-subheading-md--font-weight: 500;  --text-subheading-sm: 0.875rem;  --text-subheading-sm--line-height: 1.25rem;  --text-subheading-sm--letter-spacing: 0.06em;  --text-subheading-sm--font-weight: 500;  --text-subheading-xs: 0.75rem;  --text-subheading-xs--line-height: 1rem;  --text-subheading-xs--letter-spacing: 0.04em;  --text-subheading-xs--font-weight: 500;  --text-subheading-2xs: 0.6875rem;  --text-subheading-2xs--line-height: 0.75rem;  --text-subheading-2xs--letter-spacing: 0.02em;  --text-subheading-2xs--font-weight: 500;  --text-doc-label: 1.125rem;  --text-doc-label--line-height: 2rem;  --text-doc-label--letter-spacing: -0.015em;  --text-doc-label--font-weight: 500;  --text-doc-paragraph: 1.125rem;  --text-doc-paragraph--line-height: 2rem;  --text-doc-paragraph--letter-spacing: -0.015em;  --text-doc-paragraph--font-weight: 400;  /* CoreUI Shadow System - Dynamic from tokens.ts */  --shadow-regular-xs: 0 1px 2px 0 #0a0d1408;  --shadow-regular-sm: 0 2px 4px #1b1c1d0a;  --shadow-regular-md: 0 16px 32px -12px #0e121b1a;  --shadow-button-primary-focus: 0 0 0 2px var(--color-bg-white-0),    0 0 0 4px var(--color-primary-alpha-10);  --shadow-button-important-focus: 0 0 0 2px var(--color-bg-white-0),    0 0 0 4px var(--color-neutral-alpha-16);  --shadow-button-error-focus: 0 0 0 2px var(--color-bg-white-0),    0 0 0 4px var(--color-red-alpha-10);  --shadow-fancy-buttons-neutral: 0 1px 2px 0 #1b1c1d7a, 0 0 0 1px #242628;  --shadow-fancy-buttons-primary: 0 1px 2px 0 #0e121b3d,    0 0 0 1px var(--color-primary-base);  --shadow-fancy-buttons-error: 0 1px 2px 0 #0e121b3d,    0 0 0 1px var(--color-error-base);  --shadow-fancy-buttons-stroke: 0 1px 3px 0 #0e121b1f,    0 0 0 1px var(--color-stroke-soft-200);  --shadow-toggle-switch: 0 6px 10px 0 #0e121b0f, 0 2px 4px 0 #0e121b08;  --shadow-switch-thumb: 0 4px 8px 0 #1b1c1d0f, 0 2px 4px 0 #0e121b14;  --shadow-tooltip: 0 12px 24px 0 #0e121b0f, 0 1px 2px 0 #0e121b08;  --shadow-custom-xs: 0 0 0 1px rgba(51, 51, 51, 0.04),    0 4px 8px -2px rgba(51, 51, 51, 0.06), 0 2px 4px rgba(51, 51, 51, 0.04),    0 1px 2px rgba(51, 51, 51, 0.04),    inset 0 -1px 1px -0.5px rgba(51, 51, 51, 0.06);  --shadow-custom-sm: 0 0 0 1px rgba(51, 51, 51, 0.04),    0 16px 8px -8px rgba(51, 51, 51, 0.01),    0 12px 6px -6px rgba(51, 51, 51, 0.02),    0 5px 5px -2.5px rgba(51, 51, 51, 0.08),    0 1px 3px -1.5px rgba(51, 51, 51, 0.16),    inset 0 -0.5px 0.5px rgba(51, 51, 51, 0.08);  --shadow-custom-md: 0 0 0 1px rgba(51, 51, 51, 0.04),    0 1px 1px 0.5px rgba(51, 51, 51, 0.04),    0 3px 3px -1.5px rgba(51, 51, 51, 0.02),    0 6px 6px -3px rgba(51, 51, 51, 0.04),    0 12px 12px -6px rgba(51, 51, 51, 0.04),    0 24px 24px -12px rgba(51, 51, 51, 0.04),    0 48px 48px -24px rgba(51, 51, 51, 0.04),    inset 0 -1px 1px -0.5px rgba(51, 51, 51, 0.06);  --shadow-custom-lg: 0 0 0 1px rgba(51, 51, 51, 0.04),    0 1px 1px 0.5px rgba(51, 51, 51, 0.04),    0 3px 3px -1.5px rgba(51, 51, 51, 0.02),    0 6px 6px -3px rgba(51, 51, 51, 0.04),    0 12px 12px -6px rgba(51, 51, 51, 0.04),    0 24px 24px -12px rgba(51, 51, 51, 0.04),    0 48px 48px -24px rgba(51, 51, 51, 0.04),    0 96px 96px -32px rgba(51, 51, 51, 0.06),    inset 0 -1px 1px -0.5px rgba(51, 51, 51, 0.06);  /* CoreUI Block Shadow System */  --shadow-complex-12: 0 80px 80px -40px rgba(23, 23, 23, 0.04),    0 48px 48px -24px rgba(23, 23, 23, 0.04);  --shadow-colored-gray:    0 20px 20px -10px rgba(23, 23, 23, 0.04),    0 10px 10px -5px rgba(23, 23, 23, 0.04),    0 6px 6px -3px rgba(23, 23, 23, 0.04),    0 3px 3px -1.5px rgba(23, 23, 23, 0.04),    0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1px rgba(23, 23, 23, 0.04);  --shadow-complex: 0 20px 20px -10px rgba(23, 23, 23, 0.04),    0 10px 10px -5px rgba(23, 23, 23, 0.04),    0 6px 6px -3px rgba(23, 23, 23, 0.04),    0 3px 3px -1.5px rgba(23, 23, 23, 0.04),    0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1px rgba(23, 23, 23, 0.08),    0 -1px 1px -0.5px rgba(23, 23, 23, 0.06) inset;  --shadow-complex-2: 0 10px 10px -5px rgba(23, 23, 23, 0.02),    0 6px 6px -3px rgba(23, 23, 23, 0.04),    0 3px 3px -1.5px rgba(23, 23, 23, 0.04),    0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1px rgba(23, 23, 23, 0.02);  --shadow-complex-4: 0 3px 3px -1.5px rgba(23, 23, 23, 0.04),    0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1px rgba(23, 23, 23, 0.02);  --shadow-complex-5: 0 0 6px 0 rgba(255, 255, 255, 0.24) inset,    0 40px 40px -20px rgba(23, 23, 23, 0.06),    0 10px 10px -5px rgba(23, 23, 23, 0.06),    0 6px 6px -3px rgba(23, 23, 23, 0.04),    0 3px 3px -1.5px rgba(23, 23, 23, 0.04),    0 1px 1px -0.5px rgba(23, 23, 23, 0.04);  --shadow-complex-6: 0 40px 40px -20px rgba(23, 23, 23, 0.06),    0 10px 10px -5px rgba(23, 23, 23, 0.06),    0 6px 6px -3px rgba(23, 23, 23, 0.04),    0 3px 3px -1.5px rgba(23, 23, 23, 0.04),    0 1px 1px -0.5px rgba(23, 23, 23, 0.04),    0 0 6px 0 rgba(255, 255, 255, 0.24) inset;  --shadow-complex-7: 0 1px 2px 0 rgba(14, 18, 27, 0.24), 0 0 0 1px #335cff;  --shadow-complex-8: 0 20px 20px -10px rgba(23, 23, 23, 0),    0 10px 10px -5px rgba(23, 23, 23, 0), 0 6px 6px -3px rgba(23, 23, 23, 0),    0 3px 3px -1.5px rgba(23, 23, 23, 0), 0 1px 1px -0.5px rgba(23, 23, 23, 0),    0 0 0 1px rgba(23, 23, 23, 0.08),    0 -1px 1px -0.5px rgba(23, 23, 23, 0.06) inset;  --shadow-complex-9: 0 80px 40px -20px rgba(23, 23, 23, 0.06),    0 40px 40px -20px rgba(23, 23, 23, 0.06),    0 10px 10px -5px rgba(23, 23, 23, 0.06),    0 6px 6px -3px rgba(23, 23, 23, 0.04),    0 3px 3px -1.5px rgba(23, 23, 23, 0.04),    0 1px 1px -0.5px rgba(23, 23, 23, 0.04),    0 0 6px 0 rgba(255, 255, 255, 0.04) inset;  --shadow-complex-10: 0 3px 3px -1.5px rgba(23, 23, 23, 0.04),    0 1px 1px -0.5px rgba(23, 23, 23, 0.04);  --shadow-complex-11: 0 -1px 1px -0.5px rgba(23, 23, 23, 0.06) inset,    0 20px 20px -10px rgba(23, 23, 23, 0.04),    0 10px 10px -5px rgba(23, 23, 23, 0.04),    0 6px 6px -3px rgba(23, 23, 23, 0.04),    0 3px 3px -1.5px rgba(23, 23, 23, 0.04),    0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1px rgba(23, 23, 23, 0.04);  --shadow-custom-input: 0 3px 3px -1.5px rgba(23, 23, 23, 0.04),    0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1px rgba(23, 23, 23, 0.08);  --shadow-custom-input-2: 0 3px 3px -1.5px rgba(23, 23, 23, 0.04),    0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1px var(--color-bg-soft-200);  --shadow-custom-input-3:    0 3px 3px -1.5px rgba(23, 23, 23, 0.06),    0 1px 1px -0.5px rgba(23, 23, 23, 0.06);  --shadow-custom-input-4: 0 3px 3px -1.5px rgba(23, 23, 23, 0.06),    0 1px 1px -0.5px rgba(23, 23, 23, 0.06), 0 0 0 1px rgba(23, 23, 23, 0.02);  --shadow-custom-input-active: 0 6px 6px -3px rgba(23, 23, 23, 0.02),    0 3px 3px -1.5px rgba(23, 23, 23, 0.04),    0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1.4px #335cff;  --shadow-gray-shadow: 0 0 0 1px rgba(23, 23, 23, 0.08);  --shadow-gray-shadow-4: 0 6px 6px -3px rgba(23, 23, 23, 0.04),    0 3px 3px -1.5px rgba(23, 23, 23, 0.04),    0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1px rgba(23, 23, 23, 0.08),    0 -1px 1px -0.5px rgba(23, 23, 23, 0.04) inset;  /* CoreUI Border Radius System - Dynamic from tokens.ts */  --radius-10: 0.625rem;  --radius-20: 1.25rem;  /* CoreUI Animation System - Dynamic from tokens.ts */  --animate-accordion-down: accordion-down 0.2s ease-out;  --animate-accordion-up: accordion-up 0.2s ease-out;}/* Class-based Dark Mode Support */.dark {  --color-bg-strong-950: var(--color-neutral-0);  --color-bg-surface-800: var(--color-neutral-200);  --color-bg-sub-300: var(--color-neutral-600);  --color-bg-soft-200: var(--color-neutral-700);  --color-bg-weak-50: var(--color-neutral-800);  --color-bg-weak-25: var(--color-neutral-900);  --color-bg-white-0: var(--color-neutral-950);  --color-text-strong-950: var(--color-neutral-0);  --color-text-sub-600: var(--color-neutral-400);  --color-text-soft-400: var(--color-neutral-500);  --color-text-disabled-300: var(--color-neutral-600);  --color-text-white-0: var(--color-neutral-950);  --color-stroke-strong-950: var(--color-neutral-0);  --color-stroke-sub-300: var(--color-neutral-600);  --color-stroke-soft-200: var(--color-neutral-800);  --color-stroke-white-0: var(--color-neutral-950);  --color-faded-dark: var(--color-neutral-300);  --color-faded-base: var(--color-neutral-500);  --color-faded-light: var(--color-neutral-alpha-24);  --color-faded-lighter: var(--color-neutral-alpha-10);  --color-information-dark: var(--color-blue-400);  --color-information-base: var(--color-blue-500);  --color-information-light: var(--color-blue-alpha-24);  --color-information-lighter: var(--color-blue-alpha-16);  --color-warning-dark: var(--color-orange-400);  --color-warning-base: var(--color-orange-600);  --color-warning-light: var(--color-orange-alpha-24);  --color-warning-lighter: var(--color-orange-alpha-16);  --color-error-dark: var(--color-red-400);  --color-error-base: var(--color-red-600);  --color-error-light: var(--color-red-alpha-24);  --color-error-lighter: var(--color-red-alpha-16);  --color-success-dark: var(--color-green-400);  --color-success-base: var(--color-green-600);  --color-success-light: var(--color-green-alpha-16);  --color-success-lighter: var(--color-green-alpha-10);  --color-away-dark: var(--color-yellow-400);  --color-away-base: var(--color-yellow-600);  --color-away-light: var(--color-yellow-alpha-24);  --color-away-lighter: var(--color-yellow-alpha-16);  --color-feature-dark: var(--color-purple-400);  --color-feature-base: var(--color-purple-500);  --color-feature-light: var(--color-purple-alpha-24);  --color-feature-lighter: var(--color-purple-alpha-16);  --color-verified-dark: var(--color-sky-400);  --color-verified-base: var(--color-sky-600);  --color-verified-light: var(--color-sky-alpha-24);  --color-verified-lighter: var(--color-sky-alpha-16);  --color-highlighted-dark: var(--color-pink-400);  --color-highlighted-base: var(--color-pink-600);  --color-highlighted-light: var(--color-pink-alpha-24);  --color-highlighted-lighter: var(--color-pink-alpha-16);  --color-stable-dark: var(--color-teal-400);  --color-stable-base: var(--color-teal-600);  --color-stable-light: var(--color-teal-alpha-24);  --color-stable-lighter: var(--color-teal-alpha-16);  --color-primary-base: var(--color-blue-400);  --color-primary-light: var(--color-blue-alpha-16);  --color-primary-lighter: var(--color-blue-alpha-10);  --color-overlay-gray: #3333338f;  --color-overlay-slate: #2b303b8f;  --color-overlay: var(--color-overlay-gray);  --color-social-apple: #fff;  --color-social-twitter: #fff;  --color-social-github: #fff;  --color-social-notion: #fff;  --color-social-tidal: #fff;  --color-social-amazon: #fff;  --color-social-zendesk: #fff;  --shadow-complex-12: 0 80px 80px -40px rgba(23, 23, 23, 0),    0 48px 48px -24px rgba(23, 23, 23, 0);  --shadow-colored-gray:    0 20px 20px -10px rgba(23, 23, 23, 0), 0 10px 10px -5px rgba(23, 23, 23, 0),    0 6px 6px -3px rgba(23, 23, 23, 0), 0 3px 3px -1.5px rgba(23, 23, 23, 0),    0 1px 1px -0.5px rgba(23, 23, 23, 0), 0 0 0 1px rgba(23, 23, 23, 0);  --shadow-complex: 0 20px 20px -10px rgba(23, 23, 23, 0),    0 10px 10px -5px rgba(23, 23, 23, 0), 0 6px 6px -3px rgba(23, 23, 23, 0),    0 3px 3px -1.5px rgba(23, 23, 23, 0), 0 1px 1px -0.5px rgba(23, 23, 23, 0),    0 0 0 1px #262626, 0 -1px 1px -0.5px rgba(23, 23, 23, 0.04) inset;  --shadow-complex-2: 0 10px 10px -5px rgba(23, 23, 23, 0),    0 6px 6px -3px rgba(23, 23, 23, 0), 0 3px 3px -1.5px rgba(23, 23, 23, 0),    0 1px 1px -0.5px rgba(23, 23, 23, 0), 0 0 0 1px rgba(23, 23, 23, 0);  --shadow-complex-4: 0 3px 3px -1.5px rgba(23, 23, 23, 0.04),    0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1px rgba(23, 23, 23, 0.02);  --shadow-complex-5: 0 0 6px 0 rgba(255, 255, 255, 0.24) inset,    0 40px 40px -20px rgba(23, 23, 23, 0.04),    0 10px 10px -5px rgba(23, 23, 23, 0.04), 0 6px 6px -3px rgba(23, 23, 23, 0),    0 3px 3px -1.5px rgba(23, 23, 23, 0), 0 1px 1px -0.5px rgba(23, 23, 23, 0);  --shadow-complex-6: 0 40px 40px -20px rgba(23, 23, 23, 0.04),    0 10px 10px -5px rgba(23, 23, 23, 0.04), 0 6px 6px -3px rgba(23, 23, 23, 0),    0 3px 3px -1.5px rgba(23, 23, 23, 0), 0 1px 1px -0.5px rgba(23, 23, 23, 0),    0 0 6px 0 rgba(255, 255, 255, 0.24) inset;  --shadow-complex-7: 0 1px 2px 0 rgba(14, 18, 27, 0.24), 0 0 0 1px #4d82ff;  --shadow-complex-8: 0 20px 20px -10px rgba(23, 23, 23, 0.04),    0 10px 10px -5px rgba(23, 23, 23, 0.04),    0 6px 6px -3px rgba(23, 23, 23, 0.04),    0 3px 3px -1.5px rgba(23, 23, 23, 0.04),    0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1px rgba(23, 23, 23, 0.08),    0 -1px 1px -0.5px rgba(23, 23, 23, 0.06) inset;  --shadow-complex-9: 0 80px 40px -20px rgba(23, 23, 23, 0.04),    0 40px 40px -20px rgba(23, 23, 23, 0.04),    0 10px 10px -5px rgba(23, 23, 23, 0.04), 0 6px 6px -3px rgba(23, 23, 23, 0),    0 3px 3px -1.5px rgba(23, 23, 23, 0), 0 1px 1px -0.5px rgba(23, 23, 23, 0),    0 0 6px 0 rgba(255, 255, 255, 0.04) inset;  --shadow-complex-10: 0 3px 3px -1.5px rgba(23, 23, 23, 0),    0 1px 1px -0.5px rgba(23, 23, 23, 0);  --shadow-complex-11: 0 -1px 1px -0.5px rgba(23, 23, 23, 0.04) inset,    0 20px 20px -10px rgba(23, 23, 23, 0), 0 10px 10px -5px rgba(23, 23, 23, 0),    0 6px 6px -3px rgba(23, 23, 23, 0), 0 3px 3px -1.5px rgba(23, 23, 23, 0),    0 1px 1px -0.5px rgba(23, 23, 23, 0), 0 0 0 1px rgba(23, 23, 23, 0);  --shadow-custom-input: 0 3px 3px -1.5px rgba(23, 23, 23, 0),    0 1px 1px -0.5px rgba(23, 23, 23, 0), 0 0 0 1px #262626;  --shadow-custom-input-2: 0 3px 3px -1.5px rgba(23, 23, 23, 0),    0 1px 1px -0.5px rgba(23, 23, 23, 0), 0 0 0 1px #262626;  --shadow-custom-input-3:    0 3px 3px -1.5px rgba(23, 23, 23, 0.06),    0 1px 1px -0.5px rgba(23, 23, 23, 0.06);  --shadow-custom-input-4: 0 3px 3px -1.5px rgba(23, 23, 23, 0.04),    0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1px rgba(23, 23, 23, 0);  --shadow-custom-input-active: 0 6px 6px -3px rgba(23, 23, 23, 0.02),    0 3px 3px -1.5px rgba(23, 23, 23, 0.04),    0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1.4px #335cff;  --shadow-gray-shadow: 0 0 0 1px #262626;  --shadow-gray-shadow-4: 0 6px 6px -3px rgba(23, 23, 23, 0),    0 3px 3px -1.5px rgba(23, 23, 23, 0), 0 1px 1px -0.5px rgba(23, 23, 23, 0),    0 0 0 1px #262626, 0 -1px 1px -0.5px rgba(23, 23, 23, 0) inset;}/* Keyframe Animations - CoreUI System */@keyframes spin {  to {    transform: rotate(360deg);  }}@keyframes ping {  75%,  100% {    transform: scale(2);    opacity: 0;  }}@keyframes pulse {  50% {    opacity: 0.5;  }}@keyframes bounce {  0%,  100% {    transform: translateY(-25%);    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);  }  50% {    transform: none;    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);  }}@keyframes accordion-down {  from {    height: 0;    opacity: 0;  }  to {    height: var(--radix-accordion-content-height);    opacity: 1;  }}@keyframes accordion-up {  from {    height: var(--radix-accordion-content-height);    opacity: 1;  }  to {    height: 0;    opacity: 0;  }}/* Custom styles */.remixicon path {  transform: scale(0.8996);  transform-origin: center;}/* CoreUI Body Styles */body {  background: var(--color-bg-white-0);  color: var(--color-text-strong-950);  font-family: Inter, Arial, Helvetica, sans-serif;  margin: 0;  padding: 0;}

Note: The above code includes the complete CoreUI design system with colors, typography, shadows, animations, and dark mode support. You can also get this CSS content by running the CLI command.

That's all! Now you have all CoreUI tokens.

Add the required utils

Go to cn page and setup the utility in your project.
Go to tv page and setup the utility in your project.
Go to recursiveCloneChildren page and setup the utility in your project.
Go to Polymorphic page and setup the utility in your project.

Add the icon library

CoreUI uses Remix Icon.

npm install @remixicon/react

Set up the Inter font

Include Inter font from 'next/font/google':

app/layout.tsx

import { Inter as FontSans } from 'next/font/google'; 
import './globals.css';
import { cn } from '@/utils/cn';

const inter = FontSans({ 
  subsets: ['latin'], 
  variable: '--font-sans', 
}); 

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={cn(inter.variable, 'antialiased')}>
      <body>{/* ... */}</body>
    </html>
  );
}

Note for Tailwind CSS v4: Font configuration is handled via CSS variables in the @theme block, so no additional config file setup is needed.

Add dark mode (optional)

All you need to do to enable dark mode in your app is add the dark class to your root element.

app/layout.tsx

export default function RootLayout({ children }) {
  return (
    <html lang='en' className='dark'> 
      <body>{/* ... */}</body>
    </html>
  );
}

Note: With Tailwind CSS v4, dark mode classes are automatically included when using our @theme configuration.

I recommend next-themes package for an easy dark mode toggle in your app.

That's all

Now you can start adding components to your app. You can begin by adding a Button first.

Next.js

On this page