Radix Homepage
Radix Homepage
ThemesThemesPrimitivesPrimitivesIconsIconsColorsColors
DocumentationCustom paletteBlog

Installation

How to install Radix Colors.

npm

Install Radix Colors from your terminal via npm or yarn. Current version is 2.1.0

# with npm

npm install @radix-ui/colors



# with yarn

yarn add @radix-ui/colors

CDN

To get started quickly, you can use the CDN files.

<!-- Load whichever light and dark scales you need -->

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/gray.css"
/>

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/blue.css"
/>

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/green.css"
/>

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/red.css"
/>

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/gray-dark.css"
/>

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/blue-dark.css"
/>

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/green-dark.css"
/>

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/red-dark.css"
/>

The example above uses the @latest tag to point to the latest version of the scales. You can pin your scales to a specific version.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@radix-ui/colors@2.0.1/blue.css"
/>

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@radix-ui/colors@2.0.1/blue-dark.css"
/>
NextUsage
Edit this page on GitHub.