Skip to main content
Unlock powerful debugging and effortless query monitoring with Refine DevtoolsLearn More
Building components with Radix UI
11 min read

Building components with Radix UI

Introduction​

Radix is an open-source headless library that provides components for creating user-friendly, high-quality React online applications and design systems. It offers a wide range of accessible headless primitives, meant to expedite development by providing frequently used UI elements such as dialogues, selections, accordions, tabs, and more. In this article, we will illustrate how to build components with Radix.

Radix Building Blocks​

Radix consists of four building blocks: Primitives, Colors, Icons and Themes. These tools can be used to create comprehensive design systems. Let's take a deeper look at each product and see how they can be utilized independently or together to meet your needs.

Primitives​

Radix Primitives is a UI component library that helps you create high-quality, user-friendly design systems and web applications. It is a collection of low-level UI component libraries with a focus on accessibility, customization, and the developer experience. These components can be used as the foundation of your design system or added to it incrementally.

Radix Primitives was designed with the goal of creating controllable headless components. All of its wiring is done internally, allowing you to start using the components as soon as possible.

The Components are also shipped with zero styles, providing you complete styling control. Components can be styled using any styling method (vanilla CSS, CSS preprocessors/frameworks, CSS-in-JS libraries).

Here is an example of a Radix accordion primitive

import * as Accordion from "@radix-ui/react-accordion";

export default () => (
  <Accordion.Root type="single" defaultValue="item-1" collapsible>
    <Accordion.Item value="item-1">
      <Accordion.Header>
        <Accordion.Trigger>This is an accordion</Accordion.Trigger>
      </Accordion.Header>
      <Accordion.Content>
        Yes. It's unstyled by default, giving you freedom over the look and
        feel.
      </Accordion.Content>
    </Accordion.Item>
  </Accordion.Root>
);

The primitive also have access to props which are listed here.

radix ui

Radix provides a large number of primitives, including accordions, dialog boxes, popovers, dropdowns, labels, and many more. To check out those, visit here.

To view the list of Radix Primitives, visit here.

Colors​

Radix Colors is a meticulously created color system used to create aesthethically pleasing web applications. Radix Colors includes a set of scales that are JavaScript objects designed to work with CSS to CSS-in-JS alternatives (for example, styled-components). It also bundles the colors as raw CSS files which you can import straight into your files when using a bundler like Parcel or Webpack.

To view more on Radix Colors, visit here.

Icons​

Radix Icons provides a set of 15×15 icons that are accessible as separate components and can be installed as a single package which you can import in your React components. Radix Icons are also accessible in other formats, including downloadable SVGs, Figma, and Sketch files.

To view more on Radix Icons, visit here.

Themes​

Radix Themes is a pre-styled component library that works out of the box and requires minimum configuration. Radix Themes doesn't include a styling system. There are no CSS or SX props, and no styling libraries are used inside. It's made with standard CSS. However, the themes can be customized by altering the token system's CSS variables. The list of the variables supported by the token system is listed here.

This article will include explanations for the Reset, Grid, and Theme components. However, to see more components that themes provide, visit here.

Reset component​

TheReset component is used to forcibly reset browser styles for a specified element.

Under the hood, it generates a Slot primitive (a Radix primitive) which does the following:

  • Accepts one React element as its child.
  • Removes opinionated browser styles.
  • Sets idiomatic layout defaults, such as display: block for photos or width: Stretch for inputs.
  • Sets the cursor style based on your theme settings.
  • Adds the property box-sizing: border-box.

An example of the Reset component in use is illustrated in the code below:

import { Reset } from "@radix-ui/themes";

function App() {
  return (
    <div>
      <div className="flex gap-2">
        <div className="w-6/12">
          <h1>Without Reset Component</h1>
          <abbr title="Abbreviation">ABR</abbr>
        </div>

        <div className="w-6/12">
          <h1>With Reset Component</h1>
          <Reset>
            <abbr title="Abbreviation">ABR</abbr>
          </Reset>
        </div>
      </div>
    </div>
  );
}

View:

radix ui

Grid component​

The Grid component is a component for designing grid layouts. This component is based on the div element and accepts common margin props.

An example of the Grid component in use is illustrated in the code below:

import { Grid, Box } from "@radix-ui/themes";

function App() {
  return (
    <div>
      <Grid columns="3" gap="3" rows="repeat(3, 40px)" width="auto">
        <Box
          width={"200px"}
          height={"50px"}
          className="bg-black text-center text-white"
        >
          Box 1
        </Box>
        <Box
          width={"200px"}
          height={"50px"}
          className="bg-black text-center text-white"
        >
          Box 2
        </Box>
        <Box
          width={"200px"}
          height={"50px"}
          className="bg-black text-center text-white"
        >
          Box 3
        </Box>
        <Box
          width={"200px"}
          height={"50px"}
          className="bg-black text-center text-white"
        >
          Box 4
        </Box>
        <Box
          width={"200px"}
          height={"50px"}
          className="bg-black text-center text-white"
        >
          Box 5
        </Box>
        <Box
          width={"200px"}
          height={"50px"}
          className="bg-black text-center text-white"
        >
          Box 6
        </Box>
      </Grid>
    </div>
  );
}

View:

radix ui

Theme component​

The Theme component wraps all or portion of a React tree to enable theme customization.

An example of the Theme component in use is illustrated in the code below:

import {
  Grid,
  Button,
  TextArea,
  Heading,
  Flex,
  Card,
  Theme,
  Text,
} from "@radix-ui/themes";

function App() {
  return (
    <div>
      <Card size="2">
        <Flex gap="6">
          <Flex direction="column" gap="3">
            <Heading as="h5" size="2">
              Regular card
            </Heading>
            <Grid gap="1">
              <Text as="div" weight="bold" size="2" mb="1">
                Feedback
              </Text>
              <TextArea placeholder="Write your feedback…" />
            </Grid>
            <Button>Send</Button>
          </Flex>

          <Theme accentColor="cyan" radius="full">
            <Card size="2">
              <Flex gap="6">
                <Flex direction="column" gap="3">
                  <Heading as="h5" size="2">
                    Card with cyan theme
                  </Heading>
                  <Grid gap="1">
                    <Text as="div" weight="bold" size="2" mb="1">
                      Feedback
                    </Text>
                    <TextArea placeholder="Write your feedback…" />
                  </Grid>
                  <Button>Send</Button>
                </Flex>

                <Theme accentColor="orange">
                  <Card size="2">
                    <Flex direction="column" gap="3">
                      <Heading as="h5" size="2">
                        Card with orange theme
                      </Heading>
                      <Grid gap="1">
                        <Text as="div" weight="bold" size="2" mb="1">
                          Feedback
                        </Text>
                        <TextArea placeholder="Write your feedback…" />
                      </Grid>
                      <Button>Send</Button>
                    </Flex>
                  </Card>
                </Theme>
              </Flex>
            </Card>
          </Theme>
        </Flex>
      </Card>
    </div>
  );
}

According to the code, cards wrapped in the Cyan and Orange themes reflected these themes on their cards, whilst cards that were not wrapped in the theme reflected Radix's default theme.

View:

radix ui

Setup Radix in your React Project​

  • First, we'll develop a React application. We can achieve this with Vite or CRA. However, Vite is highly recommended.

Installing Primitives​

  • To install a primitive component, add the name of the component to a radix-ui/ prefix as shown in the example below:

     # with npm
     npm install @radix-ui/react-popover@latest -E

     # with yarn
    yarn add @radix-ui/react-popover@latest -E

  • import the parts of the primitive as shown below:

    import * as React from "react";
    import * as Popover from "@radix-ui/react-popover";

    const PopoverDemo = () => (
      <Popover.Root>
        <Popover.Trigger>More info</Popover.Trigger>
        <Popover.Portal>
          <Popover.Content>
            Some more info…
            <Popover.Arrow />
          </Popover.Content>
        </Popover.Portal>
      </Popover.Root>
    );

    export default PopoverDemo;

  • Add styles to the primitives

    javascript:

    import * as React from "react";
    import * as Popover from "@radix-ui/react-popover";
    import "./styles.css";

    const PopoverDemo = () => (
      <Popover.Root>
        <Popover.Trigger className="PopoverTrigger">Show info</Popover.Trigger>
        <Popover.Portal>
          <Popover.Content className="PopoverContent">
            Some content
            <Popover.Arrow className="PopoverArrow" />
          </Popover.Content>
        </Popover.Portal>
      </Popover.Root>
    );

    export default PopoverDemo;

    CSS:

    /* styles.css */
    .PopoverTrigger {
      background-color: white;
      border-radius: 4px;
    }

    .PopoverContent {
      border-radius: 4px;
      padding: 20px;
      width: 260px;
      background-color: white;
    }

    .PopoverArrow {
      fill: white;
    }

Installing Themes​

  • To install Themes, type the command below on your terminal:

    # with npm
    npm install @radix-ui/themes

    # with yarn
    yarn add @radix-ui/themes

  • Next, import the styles to the entrypoint of your application

    import '@radix-ui/themes/styles.css';

  • Add the Theme import to the entrypoint of the application()

    import "@radix-ui/themes/styles.css";
    import { Theme } from "@radix-ui/themes";

    export default function () {
      return (
        <Theme>
          <MyApp />
        </Theme>
      );
    }

  • Start adding the themes components to your application

    import { Flex, Text, Button } from "@radix-ui/themes";

    export default function MyApp() {
      return (
        <Flex direction="column" gap="2">
          <Text>Hello from Radix Themes :)</Text>
          <Button>Let's go</Button>
        </Flex>
      );
    }

Installing Icons​

  • To install colors type the command below:

    # with npm
    npm install @radix-ui/react-icons

    # with yarn
    yarn add @radix-ui/react-icons

  • Import the Icons into your project

    import { FaceIcon, ImageIcon, SunIcon } from "@radix-ui/react-icons";

    function MyComponent() {
      return (
        <div>
          <FaceIcon />
          <SunIcon />
          <ImageIcon />
        </div>
      );
    }

Installing Colors​

  • To install colors, type the command below on your terminal

    # with npm
    npm install @radix-ui/colors

    # with yarn
    yarn add @radix-ui/colors

Vanilla CSS​

Radix Colors gives the colors as raw CSS files. When using a bundler like Parcel or Webpack, you can simply import them into your files.

/* 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);
}

Component Objects​

Radix Colors can also be provided as Objects that can be incorporated into any React project.

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

Build components with Radix​

This article will include sample components for Dialogs and Slider.

Dialogs​

The anatomy of a Dialog with Radix consists of the following eight elements:

  • Root: Contains all the components of a Dialog.
  • Trigger: Contains the button that will be used to trigger the Dialog.
  • Portal: When used, it move your overlay and content elements into the body element in the DOM.
  • Overlay: This is a layer that, when the dialog is open, covers the inactive area of the view.
  • Content: Contains holds the contents of the dialog.
  • Title: THolds the title of the content when the dialog is opened.
  • Description: Holds the description of the content when the dialog is opened.
  • Close: Holds the button that closes the dialog.

The code of a Dialog using Radix primitives and Tailwind classes is shown below:

import * as Dialog from "@radix-ui/react-dialog";
import { Cross2Icon } from "@radix-ui/react-icons";

function App() {
  return (
    <div style={{ marginTop: "150px" }}>
      <Dialog.Root>
        <Dialog.Trigger asChild>
          <button className="text-violet11 shadow-blackA4 hover:bg-mauve3 inline-flex h-[35px] items-center justify-center rounded-[4px] bg-white px-[15px] font-medium leading-none shadow-[0_2px_10px] focus:shadow-[0_0_0_2px] focus:shadow-black focus:outline-none">
            Edit profile
          </button>
        </Dialog.Trigger>

        <Dialog.Portal>
          <Dialog.Overlay className="bg-blackA6 data-[state=open]:animate-overlayShow fixed inset-0" />
          <Dialog.Content className="data-[state=open]:animate-contentShow fixed left-[50%] top-[50%] max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] rounded-[6px] bg-white p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none">
            <Dialog.Title className="text-mauve12 m-0 text-[17px] font-medium">
              Edit profile
            </Dialog.Title>
            <Dialog.Description className="text-mauve11 mb-5 mt-[10px] text-[15px] leading-normal">
              Make changes to your profile here. Click save when you're done.
            </Dialog.Description>
            <fieldset className="mb-[15px] flex items-center gap-5">
              <label
                className="text-violet11 w-[90px] text-right text-[15px]"
                htmlFor="name"
              >
                Name
              </label>
              <input
                className="text-violet11 shadow-violet7 focus:shadow-violet8 inline-flex h-[35px] w-full flex-1 items-center justify-center rounded-[4px] px-[10px] text-[15px] leading-none shadow-[0_0_0_1px] outline-none focus:shadow-[0_0_0_2px]"
                id="name"
                defaultValue="Pedro Duarte"
              />
            </fieldset>
            <fieldset className="mb-[15px] flex items-center gap-5">
              <label
                className="text-violet11 w-[90px] text-right text-[15px]"
                htmlFor="username"
              >
                Username
              </label>
              <input
                className="text-violet11 shadow-violet7 focus:shadow-violet8 inline-flex h-[35px] w-full flex-1 items-center justify-center rounded-[4px] px-[10px] text-[15px] leading-none shadow-[0_0_0_1px] outline-none focus:shadow-[0_0_0_2px]"
                id="username"
                defaultValue="@peduarte"
              />
            </fieldset>
            <div className="mt-[25px] flex justify-end">
              <Dialog.Close asChild>
                <button className="bg-green4 text-green11 hover:bg-green5 focus:shadow-green7 inline-flex h-[35px] items-center justify-center rounded-[4px] px-[15px] font-medium leading-none focus:shadow-[0_0_0_2px] focus:outline-none">
                  Save changes
                </button>
              </Dialog.Close>
            </div>
            <Dialog.Close asChild>
              <button
                className="text-violet11 hover:bg-violet4 focus:shadow-violet7 absolute right-[10px] top-[10px] inline-flex h-[25px] w-[25px] appearance-none items-center justify-center rounded-full focus:shadow-[0_0_0_2px] focus:outline-none"
                aria-label="Close"
              >
                <Cross2Icon />
              </button>
            </Dialog.Close>
          </Dialog.Content>
        </Dialog.Portal>
      </Dialog.Root>
    </div>
  );
}

View:

radix ui

Slider​

The following four components make up the anatomy of a Slider made with Radix:

  • Root: Comprising every component of a slider
  • Track: The Slider-containing track.
  • Range: The portion of the range that has to fit inside the slider.
  • Thumb: The thumb can be moved.

The code of a Slider using Radix primitives and Tailwind classes is shown below:

import * as Slider from "@radix-ui/react-slider";

function App() {
  return (
    <div>
      <Slider.Root
        className="relative flex h-5 w-[200px] touch-none select-none items-center"
        defaultValue={[50]}
        max={100}
        step={1}
      >
        <Slider.Track className="relative h-[3px] grow rounded-full bg-black">
          <Slider.Range className="absolute h-full rounded-full bg-red-100" />
        </Slider.Track>
        <Slider.Thumb
          className="shadow-blackA4 hover:bg-violet3 focus:shadow-blackA5 block h-5 w-5 rounded-[10px] bg-red-100 shadow-[0_2px_10px] focus:shadow-[0_0_0_5px] focus:outline-none"
          aria-label="Volume"
        />
      </Slider.Root>
    </div>
  );
}

View:

radix ui

Conclusion​

In this article, we looked at Radix, discussed Radix's Primitives, Colors, Icons, and Themes, and finally built components with Radix Primitives. Radix is an outstanding component library that you should consider using if you want to create design systems or visually appealing web apps.

Related Articles

React 18 Upgrade Guide and New Features

React 18 was released! Are you looking to upgrade to React 18? Learn about the new features and changes in this comprehensive guide.

Building a Complete React CRUD App with Airtable

We will be building a Complete React CRUD application using Refine and Airtable, a famous backend service to illustrate how you can power your applications with refine.

Refine vs AdminBro - Comparison Admin Panel Framework

Refine vs AdminBro