RadixUI Primitives Cheatsheet

export default function App() {
  return (
    <Accordion.Root type="single" defaultValue="option-2">
      <Accordion.Item value="option-1">
        <Accordion.Header asChild>
          <Accordion.Trigger>Option 1</Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Content>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod
          voluptates ea aspernatur! Nesciunt culpa officiis, assumenda sequi,
          odit debitis, eos natus minima doloremque nemo vel sunt iste id at
          cupiditate.
        </Accordion.Content>
      </Accordion.Item>
      <Accordion.Item value="option-2">
        <Accordion.Header asChild>
          <Accordion.Trigger>Option 2</Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Content>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod
          voluptates ea aspernatur! Nesciunt culpa officiis, assumenda sequi,
          odit debitis, eos natus minima doloremque nemo vel sunt iste id at
          cupiditate.
        </Accordion.Content>
      </Accordion.Item>
    </Accordion.Root>
  );
}

import * as AlertDialog from "@radix-ui/react-alert-dialog";

export default function App() {
  return (
    <AlertDialog.Root>
      <AlertDialog.Trigger>Click Me</AlertDialog.Trigger>
      <AlertDialog.Portal>
        <AlertDialog.Overlay
          style={{
            position: "fixed",
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            background: "rgba(0, 0, 0, 0.5)",
          }}
        />
        <AlertDialog.Content
          style={{
            position: "fixed",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)",
            background: "white",
          }}
        >
          <AlertDialog.Title>Hello World</AlertDialog.Title>
          <AlertDialog.Description>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. In
            exercitationem animi qui laudantium cum accusamus nulla nostrum.
            Quisquam natus voluptatibus rem laudantium accusamus, magnam atque
            quasi sunt officia quaerat ullam!
          </AlertDialog.Description>
          <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
          <AlertDialog.Action>OK</AlertDialog.Action>
        </AlertDialog.Content>
      </AlertDialog.Portal>
    </AlertDialog.Root>
  );
}

import * as AspectRatio from "@radix-ui/react-aspect-ratio";

export default function App() {
  return (
    <div style={{ width: "300px" }}>
      <AspectRatio.Root ratio={4 / 3} asChild>
        <img
          src="http://placekitten.com/400/400"
          alt="Kitten"
          style={{ width: "100%", height: "100%", objectFit: "cover" }}
        />
      </AspectRatio.Root>
    </div>
  );
}

import * as Avatar from "@radix-ui/react-avatar";

export default function App() {
  return (
    <Avatar.Root>
      <Avatar.Image
        src="http://placekitten.com/100/100"
        style={{ borderRadius: "50%" }}
      />
      <Avatar.Fallback>Kitten</Avatar.Fallback>
    </Avatar.Root>
  );
}

import * as Checkbox from "@radix-ui/react-checkbox";

export default function App() {
  return (
    <Checkbox.Root>
      <Checkbox.Indicator
        style={{
          width: 10,
          height: 10,
          backgroundColor: "black",
          display: "inline-block",
        }}
      />
      Checkbox Item
    </Checkbox.Root>
  );
}

import * as Collapsible from "@radix-ui/react-collapsible";

export default function App() {
  return (
    <Collapsible.Root>
      <Collapsible.Trigger>Collapsible Trigger</Collapsible.Trigger>
      <Collapsible.Content>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi
        temporibus, magni enim aspernatur repudiandae consequatur recusandae
        illo labore deleniti a necessitatibus aliquam ipsum. Molestias
        consequatur ut maiores veritatis. Voluptatum, optio.
      </Collapsible.Content>
    </Collapsible.Root>
  );
}

import * as ContextMenu from "@radix-ui/react-context-menu";

export default function App() {
  return (
    <ContextMenu.Root>
      <ContextMenu.Trigger>
        Right-click this text to open a Context Menu
      </ContextMenu.Trigger>
      <ContextMenu.Content style={{ backgroundColor: "white" }}>
        <ContextMenu.Label>Items Label</ContextMenu.Label>
        <ContextMenu.Item>Item One</ContextMenu.Item>
        <ContextMenu.Item>Item Two</ContextMenu.Item>
        <ContextMenu.Item>Item Three</ContextMenu.Item>
        <ContextMenu.Separator
          style={{ height: "1px", backgroundColor: "black" }}
        />
        <ContextMenu.Label>Items Label</ContextMenu.Label>
        <ContextMenu.Item>Item Four</ContextMenu.Item>
        <ContextMenu.Item>Item Five</ContextMenu.Item>
        <ContextMenu.Item>Item Six</ContextMenu.Item>
      </ContextMenu.Content>
    </ContextMenu.Root>
  );
}

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

export default function App() {
  return (
    <Dialog.Root>
      <Dialog.Trigger>Open a Dialog</Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay
          style={{
            position: "fixed",
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            background: "rgba(0, 0, 0, 0.5)",
          }}
        />
        <Dialog.Content
          style={{
            position: "fixed",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)",
            background: "white",
          }}
        >
          <Dialog.Title>Dialog Title</Dialog.Title>
          <Dialog.Description>Dialog Description</Dialog.Description>
          <Dialog.Close>Close</Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

import * as DropdownMenu from "@radix-ui/react-dropdown-menu";

export default function App() {
  return (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger>Open Dropdown Menu</DropdownMenu.Trigger>
      <DropdownMenu.Content>
        <DropdownMenu.Item>Item 1</DropdownMenu.Item>
        <DropdownMenu.Item>Item 2</DropdownMenu.Item>
      </DropdownMenu.Content>
    </DropdownMenu.Root>
  );
}

import * as HoverCard from "@radix-ui/react-hover-card";

const cardBackgroundColor = "#ddd";

export default function App() {
  return (
    <HoverCard.Root>
      <HoverCard.Trigger>Trigger Hover Card</HoverCard.Trigger>
      <HoverCard.Content style={{ backgroundColor: cardBackgroundColor }}>
        Hover Card Content
        <HoverCard.Arrow style={{ fill: cardBackgroundColor }} />
      </HoverCard.Content>
    </HoverCard.Root>
  );
}

import * as Label from "@radix-ui/react-label";

export default function App() {
  return (
    <Label.Root htmlFor="firstName">
      First Name <input id="firstName" type="text" defaultValue="Robert" />
    </Label.Root>
  );
}

import * as NavigationMenu from "@radix-ui/react-navigation-menu";

export default function App() {
  return (
    <NavigationMenu.Root>
      <NavigationMenu.List>
        <NavigationMenu.Item>
          <NavigationMenu.Trigger>Trigger</NavigationMenu.Trigger>
          <NavigationMenu.Content>
            <NavigationMenu.List>
              <NavigationMenu.Item>
                <NavigationMenu.Link>Item 1</NavigationMenu.Link>
              </NavigationMenu.Item>
            </NavigationMenu.List>
          </NavigationMenu.Content>
        </NavigationMenu.Item>
        <NavigationMenu.Indicator />
      </NavigationMenu.List>
      <NavigationMenu.Viewport />
    </NavigationMenu.Root>
  );
}

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

const popoverBackgroundColor = "#ddd";

export default function App() {
  return (
    <Popover.Root modal>
      <Popover.Trigger>Trigger</Popover.Trigger>
      <Popover.Content style={{ backgroundColor: popoverBackgroundColor }}>
        This is the content
        <Popover.Close>Close</Popover.Close>
        <Popover.Arrow style={{ fill: popoverBackgroundColor }} />
      </Popover.Content>
    </Popover.Root>
  );
}

import * as Progress from "@radix-ui/react-progress";

const value = 75;

export default function App() {
  return (
    <Progress.Root
      value={value}
      max={100}
      style={{
        position: "relative",
        width: 300,
        height: 25,
        backgroundColor: "lightgrey",
      }}
    >
      <Progress.Indicator
        style={{ height: "100%", backgroundColor: "grey", width: value + "%" }}
      />
    </Progress.Root>
  );
}

import * as RadioGroup from "@radix-ui/react-radio-group";
import { styled } from "@stitches/react";

const RadioGroupIndicator = styled(RadioGroup.Indicator, {
  width: "10px",
  height: "10px",
  display: "inline-block",
  backgroundColor: "black",
  borderRadius: "50%",
});

export default function App() {
  return (
    <RadioGroup.Root defaultValue="one">
      <RadioGroup.Item value="one">
        <RadioGroupIndicator />
        One
      </RadioGroup.Item>
      <RadioGroup.Item value="two">
        <RadioGroupIndicator />
        Two
      </RadioGroup.Item>
    </RadioGroup.Root>
  );
}

import * as ScrollArea from "@radix-ui/react-scroll-area";

export default function App() {
  return (
    <ScrollArea.Root
      style={{ width: "200px", height: "200px", overflow: "hidden" }}
    >
      <ScrollArea.Viewport style={{ width: "100%", height: "100%" }}>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet aut
        sapiente possimus quisquam. Obcaecati eaque reprehenderit, dolor culpa
        recusandae delectus, inventore, libero voluptates sed a consequuntur
        natus repudiandae praesentium est? Lorem ipsum dolor sit amet
        consectetur, adipisicing elit. Amet aut sapiente possimus quisquam.
        Obcaecati eaque reprehenderit, dolor culpa recusandae delectus,
        inventore, libero voluptates sed a consequuntur natus repudiandae
        praesentium est?
      </ScrollArea.Viewport>
      <ScrollArea.Scrollbar
        orientation="vertical"
        style={{
          position: "absolute",
          top: 0,
          right: 0,
          width: 10,
          bottom: "var(--radix-scroll-area-corner-height)",
          backgroundColor: "lightgrey",
        }}
      >
        <ScrollArea.Thumb style={{ background: "darkgrey" }} />
      </ScrollArea.Scrollbar>
      <ScrollArea.Corner />
    </ScrollArea.Root>
  );
}

import * as Select from "@radix-ui/react-select";

export default function App() {
  return (
    <Select.Root defaultValue="Hello World">
      <Select.Trigger aria-label="Options">
        <Select.Value />
        <Select.Icon style={{ fontFamily: "sans-serif" }} />
      </Select.Trigger>
      <Select.Content style={{ background: "white" }}>
        <Select.ScrollUpButton />
        <Select.Viewport>
          <Select.Item value="Hello World">
            <Select.ItemText>Hello World</Select.ItemText>
            <Select.ItemIndicator />
          </Select.Item>
          <Select.Item value="Goodbye World">
            <Select.ItemText>Goodbye World</Select.ItemText>
            <Select.ItemIndicator />
          </Select.Item>
          <Select.Separator />
        </Select.Viewport>
        <Select.ScrollDownButton />
      </Select.Content>
    </Select.Root>
  );
}

import * as Separator from "@radix-ui/react-separator";

export default function App() {
  return (
    <div>
      <span>Thing One</span>
      <Separator.Root asChild>
        <span>-</span>
      </Separator.Root>
      <span>Thing Two</span>
    </div>
  );
}

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

export default function App() {
  return (
    <Slider.Root
      defaultValue={[50]}
      max={100}
      step={1}
      aria-label="Volume"
      style={{
        position: "relative",
        height: 10,
        background: "lightgrey",
        width: 300,
        display: "block",
      }}
    >
      <Slider.Track>
        <Slider.Range
          style={{
            position: "absolute",
            height: "100%",
            backgroundColor: "#666",
          }}
        />
      </Slider.Track>
      <Slider.Thumb
        style={{
          width: 10,
          height: 10,
          backgroundColor: "black",
          display: "block",
        }}
      />
    </Slider.Root>
  );
}

import * as Switch from "@radix-ui/react-switch";
import { styled } from "@stitches/react";

const SwitchThumb = styled(Switch.Thumb, {
  width: "50%",
  background: "darkgrey",
  height: "100%",
  display: "block",
  position: "absolute",
  top: 0,
  left: 0,
  "&[data-state=checked]": {
    left: "50%",
  },
});

export default function App() {
  return (
    <Switch.Root style={{ width: 60, height: 30, position: "relative" }}>
      <SwitchThumb />
    </Switch.Root>
  );
}

import * as Tabs from "@radix-ui/react-tabs";

export default function App() {
  return (
    <Tabs.Root defaultValue="One">
      <Tabs.List>
        <Tabs.Trigger value="One">One</Tabs.Trigger>
        <Tabs.Trigger value="Two">Two</Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="One">I am "One" content</Tabs.Content>
      <Tabs.Content value="Two">I am "Two" content</Tabs.Content>
    </Tabs.Root>
  );
}

import * as Toast from "@radix-ui/react-toast";
import { useState } from "react";

export default function App() {
  const [showToast, setShowToast] = useState(false);

  return (
    <Toast.Provider swipeDirection="right">
      <button onClick={() => setShowToast(true)}>Show 5 Second Toast</button>
      <Toast.Root open={showToast} onOpenChange={setShowToast}>
        <Toast.Title>Toast Title</Toast.Title>
        <Toast.Description>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod saepe
          porro eius harum, rem eos voluptatem? Labore ipsum sed cumque fuga,
          veniam perferendis quo accusamus esse ab illo sint reiciendis!
        </Toast.Description>
        <Toast.Action>Action</Toast.Action>
        <Toast.Close>Close</Toast.Close>
      </Toast.Root>
      <Toast.Viewport style={{ position: "fixed", bottom: 20, right: 20 }} />
    </Toast.Provider>
  );
}

import * as Toggle from "@radix-ui/react-toggle";
import { styled } from "@stitches/react";

const ToggleRoot = styled(Toggle.Root, {
  "&[aria-pressed=true]": {
    fontWeight: "bold",
    fontSize: "1.2em",
  },
});

export default function App() {
  return <ToggleRoot>This is a toggle</ToggleRoot>;
}

import * as ToggleGroup from "@radix-ui/react-toggle-group";
import { styled } from "@stitches/react";

const ToggleGroupItem = styled(ToggleGroup.Item, {
  "&[aria-pressed=true]": {
    fontWeight: "bold",
    fontSize: "1.2em",
  },
});

export default function App() {
  return (
    <ToggleGroup.Root type="multiple" defaultValue={["a", "c"]}>
      <ToggleGroupItem value="a">Item A</ToggleGroupItem>
      <ToggleGroupItem value="b">Item B</ToggleGroupItem>
      <ToggleGroupItem value="c">Item C</ToggleGroupItem>
    </ToggleGroup.Root>
  );
}

import * as Toolbar from "@radix-ui/react-toolbar";

export default function App() {
  return (
    <Toolbar.Root style={{ display: "flex" }}>
      <Toolbar.Button>Toolbar Button</Toolbar.Button>
      <Toolbar.Separator />
      <Toolbar.Link>Some Link</Toolbar.Link>
      <Toolbar.ToggleGroup type="single">
        <Toolbar.ToggleItem value="a">Item A</Toolbar.ToggleItem>
        <Toolbar.ToggleItem value="b">Item B</Toolbar.ToggleItem>
        <Toolbar.ToggleItem value="c">Item C</Toolbar.ToggleItem>
      </Toolbar.ToggleGroup>
    </Toolbar.Root>
  );
}

import * as Tooltip from "@radix-ui/react-tooltip";

const cardBackgroundColor = "#ddd";

export default function App() {
  return (
    <Tooltip.Provider>
      <Tooltip.Root>
        <Tooltip.Trigger>A Nice Tooltip</Tooltip.Trigger>
        <Tooltip.Content style={{ backgroundColor: cardBackgroundColor }}>
          <Tooltip.Arrow style={{ fill: cardBackgroundColor }} />
          Good News!
        </Tooltip.Content>
      </Tooltip.Root>
    </Tooltip.Provider>
  );
}