Getting started
Add dependencies to your project.
1. Add Tailwind CSS
Components are styled using Tailwind CSS. You need to install Tailwind CSS in your project.
Follow the Tailwind CSS installation instructions to get started.
2. Add dependencies
Add the following dependencies to your project:
npm install tailwindcss-animate class-variance-authority clsx tailwind-merge @radix-ui/react-avatar @radix-ui/react-checkbox @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-label @radix-ui/react-radio-group @radix-ui/react-tooltip @radix-ui/react-select @radix-ui/react-switch @radix-ui/react-tabs3. Add icon library
npm install lucide-react4. Configure path aliases
The @ alias is a preference. You can use other aliases if you want.
tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./*"]
}
}
}If you use a different alias such as ~, you'll need to update import statements when adding components.
5. Configure tailwind.config.js
tailwind.config.js
function opacity() {
const values = Array.from({ length: 21 }, (_, i) => ({
[i * 5]: `${(i * 5) / 100}`,
})).reduce((acc, cur) => ({ ...acc, ...cur }), {})
return {
...values,
1: "0.01",
2: "0.02",
3: "0.03",
4: "0.04",
6: "0.06",
7: "0.07",
8: "0.08",
9: "0.09",
11: "0.11",
12: "0.12",
}
}
function zIndex() {
const values = Array.from({ length: 51 }, (_, i) => ({
[i]: i,
})).reduce((acc, cur) => ({ ...acc, ...cur }), {})
return { ...values, select: "20", auto: "auto" }
}
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ["class"],
content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
theme: {
extend: {
width: {
5.5: "1.375rem",
6.5: "1.625rem",
7.5: "1.875rem",
8.5: "2.125rem",
9.5: "2.375rem",
},
maxWidth: {
"8xl": "92rem",
},
height: {
5.5: "1.375rem",
6.5: "1.625rem",
7.5: "1.875rem",
8.5: "2.125rem",
9.5: "2.375rem",
},
backgroundColor: {
surface: {
50: "var(--surface-50)",
100: "var(--surface-100)",
200: "var(--surface-200)",
},
},
borderColor: {
DEFAULT: "var(--border-color-default)",
primary: "var(--border-color-primary)",
secondary: "var(--border-color-secondary)",
},
borderRadius: {
sm: "4px",
DEFAULT: "6px",
inherit: "inherit",
oval: "50%",
},
boxShadow: {
xs: "var(--shadow-xs)",
},
colors: {
white: "#FFFFFF",
black: "#131316",
vantablack: "#000000",
gray: {
25: "#FAFAFB",
50: "#F7F7F8",
100: "#EEEEF0",
150: "#E3E3E7",
200: "#D9D9DE",
300: "#B7B8C2",
400: "#9394A1",
500: "#747686",
600: "#5E5F6E",
700: "#42434D",
750: "#373840",
800: "#2F3037",
850: "#27272D",
900: "#212126",
950: "#0b0d0e",
},
purple: {
"050": "#F4F2FF",
100: "#EAE8FF",
200: "#D7D4FF",
300: "#BAB1FF",
400: "#9785FF",
500: "#6C47FF",
600: "#6430F7",
700: "#561EE3",
800: "#4818BF",
900: "#3C169C",
950: "#230B6A",
DEFAULT: "#6C47FF",
},
sky: {
"050": "#EBFDFF",
100: "#CCF9FF",
200: "#9FF1FF",
300: "#5DE3FF",
400: "#3AD4FD",
500: "#00AEE3",
600: "#0089BE",
700: "#056D99",
800: "#0E597C",
900: "#104A69",
950: "#043048",
DEFAULT: "#6C47FF",
},
},
fontSize: {
"2xs": ["0.625rem", { lineHeight: "0.8125rem" }], // 10px
xs: ["0.6875rem", { lineHeight: "0.875rem" }], // 11px
sm: ["0.75rem", { lineHeight: "1rem" }], // 12px
base: ["0.875rem", { lineHeight: "1.25rem" }], // 14px
lg: ["0.9375rem", { lineHeight: "1.3125rem" }], // 15px
xl: ["1.0625rem", { lineHeight: "1.5rem" }], // 17px
"2xl": ["1.25rem", { lineHeight: "1.75rem" }], // 22px
"3xl": ["1.5rem", { lineHeight: "2rem" }], // 24px
"4xl": ["2rem", { lineHeight: "2.25rem" }], // 32px
},
fontWeight: {
book: "450",
},
height: {
screen: "100dvh",
},
keyframes: {
"fade-in": {
"0%": { opacity: "0" },
"100%": { opacity: "1" },
},
},
minHeight: {
screen: "100dvh",
},
textColor: {
primary: "var(--text-primary)",
secondary: "var(--text-secondary)",
tertiary: "var(--text-tertiary)",
placeholder: "var(--text-placeholder)",
},
spacing: {
px: "0.0625rem",
xs: "0.125rem",
sm: "0.1875rem",
4.5: "1.125rem",
},
},
opacity: opacity(),
zIndex: zIndex(),
},
plugins: [require("tailwindcss-animate")],
}6. Configure styles
Add the following to your styles/globals.css file. You can learn more about using CSS variables for theming in the theming section.
globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
* {
-webkit-tap-highlight-color: transparent;
}
/* Light */
:root,
.light,
.dark .invert-theme,
.light .dark .invert-theme {
--text-primary: theme(colors.gray.800);
--text-secondary: theme(colors.gray.600);
--text-tertiary: theme(colors.gray.400);
--text-placeholder: theme(colors.gray.300);
--border-color-primary: theme(colors.gray.100);
--border-color-secondary: theme(colors.gray.50);
--border-color-default: var(--border-color-primary);
--shadow-xs: 0px 0px 2px 0px theme(colors.black/8%), 0px 1px 2px 0px theme(colors.black/6%),
0px 0px 0px 1px theme(colors.black/4%);
--surface-50: theme(colors.gray.100);
--surface-100: theme(colors.gray.50);
--surface-200: theme(colors.white);
color: var(--text-primary);
}
/* Dark */
.dark,
.light .invert-theme,
.dark .light .invert-theme {
--text-primary: theme(colors.gray.100);
--text-secondary: theme(colors.gray.400);
--text-tertiary: theme(colors.gray.500);
--text-placeholder: theme(colors.gray.600);
--border-color-primary: theme(colors.gray.750);
--border-color-secondary: theme(colors.gray.800);
--shadow-xs: 0px 1.5px 2px 0px theme(colors.black/32%), 0px -1px 0px 0px
theme(colors.white/4%), 0px 0px 0px 1px theme(colors.white/12%);
--surface-50: theme(colors.black);
--surface-100: theme(colors.gray.900);
--surface-200: theme(colors.gray.850);
color: var(--text-primary);
}
}That's it
You can now start adding components to your project.