VIBES: Stunning React components for commerce & marketing

Add CSS variables

Copy and paste the following variables into your globals.css file.

:root {  --primary: 43 100% 50%;  --accent: 43 100% 80%;  --background: 0 0% 100%;  --foreground: 0 0% 7%;  --success: 116, 46%, 49%;  --error: 0, 100%, 50%;  --warning: 40, 100%, 50%;  --info: 220 70% 45%;  --contrast-100: 0 0% 93%;  --contrast-200: 0 0% 89%;  --contrast-300: 0 0% 72%;  --contrast-400: 0 0% 60%;  --contrast-500: 0 0% 53%;  --font-variation-settings-body: "slnt" 0;  --font-variation-settings-heading: "slnt" 0;  --font-size-xs: 0.75rem;  --font-size-sm: 0.875rem;  --font-size-base: 1rem;  --font-size-lg: 1.125rem;  --font-size-xl: 1.25rem;  --font-size-2xl: 1.5rem;  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);  --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);}

Install fonts

Add the following code to your root layout.tsx file.

import { Inter, Inter } from 'next/font/google'import './globals.css'const inter = Inter({  display: "swap",  subsets: [    "latin"  ],  variable: "--font-family-body"})const inter = Inter({  display: "swap",  subsets: [    "latin"  ],  variable: "--font-family-heading"})export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body className={[inter.variable, inter.variable].join(' ')}>{children}</body> // [!code highlight]    </html>  );}'

Brand

primary

#FFB700

accent

#FFE299

success

#4BB643

warning

#FFAA00

error

#FF0000

Neutrals

foreground

#121212

contrast-100

#EDEDED

contrast-200

#E3E3E3

contrast-300

#B8B8B8

contrast-400

#999999

contrast-500

#878787

background

#FFFFFF