Get Started

Installation

First, you need to install base-ui and tailwindcss.

pnpm install @base-ui-components/react

Second, add cn helper function following the shadcn/ui documentation.

pnpm add class-variance-authority clsx tailwind-merge lucide-react

import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Third, add css to your project, you can paste the following code to your globals.css file or create a new one and import it in your globals.css file.

Note that if you are using figui in the figma plugin, you need to change the @custom-variant dark (&:is(.dark *)); to @custom-variant dark (&:is(.figma-dark *)); in your globals.css file for dark mode to work properly.

Globals.css

@import 'tailwindcss';

@custom-variant dark (&:is(.dark *));

@theme {
  /* disable all tailwind default colors */
  --color-*: initial;
}

:root {
  /* Sizing */
  --radius-full: 9999px;
  --radius-large: 0.8125rem;
  --radius-medium: 0.3125rem;
  --radius-none: 0;
  --radius-small: 0.125rem;

  --font-family-default:
    'Inter', ui-sans-serif, system-ui, -apple-system, 'BlinkMacSystemFont',
    'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', sans-serif,
    'SFProLocalRange';
  --font-family-display:
    'Inter', ui-sans-serif, system-ui, -apple-system, 'BlinkMacSystemFont',
    'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', sans-serif;
  --font-family-mono: 'Roboto Mono', 'Monaco', 'Courier New', monospace;

  --font-weight-default: 450;
  --font-weight-medium: 450;
  --font-weight-strong: 550;
  --font-weight-heavy: 550;

  /* Typography */
  --text-body-large-font-family: var(--font-family-default);
  --text-body-large-font-size: 0.8125rem;
  --text-body-large-font-weight: var(--font-weight-default);
  --text-body-large-letter-spacing: -0.002rem;
  --text-body-large-line-height: 1.375rem;
  --text-body-large-strong-font-family: var(--font-family-default);
  --text-body-large-strong-font-size: 0.8125rem;
  --text-body-large-strong-font-weight: var(--font-weight-strong);
  --text-body-large-strong-letter-spacing: -0.002rem;
  --text-body-large-strong-line-height: 1.375rem;
  --text-body-medium-font-family: var(--font-family-default);
  --text-body-medium-font-size: 0.6875rem;
  --text-body-medium-font-weight: var(--font-weight-default);
  --text-body-medium-letter-spacing: 0.00344rem;
  --text-body-medium-line-height: 1rem;
  --text-body-medium-strong-font-family: var(--font-family-default);
  --text-body-medium-strong-font-size: 0.6875rem;
  --text-body-medium-strong-font-weight: var(--font-weight-strong);
  --text-body-medium-strong-letter-spacing: 0.00344rem;
  --text-body-medium-strong-line-height: 1rem;
  --text-body-small-font-family: var(--font-family-default);
  --text-body-small-font-size: 0.5625rem;
  --text-body-small-font-weight: var(--font-weight-default);
  --text-body-small-letter-spacing: 0.00281rem;
  --text-body-small-line-height: 0.875rem;
  --text-body-small-strong-font-family: var(--font-family-default);
  --text-body-small-strong-font-size: 0.5625rem;
  --text-body-small-strong-font-weight: 500;
  --text-body-small-strong-letter-spacing: 0.016875rem;
  --text-body-small-strong-line-height: 0.875rem;
  --text-display-font-family: var(--font-family-display);
  --text-display-font-size: 3rem;
  --text-display-font-weight: 400;
  --text-display-letter-spacing: -0.09rem;
  --text-display-line-height: 3.5rem;
  --text-heading-large-font-family: var(--font-family-default);
  --text-heading-large-font-size: 1.5rem;
  --text-heading-large-font-weight: var(--font-weight-strong);
  --text-heading-large-letter-spacing: -0.0255rem;
  --text-heading-large-line-height: 2rem;
  --text-heading-medium-font-family: var(--font-family-default);
  --text-heading-medium-font-size: 0.9375rem;
  --text-heading-medium-font-weight: var(--font-weight-strong);
  --text-heading-medium-letter-spacing: -0.00469rem;
  --text-heading-medium-line-height: 1.5625rem;
  --text-heading-small-font-family: var(--font-family-default);
  --text-heading-small-font-size: 0.8125rem;
  --text-heading-small-font-weight: var(--font-weight-strong);
  --text-heading-small-letter-spacing: -0.002rem;
  --text-heading-small-line-height: 1.375rem;

  --color-black-100: #0000000d;
  --color-black-200: #0000001a;
  --color-black-300: #00000033;
  --color-black-400: #0000004d;
  --color-black-500: #00000080;
  --color-black-600: #000000cc;
  --color-black-700: #000000d9;
  --color-black-800: #000000e5;
  --color-black-900: #000000f2;
  --color-black-1000: #000000;
  --color-blue-100: #f2f9ff;
  --color-blue-200: #e5f4ff;
  --color-blue-300: #bde3ff;
  --color-blue-400: #80caff;
  --color-blue-500: #0d99ff;
  --color-blue-600: #007be5;
  --color-blue-700: #0768cf;
  --color-blue-800: #034ac1;
  --color-blue-900: #093077;
  --color-blue-1000: #0d193f;
  --color-green-100: #edfcf0;
  --color-green-200: #d5f7da;
  --color-green-300: #aff4c6;
  --color-green-400: #85e0a3;
  --color-green-500: #14ae5c;
  --color-green-600: #009951;
  --color-green-700: #008043;
  --color-green-800: #036838;
  --color-green-900: #024626;
  --color-green-1000: #083a23;
  --color-grey-100: #f5f5f5;
  --color-grey-200: #e6e6e6;
  --color-grey-300: #d9d9d9;
  --color-grey-400: #b3b3b3;
  --color-grey-500: #757575;
  --color-grey-600: #444444;
  --color-grey-700: #383838;
  --color-grey-800: #2c2c2c;
  --color-grey-900: #1e1e1e;
  --color-grey-1000: #111111;
  --color-orange-100: #fff4e5;
  --color-orange-200: #ffe0c2;
  --color-orange-300: #fcd19c;
  --color-orange-400: #ffc470;
  --color-orange-500: #ffa629;
  --color-orange-600: #fc9e24;
  --color-orange-700: #f79722;
  --color-orange-800: #dd7c0e;
  --color-orange-900: #ce7012;
  --color-orange-1000: #8a480f;
  --color-pale-blue-100: #f1f5f8;
  --color-pale-blue-200: #e3ecf2;
  --color-pale-blue-300: #d2dae4;
  --color-pale-blue-400: #afbccf;
  --color-pale-blue-500: #667799;
  --color-pale-blue-600: #536383;
  --color-pale-blue-700: #4a5878;
  --color-pale-blue-800: #394360;
  --color-pale-blue-900: #252d41;
  --color-pale-blue-1000: #121721;
  --color-pale-green-100: #f1f8f2;
  --color-pale-green-200: #daecdf;
  --color-pale-green-300: #c3e0cc;
  --color-pale-green-400: #9fc1aa;
  --color-pale-green-500: #678e79;
  --color-pale-green-600: #5c806d;
  --color-pale-green-700: #517361;
  --color-pale-green-800: #476656;
  --color-pale-green-900: #2f483c;
  --color-pale-green-1000: #172b22;
  --color-pale-persimmon-100: #faefeb;
  --color-pale-persimmon-200: #f8e9e2;
  --color-pale-persimmon-300: #f3d6c9;
  --color-pale-persimmon-400: #ebb49d;
  --color-pale-persimmon-500: #d4693b;
  --color-pale-persimmon-600: #a55e40;
  --color-pale-persimmon-700: #864e37;
  --color-pale-persimmon-800: #603a2a;
  --color-pale-persimmon-900: #412b21;
  --color-pale-persimmon-1000: #1f1714;
  --color-pale-pink-100: #f6eef4;
  --color-pale-pink-200: #f2e3ee;
  --color-pale-pink-300: #e8cee1;
  --color-pale-pink-400: #daaace;
  --color-pale-pink-500: #ab5998;
  --color-pale-pink-600: #86507a;
  --color-pale-pink-700: #724667;
  --color-pale-pink-800: #51344a;
  --color-pale-pink-900: #33252f;
  --color-pale-pink-1000: #1b1318;
  --color-pale-purple-100: #f4f1f8;
  --color-pale-purple-200: #ede7f3;
  --color-pale-purple-300: #e0d4ed;
  --color-pale-purple-400: #c5b2dc;
  --color-pale-purple-500: #7f699b;
  --color-pale-purple-600: #6b5884;
  --color-pale-purple-700: #604d75;
  --color-pale-purple-800: #473956;
  --color-pale-purple-900: #33293d;
  --color-pale-purple-1000: #1a141f;
  --color-pale-red-100: #faedeb;
  --color-pale-red-200: #f8e5e2;
  --color-pale-red-300: #f3cfc9;
  --color-pale-red-400: #eba99d;
  --color-pale-red-500: #d4583b;
  --color-pale-red-600: #a55440;
  --color-pale-red-700: #864537;
  --color-pale-red-800: #60332a;
  --color-pale-red-900: #412621;
  --color-pale-red-1000: #1f1514;
  --color-pale-teal-100: #f1f6f8;
  --color-pale-teal-200: #e3eef2;
  --color-pale-teal-300: #cedee4;
  --color-pale-teal-400: #a3c2cc;
  --color-pale-teal-500: #518394;
  --color-pale-teal-600: #436c7a;
  --color-pale-teal-700: #3c606d;
  --color-pale-teal-800: #2f4c56;
  --color-pale-teal-900: #1f3238;
  --color-pale-teal-1000: #101a1e;
  --color-pale-violet-100: #f1f1f8;
  --color-pale-violet-200: #e7e7f3;
  --color-pale-violet-300: #d4d4ed;
  --color-pale-violet-400: #b3b2dc;
  --color-pale-violet-500: #6a699b;
  --color-pale-violet-600: #595884;
  --color-pale-violet-700: #4e4d75;
  --color-pale-violet-800: #393956;
  --color-pale-violet-900: #29293d;
  --color-pale-violet-1000: #14141f;
  --color-pale-yellow-100: #fff5eb;
  --color-pale-yellow-200: #fdeece;
  --color-pale-yellow-300: #f5dfa8;
  --color-pale-yellow-400: #e8cd7d;
  --color-pale-yellow-500: #ad7f00;
  --color-pale-yellow-600: #906800;
  --color-pale-yellow-700: #7a5800;
  --color-pale-yellow-800: #5c4100;
  --color-pale-yellow-900: #3a2a10;
  --color-pale-yellow-1000: #211a12;
  --color-persimmon-100: #fff2eb;
  --color-persimmon-200: #ffdfcc;
  --color-persimmon-300: #ffbb9e;
  --color-persimmon-400: #ffa27a;
  --color-persimmon-500: #ff5c16;
  --color-persimmon-600: #e24c0c;
  --color-persimmon-700: #c53e0d;
  --color-persimmon-800: #aa370d;
  --color-persimmon-900: #842d0b;
  --color-persimmon-1000: #611d0a;
  --color-pink-100: #fff0fe;
  --color-pink-200: #ffe0fc;
  --color-pink-300: #ffbdf2;
  --color-pink-400: #ff99e0;
  --color-pink-500: #ff24bd;
  --color-pink-600: #ea10ac;
  --color-pink-700: #cb0b96;
  --color-pink-800: #971172;
  --color-pink-900: #5f114c;
  --color-pink-1000: #451138;
  --color-purple-100: #f9f5ff;
  --color-purple-200: #f1e5ff;
  --color-purple-300: #e4ccff;
  --color-purple-400: #d9b8ff;
  --color-purple-500: #9747ff;
  --color-purple-600: #8638e5;
  --color-purple-700: #7c2bda;
  --color-purple-800: #681abb;
  --color-purple-900: #4b0d87;
  --color-purple-1000: #2d0f46;
  --color-red-100: #fff5f5;
  --color-red-200: #ffe2e0;
  --color-red-300: #ffc7c2;
  --color-red-400: #ffafa3;
  --color-red-500: #f24822;
  --color-red-600: #dc3412;
  --color-red-700: #bd2915;
  --color-red-800: #9f1f18;
  --color-red-900: #771208;
  --color-red-1000: #660e0b;
  --color-teal-100: #ebfbff;
  --color-teal-200: #cef0f8;
  --color-teal-300: #b6ecf7;
  --color-teal-400: #75d7f0;
  --color-teal-500: #00a2c2;
  --color-teal-600: #0087a8;
  --color-teal-700: #047195;
  --color-teal-800: #085a78;
  --color-teal-900: #093c53;
  --color-teal-1000: #0e2f43;
  --color-violet-100: #f5f5ff;
  --color-violet-200: #ebebff;
  --color-violet-300: #d3d1ff;
  --color-violet-400: #b4b2ff;
  --color-violet-500: #4d49fc;
  --color-violet-600: #443deb;
  --color-violet-700: #3d32e2;
  --color-violet-800: #3620df;
  --color-violet-900: #2f15ac;
  --color-violet-1000: #1d1254;
  --color-white-100: #ffffff0d;
  --color-white-200: #ffffff1a;
  --color-white-300: #ffffff33;
  --color-white-400: #ffffff66;
  --color-white-500: #ffffffb2;
  --color-white-600: #ffffffcc;
  --color-white-700: #ffffffd9;
  --color-white-800: #ffffffe5;
  --color-white-900: #fffffff2;
  --color-white-1000: #ffffff;
  --color-yellow-100: #fffbeb;
  --color-yellow-200: #fff1c2;
  --color-yellow-300: #ffe8a3;
  --color-yellow-400: #ffd966;
  --color-yellow-500: #ffcd29;
  --color-yellow-600: #ffc21a;
  --color-yellow-700: #fab815;
  --color-yellow-800: #eba611;
  --color-yellow-900: #dd940e;
  --color-yellow-1000: #b86200;

  --elevation-100: 0 1px 3px 0 #00000026, 0 0 0.5px 0 #0000004d;
  --elevation-200:
    0 1px 3px 0 #0000001a, 0 3px 8px 0 #0000001a, 0 0 0.5px 0 #0000002e;
  --elevation-300:
    0 1px 3px 0 #0000001a, 0 5px 12px 0 #00000021, 0 0 0.5px 0 #00000026;
  --elevation-400:
    0 2px 5px 0 #00000026, 0 10px 16px 0 #0000001f, 0 0 0.5px 0 #0000001f;
  --elevation-500:
    0 2px 5px 0 #00000026, 0 10px 24px 0 #0000002e, 0 0 0.5px 0 #00000014;
}

.dark {
  --color-black-100: #0000000d;
  --color-black-200: #0000001a;
  --color-black-300: #00000033;
  --color-black-400: #0000004d;
  --color-black-500: #00000080;
  --color-black-600: #000000cc;
  --color-black-700: #000000d9;
  --color-black-800: #000000e5;
  --color-black-900: #000000f2;
  --color-black-1000: #000000;
  --color-blue-100: #e2f1fd;
  --color-blue-200: #cfe9fc;
  --color-blue-300: #a8d7fa;
  --color-blue-400: #7cc4f8;
  --color-blue-500: #0c8ce9;
  --color-blue-600: #0a6dc2;
  --color-blue-700: #105cad;
  --color-blue-800: #184591;
  --color-blue-900: #1b335f;
  --color-blue-1000: #161e36;
  --color-green-100: #ddfde2;
  --color-green-200: #beefc2;
  --color-green-300: #a1e8b9;
  --color-green-400: #79d297;
  --color-green-500: #198f51;
  --color-green-600: #078348;
  --color-green-700: #0a5c35;
  --color-green-800: #0a4c2d;
  --color-green-900: #082618;
  --color-green-1000: #0b1e15;
  --color-grey-100: #f5f5f5;
  --color-grey-200: #e6e6e6;
  --color-grey-300: #d9d9d9;
  --color-grey-400: #b3b3b3;
  --color-grey-500: #757575;
  --color-grey-600: #444444;
  --color-grey-700: #383838;
  --color-grey-800: #2c2c2c;
  --color-grey-900: #1e1e1e;
  --color-grey-1000: #111111;
  --color-orange-100: #ffedd7;
  --color-orange-200: #fdd9b4;
  --color-orange-300: #fcc67f;
  --color-orange-400: #fcb34a;
  --color-orange-500: #de7d02;
  --color-orange-600: #c86f04;
  --color-orange-700: #ad5f05;
  --color-orange-800: #985306;
  --color-orange-900: #673806;
  --color-orange-1000: #371d06;
  --color-pale-blue-100: #f1f5f8;
  --color-pale-blue-200: #e3ecf2;
  --color-pale-blue-300: #d2dae4;
  --color-pale-blue-400: #afbccf;
  --color-pale-blue-500: #667799;
  --color-pale-blue-600: #536383;
  --color-pale-blue-700: #4a5878;
  --color-pale-blue-800: #394360;
  --color-pale-blue-900: #252d41;
  --color-pale-blue-1000: #121721;
  --color-pale-green-100: #f1f8f2;
  --color-pale-green-200: #daecdf;
  --color-pale-green-300: #c3e0cc;
  --color-pale-green-400: #9fc1aa;
  --color-pale-green-500: #678e79;
  --color-pale-green-600: #5c806d;
  --color-pale-green-700: #517361;
  --color-pale-green-800: #476656;
  --color-pale-green-900: #2f483c;
  --color-pale-green-1000: #172b22;
  --color-pale-persimmon-100: #faefeb;
  --color-pale-persimmon-200: #f8e9e2;
  --color-pale-persimmon-300: #f3d6c9;
  --color-pale-persimmon-400: #ebb49d;
  --color-pale-persimmon-500: #d4693b;
  --color-pale-persimmon-600: #a55e40;
  --color-pale-persimmon-700: #864e37;
  --color-pale-persimmon-800: #603a2a;
  --color-pale-persimmon-900: #412b21;
  --color-pale-persimmon-1000: #1f1714;
  --color-pale-pink-100: #f6eef4;
  --color-pale-pink-200: #f2e3ee;
  --color-pale-pink-300: #e8cee1;
  --color-pale-pink-400: #daaace;
  --color-pale-pink-500: #ab5998;
  --color-pale-pink-600: #86507a;
  --color-pale-pink-700: #724667;
  --color-pale-pink-800: #51344a;
  --color-pale-pink-900: #33252f;
  --color-pale-pink-1000: #1b1318;
  --color-pale-purple-100: #f4f1f8;
  --color-pale-purple-200: #ede7f3;
  --color-pale-purple-300: #e0d4ed;
  --color-pale-purple-400: #c5b2dc;
  --color-pale-purple-500: #7f699b;
  --color-pale-purple-600: #6b5884;
  --color-pale-purple-700: #604d75;
  --color-pale-purple-800: #473956;
  --color-pale-purple-900: #33293d;
  --color-pale-purple-1000: #1a141f;
  --color-pale-red-100: #faedeb;
  --color-pale-red-200: #f8e5e2;
  --color-pale-red-300: #f3cfc9;
  --color-pale-red-400: #eba99d;
  --color-pale-red-500: #d4583b;
  --color-pale-red-600: #a55440;
  --color-pale-red-700: #864537;
  --color-pale-red-800: #60332a;
  --color-pale-red-900: #412621;
  --color-pale-red-1000: #1f1514;
  --color-pale-teal-100: #f1f6f8;
  --color-pale-teal-200: #e3eef2;
  --color-pale-teal-300: #cedee4;
  --color-pale-teal-400: #a3c2cc;
  --color-pale-teal-500: #518394;
  --color-pale-teal-600: #436c7a;
  --color-pale-teal-700: #3c606d;
  --color-pale-teal-800: #2f4c56;
  --color-pale-teal-900: #1f3238;
  --color-pale-teal-1000: #101a1e;
  --color-pale-violet-100: #f1f1f8;
  --color-pale-violet-200: #e7e7f3;
  --color-pale-violet-300: #d4d4ed;
  --color-pale-violet-400: #b3b2dc;
  --color-pale-violet-500: #6a699b;
  --color-pale-violet-600: #595884;
  --color-pale-violet-700: #4e4d75;
  --color-pale-violet-800: #393956;
  --color-pale-violet-900: #29293d;
  --color-pale-violet-1000: #14141f;
  --color-pale-yellow-100: #fff5eb;
  --color-pale-yellow-200: #fdeece;
  --color-pale-yellow-300: #f5dfa8;
  --color-pale-yellow-400: #e8cd7d;
  --color-pale-yellow-500: #ad7f00;
  --color-pale-yellow-600: #906800;
  --color-pale-yellow-700: #7a5800;
  --color-pale-yellow-800: #5c4100;
  --color-pale-yellow-900: #3a2a10;
  --color-pale-yellow-1000: #211a12;
  --color-persimmon-100: #ffe8db;
  --color-persimmon-200: #fed2b8;
  --color-persimmon-300: #ffb494;
  --color-persimmon-400: #ffa27a;
  --color-persimmon-500: #f65009;
  --color-persimmon-600: #db4606;
  --color-persimmon-700: #b93f13;
  --color-persimmon-800: #8e3210;
  --color-persimmon-900: #59220d;
  --color-persimmon-1000: #43160a;
  --color-pink-100: #fde2fb;
  --color-pink-200: #fccaf8;
  --color-pink-300: #fbb1ed;
  --color-pink-400: #fc9ce0;
  --color-pink-500: #f316b0;
  --color-pink-600: #d01b9c;
  --color-pink-700: #96207a;
  --color-pink-800: #68275e;
  --color-pink-900: #46253e;
  --color-pink-1000: #231a21;
  --color-purple-100: #f1e7fe;
  --color-purple-200: #e3cffc;
  --color-purple-300: #d6b6fb;
  --color-purple-400: #d1a8ff;
  --color-purple-500: #8a38f5;
  --color-purple-600: #7a2ed6;
  --color-purple-700: #652ca8;
  --color-purple-800: #50297a;
  --color-purple-900: #3e2654;
  --color-purple-1000: #1f1924;
  --color-red-100: #fee7e7;
  --color-red-200: #fccdca;
  --color-red-300: #fbbcb6;
  --color-red-400: #fca397;
  --color-red-500: #e03e1a;
  --color-red-600: #c4381c;
  --color-red-700: #963323;
  --color-red-800: #7c2622;
  --color-red-900: #54211c;
  --color-red-1000: #311817;
  --color-teal-100: #ddf7fd;
  --color-teal-200: #bce6f1;
  --color-teal-300: #a4e2ef;
  --color-teal-400: #67cbe4;
  --color-teal-500: #0887a0;
  --color-teal-600: #087691;
  --color-teal-700: #0a5b76;
  --color-teal-800: #0c455a;
  --color-teal-900: #0c2937;
  --color-teal-1000: #0e1f2a;
  --color-violet-100: #f5f5ff;
  --color-violet-200: #e6e5ff;
  --color-violet-300: #ceccff;
  --color-violet-400: #b9b8ff;
  --color-violet-500: #3d38f5;
  --color-violet-600: #3b34d5;
  --color-violet-700: #372cc9;
  --color-violet-800: #3927be;
  --color-violet-900: #302579;
  --color-violet-1000: #1d1835;
  --color-white-100: #ffffff0d;
  --color-white-200: #ffffff1a;
  --color-white-300: #ffffff33;
  --color-white-400: #ffffff66;
  --color-white-500: #ffffffb2;
  --color-white-600: #ffffffcc;
  --color-white-700: #ffffffd9;
  --color-white-800: #ffffffe5;
  --color-white-900: #fffffff2;
  --color-white-1000: #ffffff;
  --color-yellow-100: #fdf7dd;
  --color-yellow-200: #fbe8ad;
  --color-yellow-300: #f9df90;
  --color-yellow-400: #f7d15f;
  --color-yellow-500: #f3c11b;
  --color-yellow-600: #f2b50d;
  --color-yellow-700: #e4a711;
  --color-yellow-800: #c58011;
  --color-yellow-900: #925711;
  --color-yellow-1000: #71440f;

  --elevation-100:
    0 1px 3px 0 #00000066, inset 0 0 0.5px 0 #ffffff4d,
    inset 0 0.5px 0 0 #ffffff1a, 0 0 0.5px 0 #00000080;
  --elevation-200:
    0 1px 3px 0 #00000080, inset 0 0 0.5px 0 #ffffff4d, 0 3px 8px 0 #00000059,
    inset 0 0.5px 0 0 #ffffff14;
  --elevation-300:
    0 1px 3px 0 #00000080, inset 0 0 0.5px 0 #ffffff4d, 0 5px 12px 0 #00000059,
    inset 0 0.5px 0 0 #ffffff14;
  --elevation-400:
    0 2px 5px 0 #00000059, inset 0 0 0.5px 0 #ffffff59, 0 10px 16px 0 #00000059,
    inset 0 0.5px 0 0 #ffffff14;
  --elevation-500:
    0 3px 5px 0 #00000059, inset 0 0 0.5px 0 #ffffff59, 0 10px 24px 0 #00000073,
    inset 0 0.5px 0 0 #ffffff14;
}

@layer components {
  .typography-body-small {
    font-family: var(--text-body-small-font-family);
    font-size: var(--text-body-small-font-size);
    font-weight: var(--text-body-small-font-weight);
    line-height: var(--text-body-small-line-height);
    letter-spacing: var(--text-body-small-letter-spacing);
  }
  .typography-body-medium {
    font-family: var(--text-body-medium-font-family);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-strong-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
  }
  .typography-body-large {
    font-family: var(--text-body-large-font-family);
    font-size: var(--text-body-large-font-size);
    font-weight: var(--text-body-large-font-weight);
    line-height: var(--text-body-large-line-height);
    letter-spacing: var(--text-body-large-letter-spacing);
  }

  .typography-body-small-strong {
    font-family: var(--text-body-small-strong-font-family);
    font-size: var(--text-body-small-strong-font-size);
    font-weight: var(--text-body-small-strong-font-weight);
    line-height: var(--text-body-small-strong-line-height);
    letter-spacing: var(--text-body-small-strong-letter-spacing);
  }

  .typography-body-medium-strong {
    font-family: var(--text-body-medium-strong-font-family);
    font-size: var(--text-body-medium-strong-font-size);
    font-weight: var(--text-body-medium-strong-font-weight);
    line-height: var(--text-body-medium-strong-line-height);
    letter-spacing: var(--text-body-medium-strong-letter-spacing);
  }

  .typography-body-large-strong {
    font-family: var(--text-body-large-strong-font-family);
    font-size: var(--text-body-large-strong-font-size);
    font-weight: var(--text-body-large-strong-font-weight);
    line-height: var(--text-body-large-strong-line-height);
    letter-spacing: var(--text-body-large-strong-letter-spacing);
  }

  .typography-heading-small {
    font-family: var(--text-heading-small-font-family);
    font-size: var(--text-heading-small-font-size);
    font-weight: var(--text-heading-small-font-weight);
    line-height: var(--text-heading-small-line-height);
    letter-spacing: var(--text-heading-small-letter-spacing);
  }
  .typography-heading-medium {
    font-family: var(--text-heading-medium-font-family);
    font-size: var(--text-heading-medium-font-size);
    font-weight: var(--text-heading-medium-font-weight);
    line-height: var(--text-heading-medium-line-height);
    letter-spacing: var(--text-heading-medium-letter-spacing);
  }

  .typography-heading-large {
    font-family: var(--text-heading-large-font-family);
    font-size: var(--text-heading-large-font-size);
    font-weight: var(--text-heading-large-font-weight);
    line-height: var(--text-heading-large-line-height);
    letter-spacing: var(--text-heading-large-letter-spacing);
  }

  .typography-display {
    font-family: var(--text-display-font-family);
    font-size: var(--text-display-font-size);
    font-weight: var(--text-display-font-weight);
    line-height: var(--text-display-line-height);
    letter-spacing: var(--text-display-letter-spacing);
  }
}

@theme inline {
  --radius-full: var(--radius-full);
  --radius-lg: var(--radius-large);
  --radius-md: var(--radius-medium);
  --radius-none: var(--radius-none);
  --radius-sm: var(--radius-small);

  --shadow-100: var(--elevation-100);
  --shadow-200: var(--elevation-200);
  --shadow-300: var(--elevation-300);
  --shadow-400: var(--elevation-400);
  --shadow-500: var(--elevation-500);

  --color-black-100: var(--color-black-100);
  --color-black-200: var(--color-black-200);
  --color-black-300: var(--color-black-300);
  --color-black-400: var(--color-black-400);
  --color-black-500: var(--color-black-500);
  --color-black-600: var(--color-black-600);
  --color-black-700: var(--color-black-700);
  --color-black-800: var(--color-black-800);
  --color-black-900: var(--color-black-900);
  --color-black-1000: var(--color-black-1000);
  --color-blue-100: var(--color-blue-100);
  --color-blue-200: var(--color-blue-200);
  --color-blue-300: var(--color-blue-300);
  --color-blue-400: var(--color-blue-400);
  --color-blue-500: var(--color-blue-500);
  --color-blue-600: var(--color-blue-600);
  --color-blue-700: var(--color-blue-700);
  --color-blue-800: var(--color-blue-800);
  --color-blue-900: var(--color-blue-900);
  --color-blue-1000: var(--color-blue-1000);
  --color-green-100: var(--color-green-100);
  --color-green-200: var(--color-green-200);
  --color-green-300: var(--color-green-300);
  --color-green-400: var(--color-green-400);
  --color-green-500: var(--color-green-500);
  --color-green-600: var(--color-green-600);
  --color-green-700: var(--color-green-700);
  --color-green-800: var(--color-green-800);
  --color-green-900: var(--color-green-900);
  --color-green-1000: var(--color-green-1000);
  --color-grey-100: var(--color-grey-100);
  --color-grey-200: var(--color-grey-200);
  --color-grey-300: var(--color-grey-300);
  --color-grey-400: var(--color-grey-400);
  --color-grey-500: var(--color-grey-500);
  --color-grey-600: var(--color-grey-600);
  --color-grey-700: var(--color-grey-700);
  --color-grey-800: var(--color-grey-800);
  --color-grey-900: var(--color-grey-900);
  --color-grey-1000: var(--color-grey-1000);
  --color-orange-100: var(--color-orange-100);
  --color-orange-200: var(--color-orange-200);
  --color-orange-300: var(--color-orange-300);
  --color-orange-400: var(--color-orange-400);
  --color-orange-500: var(--color-orange-500);
  --color-orange-600: var(--color-orange-600);
  --color-orange-700: var(--color-orange-700);
  --color-orange-800: var(--color-orange-800);
  --color-orange-900: var(--color-orange-900);
  --color-orange-1000: var(--color-orange-1000);
  --color-pale-blue-100: var(--color-pale-blue-100);
  --color-pale-blue-200: var(--color-pale-blue-200);
  --color-pale-blue-300: var(--color-pale-blue-300);
  --color-pale-blue-400: var(--color-pale-blue-400);
  --color-pale-blue-500: var(--color-pale-blue-500);
  --color-pale-blue-600: var(--color-pale-blue-600);
  --color-pale-blue-700: var(--color-pale-blue-700);
  --color-pale-blue-800: var(--color-pale-blue-800);
  --color-pale-blue-900: var(--color-pale-blue-900);
  --color-pale-blue-1000: var(--color-pale-blue-1000);
  --color-pale-green-100: var(--color-pale-green-100);
  --color-pale-green-200: var(--color-pale-green-200);
  --color-pale-green-300: var(--color-pale-green-300);
  --color-pale-green-400: var(--color-pale-green-400);
  --color-pale-green-500: var(--color-pale-green-500);
  --color-pale-green-600: var(--color-pale-green-600);
  --color-pale-green-700: var(--color-pale-green-700);
  --color-pale-green-800: var(--color-pale-green-800);
  --color-pale-green-900: var(--color-pale-green-900);
  --color-pale-green-1000: var(--color-pale-green-1000);
  --color-pale-persimmon-100: var(--color-pale-persimmon-100);
  --color-pale-persimmon-200: var(--color-pale-persimmon-200);
  --color-pale-persimmon-300: var(--color-pale-persimmon-300);
  --color-pale-persimmon-400: var(--color-pale-persimmon-400);
  --color-pale-persimmon-500: var(--color-pale-persimmon-500);
  --color-pale-persimmon-600: var(--color-pale-persimmon-600);
  --color-pale-persimmon-700: var(--color-pale-persimmon-700);
  --color-pale-persimmon-800: var(--color-pale-persimmon-800);
  --color-pale-persimmon-900: var(--color-pale-persimmon-900);
  --color-pale-persimmon-1000: var(--color-pale-persimmon-1000);
  --color-pale-pink-100: var(--color-pale-pink-100);
  --color-pale-pink-200: var(--color-pale-pink-200);
  --color-pale-pink-300: var(--color-pale-pink-300);
  --color-pale-pink-400: var(--color-pale-pink-400);
  --color-pale-pink-500: var(--color-pale-pink-500);
  --color-pale-pink-600: var(--color-pale-pink-600);
  --color-pale-pink-700: var(--color-pale-pink-700);
  --color-pale-pink-800: var(--color-pale-pink-800);
  --color-pale-pink-900: var(--color-pale-pink-900);
  --color-pale-pink-1000: var(--color-pale-pink-1000);
  --color-pale-purple-100: var(--color-pale-purple-100);
  --color-pale-purple-200: var(--color-pale-purple-200);
  --color-pale-purple-300: var(--color-pale-purple-300);
  --color-pale-purple-400: var(--color-pale-purple-400);
  --color-pale-purple-500: var(--color-pale-purple-500);
  --color-pale-purple-600: var(--color-pale-purple-600);
  --color-pale-purple-700: var(--color-pale-purple-700);
  --color-pale-purple-800: var(--color-pale-purple-800);
  --color-pale-purple-900: var(--color-pale-purple-900);
  --color-pale-purple-1000: var(--color-pale-purple-1000);
  --color-pale-red-100: var(--color-pale-red-100);
  --color-pale-red-200: var(--color-pale-red-200);
  --color-pale-red-300: var(--color-pale-red-300);
  --color-pale-red-400: var(--color-pale-red-400);
  --color-pale-red-500: var(--color-pale-red-500);
  --color-pale-red-600: var(--color-pale-red-600);
  --color-pale-red-700: var(--color-pale-red-700);
  --color-pale-red-800: var(--color-pale-red-800);
  --color-pale-red-900: var(--color-pale-red-900);
  --color-pale-red-1000: var(--color-pale-red-1000);
  --color-pale-teal-100: var(--color-pale-teal-100);
  --color-pale-teal-200: var(--color-pale-teal-200);
  --color-pale-teal-300: var(--color-pale-teal-300);
  --color-pale-teal-400: var(--color-pale-teal-400);
  --color-pale-teal-500: var(--color-pale-teal-500);
  --color-pale-teal-600: var(--color-pale-teal-600);
  --color-pale-teal-700: var(--color-pale-teal-700);
  --color-pale-teal-800: var(--color-pale-teal-800);
  --color-pale-teal-900: var(--color-pale-teal-900);
  --color-pale-teal-1000: var(--color-pale-teal-1000);
  --color-pale-violet-100: var(--color-pale-violet-100);
  --color-pale-violet-200: var(--color-pale-violet-200);
  --color-pale-violet-300: var(--color-pale-violet-300);
  --color-pale-violet-400: var(--color-pale-violet-400);
  --color-pale-violet-500: var(--color-pale-violet-500);
  --color-pale-violet-600: var(--color-pale-violet-600);
  --color-pale-violet-700: var(--color-pale-violet-700);
  --color-pale-violet-800: var(--color-pale-violet-800);
  --color-pale-violet-900: var(--color-pale-violet-900);
  --color-pale-violet-1000: var(--color-pale-violet-1000);
  --color-pale-yellow-100: var(--color-pale-yellow-100);
  --color-pale-yellow-200: var(--color-pale-yellow-200);
  --color-pale-yellow-300: var(--color-pale-yellow-300);
  --color-pale-yellow-400: var(--color-pale-yellow-400);
  --color-pale-yellow-500: var(--color-pale-yellow-500);
  --color-pale-yellow-600: var(--color-pale-yellow-600);
  --color-pale-yellow-700: var(--color-pale-yellow-700);
  --color-pale-yellow-800: var(--color-pale-yellow-800);
  --color-pale-yellow-900: var(--color-pale-yellow-900);
  --color-pale-yellow-1000: var(--color-pale-yellow-1000);
  --color-persimmon-100: var(--color-persimmon-100);
  --color-persimmon-200: var(--color-persimmon-200);
  --color-persimmon-300: var(--color-persimmon-300);
  --color-persimmon-400: var(--color-persimmon-400);
  --color-persimmon-500: var(--color-persimmon-500);
  --color-persimmon-600: var(--color-persimmon-600);
  --color-persimmon-700: var(--color-persimmon-700);
  --color-persimmon-800: var(--color-persimmon-800);
  --color-persimmon-900: var(--color-persimmon-900);
  --color-persimmon-1000: var(--color-persimmon-1000);
  --color-pink-100: var(--color-pink-100);
  --color-pink-200: var(--color-pink-200);
  --color-pink-300: var(--color-pink-300);
  --color-pink-400: var(--color-pink-400);
  --color-pink-500: var(--color-pink-500);
  --color-pink-600: var(--color-pink-600);
  --color-pink-700: var(--color-pink-700);
  --color-pink-800: var(--color-pink-800);
  --color-pink-900: var(--color-pink-900);
  --color-pink-1000: var(--color-pink-1000);
  --color-purple-100: var(--color-purple-100);
  --color-purple-200: var(--color-purple-200);
  --color-purple-300: var(--color-purple-300);
  --color-purple-400: var(--color-purple-400);
  --color-purple-500: var(--color-purple-500);
  --color-purple-600: var(--color-purple-600);
  --color-purple-700: var(--color-purple-700);
  --color-purple-800: var(--color-purple-800);
  --color-purple-900: var(--color-purple-900);
  --color-purple-1000: var(--color-purple-1000);
  --color-red-100: var(--color-red-100);
  --color-red-200: var(--color-red-200);
  --color-red-300: var(--color-red-300);
  --color-red-400: var(--color-red-400);
  --color-red-500: var(--color-red-500);
  --color-red-600: var(--color-red-600);
  --color-red-700: var(--color-red-700);
  --color-red-800: var(--color-red-800);
  --color-red-900: var(--color-red-900);
  --color-red-1000: var(--color-red-1000);
  --color-teal-100: var(--color-teal-100);
  --color-teal-200: var(--color-teal-200);
  --color-teal-300: var(--color-teal-300);
  --color-teal-400: var(--color-teal-400);
  --color-teal-500: var(--color-teal-500);
  --color-teal-600: var(--color-teal-600);
  --color-teal-700: var(--color-teal-700);
  --color-teal-800: var(--color-teal-800);
  --color-teal-900: var(--color-teal-900);
  --color-teal-1000: var(--color-teal-1000);
  --color-violet-100: var(--color-violet-100);
  --color-violet-200: var(--color-violet-200);
  --color-violet-300: var(--color-violet-300);
  --color-violet-400: var(--color-violet-400);
  --color-violet-500: var(--color-violet-500);
  --color-violet-600: var(--color-violet-600);
  --color-violet-700: var(--color-violet-700);
  --color-violet-800: var(--color-violet-800);
  --color-violet-900: var(--color-violet-900);
  --color-violet-1000: var(--color-violet-1000);
  --color-white-100: var(--color-white-100);
  --color-white-200: var(--color-white-200);
  --color-white-300: var(--color-white-300);
  --color-white-400: var(--color-white-400);
  --color-white-500: var(--color-white-500);
  --color-white-600: var(--color-white-600);
  --color-white-700: var(--color-white-700);
  --color-white-800: var(--color-white-800);
  --color-white-900: var(--color-white-900);
  --color-white-1000: var(--color-white-1000);
  --color-yellow-100: var(--color-yellow-100);
  --color-yellow-200: var(--color-yellow-200);
  --color-yellow-300: var(--color-yellow-300);
  --color-yellow-400: var(--color-yellow-400);
  --color-yellow-500: var(--color-yellow-500);
  --color-yellow-600: var(--color-yellow-600);
  --color-yellow-700: var(--color-yellow-700);
  --color-yellow-800: var(--color-yellow-800);
  --color-yellow-900: var(--color-yellow-900);
  --color-yellow-1000: var(--color-yellow-1000);
}

Get Started

Installation

On this page