Radix UI online editor

Write, Run & Share Radix UI code online using OneCompiler's Radix UI online editor for free. It's one of the robust, feature-rich online editors for Radix UI. Getting started with the OneCompiler's Radix UI online editor is really simple and pretty fast. The editor shows sample boilerplate code when you choose language as 'Radix UI' and start writing code to learn and test online without worrying about tedious process of installation.

About Radix UI

Radix UI comes in two parts. Radix Themes (@radix-ui/themes) is a styled component set with a built-in theme, good for building a UI quickly. Radix Primitives (@radix-ui/react-*) are unstyled, accessible building blocks for menus, dialogs, and the like, meant for when you want full control over the styling. The boilerplate here uses Radix Themes.

Syntax help

Setup with Themes

Import the Themes stylesheet and wrap your app in Theme. The provider sets the accent color, light or dark appearance, and the default radius.

import '@radix-ui/themes/styles.css';
import { Theme, Button } from '@radix-ui/themes';

function App() {
  return (
    <Theme accentColor="indigo" radius="medium">
      <Button>Click me</Button>
    </Theme>
  );
}

Components

Themes components share a small set of props: variant, color, size, and radius. They read the values you set on Theme unless you override them.

import { Button, Card, Text } from '@radix-ui/themes';

<Button variant="solid">Solid</Button>
<Button variant="soft" color="gray">Soft</Button>

<Card>
  <Text as="p">Card content</Text>
</Card>

Layout

Flex, Grid, and Box handle layout, with spacing props like gap, p, and m that use the theme's scale.

import { Flex, Box } from '@radix-ui/themes';

<Flex direction="column" gap="3">
  <Box>First</Box>
  <Box>Second</Box>
</Flex>

Theme configuration

Set theme-wide options on the Theme element. Switch appearance to dark for dark mode, and pick any accent color.

<Theme appearance="dark" accentColor="grass" grayColor="slate" radius="large">
  {/* your app */}
</Theme>

Primitives

When you want to style everything yourself, reach for a primitive. Each primitive handles keyboard interaction and accessibility, and ships no styles, so you add your own classes.

import * as Dialog from '@radix-ui/react-dialog';

<Dialog.Root>
  <Dialog.Trigger>Open</Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Overlay className="overlay" />
    <Dialog.Content className="content">
      <Dialog.Title>Title</Dialog.Title>
      <Dialog.Close>Close</Dialog.Close>
    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>

Composition with asChild

Most Radix components accept asChild, which hands their behavior to the child element you pass. Use it to keep your own tag while gaining the component's logic.

import * as Dialog from '@radix-ui/react-dialog';

<Dialog.Trigger asChild>
  <button className="my-button">Open dialog</button>
</Dialog.Trigger>