Usage

How to use Radix Colors with various styling solutions.

Radix Colors scales are just simple JavaScript objects, so you can use them with your preferred styling solution easily. Below you can find usage examples for popular styling solutions.

Vanilla CSS

Radix Colors provides the colors bundled as raw CSS files. You can import them directly in your files when using a bundler, such as Parcel or Webpack.

/* Import only the scales you need */
@import '@radix-ui/colors/gray.css';
@import '@radix-ui/colors/blue.css';
@import '@radix-ui/colors/green.css';
@import '@radix-ui/colors/red.css';
@import '@radix-ui/colors/gray-dark.css';
@import '@radix-ui/colors/blue-dark.css';
@import '@radix-ui/colors/green-dark.css';
@import '@radix-ui/colors/red-dark.css';

/* Use the colors as CSS variables */
.button {
  background-color: var(--blue-4);
  color: var(--blue-11);
  border-color: var(--blue-7);
}
.button:hover {
  background-color: var(--blue-5);
  border-color: var(--blue-8);
}

<!-- For dark mode, apply a `.dark` class to <body> or a parent. -->
<body class="dark">
  <button class="button">Button</button>
</body>

Stitches

import {
  gray,
  blue,
  red,
  green,
  grayDark,
  blueDark,
  redDark,
  greenDark,
} from '@radix-ui/colors';

// Spread the scales in your light and dark themes
import { createStitches } from '@stitches/react';

const { styled, createTheme } = createStitches({
  theme: {
    colors: {
      ...gray,
      ...blue,
      ...red,
      ...green,
    },
  },
});

const darkTheme = createTheme({
  colors: {
    ...grayDark,
    ...blueDark,
    ...redDark,
    ...greenDark,
  },
});

// Use the colors in your styles
const Button = styled('button', {
  backgroundColor: '$blue4',
  color: '$blue11',
  borderColor: '$blue7',
  '&:hover': {
    backgroundColor: '$blue5',
    borderColor: '$blue8',
  },
});

styled-components

import {
  gray,
  blue,
  red,
  green,
  grayDark,
  blueDark,
  redDark,
  greenDark,
} from '@radix-ui/colors';
import styled, { ThemeProvider } from 'styled-components';

// Create your theme
const theme = {
  colors: {
    ...gray,
    ...blue,
    ...red,
    ...green,
  },
};

// Create your dark theme
const darkTheme = {
  colors: {
    ...grayDark,
    ...blueDark,
    ...redDark,
    ...greenDark,
  },
};

// Use the colors in your styles
const Button = styled.button`
  background-color: ${(props) => props.theme.colors.blue4};
  color: ${(props) => props.theme.colors.blue11};
  border-color: ${(props) => props.theme.colors.blue7};
  &:hover {
    background-color: ${(props) => props.theme.colors.blue5};
    border-color: ${(props) => props.theme.colors.blue8};
  }
`;

// Wrap your app with the theme provider and apply your theme to it
export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button>Radix Colors</Button>
    </ThemeProvider>
  );
}

emotion

Usage with emotion is almost identical to the styled-components docs above, aside from the different imports.

import {
  gray,
  blue,
  red,
  green,
  grayDark,
  blueDark,
  redDark,
  greenDark,
} from '@radix-ui/colors';
import { ThemeProvider } from '@emotion/react';
import styled from '@emotion/styled';

PreviousInstallation

NextAliasing

Edit this page on GitHub.