Radix Homepage
Radix Homepage
ThemesThemesPrimitivesPrimitivesIconsIconsColorsColors
DocumentationPlayground
Components

Theme

Wraps all or part of a React tree to provide theme configuration.

View sourceReport an issue

API Reference

For an overview of theming see the overview page.

PropTypeDefault
asChild
boolean
false
hasBackground
boolean
true
appearance
"inherit" | "light" | "dark"
"inherit"
accentColor
enum
"indigo"
grayColor
enum
"auto"
panelBackground
"solid" | "translucent"
"translucent"
radius
"none" | "small" | "medium" | "large" | "full"
"medium"
scaling
"90%" | "95%" | "100%" | "105%" | "110%"
"100%"

Examples

Basic configuration

Wrap a component tree in the Theme component to provide or modify configuration for all children.

Feedback
<Card size="2" style={{ maxWidth: 400 }}>

  <Flex direction="column" gap="3">

    <Grid gap="1">

      <Text as="div" weight="bold" size="2" mb="1">

        Feedback

      </Text>

      <TextArea placeholder="Write your feedback…" />

    </Grid>

    <Flex asChild justify="between">

      <label>

        <Text color="gray" size="2">

          Attach screenshot?

        </Text>

        <Switch size="1" defaultChecked />

      </label>

    </Flex>

    <Grid columns="2" gap="2">

      <Button variant="surface">Back</Button>

      <Button>Send</Button>

    </Grid>

  </Flex>

</Card>

Nesting

Nest another theme to modify configuration for a specific subtree. Configuration is inherited from the parent.

Global
Feedback
Child
Feedback
Grandchild
Feedback
<Card size="2">

  <Flex gap="6">

    <Flex direction="column" gap="3">

      <Heading as="h5" size="2">

        Global

      </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">

              Child

            </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">

                  Grandchild

                </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>

Component overrides

Override configuration per component by passing any supported prop directly to that component.

Feedback
<Card size="2" style={{ maxWidth: 400 }}>

  <Flex direction="column" gap="3">

    <Grid gap="1">

      <Text as="div" weight="bold" size="2" mb="1">

        Feedback

      </Text>

      <TextArea placeholder="Write your feedback…" />

    </Grid>

    <Flex asChild justify="between">

      <label>

        <Text color="gray" size="2">

          Attach screenshot?

        </Text>

        <Switch size="1" color="orange" radius="full" defaultChecked />

      </label>

    </Flex>

    <Grid columns="2" gap="2">

      <Button variant="surface">Back</Button>

      <Button color="cyan" radius="full">

        Send

      </Button>

    </Grid>

  </Flex>

</Card>
PreviousSlot
NextVisually Hidden
Edit this page on GitHub.