---
title: Theme Customization
description: Customize the look and feel of WorkOS Widgets using Radix Themes.
originalPath: >-
  .tmp-workos-clone/packages/docs/content/widgets/styling/theme-customization.mdx
---

## Using the `theme` prop

The `theme` prop can be used to customize the overall appearance of WorkOS Widgets.

`theme` support relies on external stylesheets from Radix Themes and WorkOS Widgets. Start by importing both stylesheets into your application.

<CodeBlock language="css" file="widgets-import-styles" title="CSS imports" />

### `theme` properties

<PropsTable data={widgets.theme.props} />

See the [Radix Themes API reference](https://www.radix-ui.com/themes/docs/components/theme#api-reference) for more information on theming options.

## Using the `elements` prop

Underlying components can be styled using the `elements` prop. This object is a mapping of component names to their respective Radix Theme component props.

<CodeBlock
  language="js"
  file="widgets-elements-customization"
  title="Elements customization"
/>

### `elements` properties

Each element is mapped to a Radix Theme component and accepts the same props as its respective component. See the Radix Themes documentation for each component for all available props.

| Component             | Radix component                                                             |
| :-------------------- | :-------------------------------------------------------------------------- |
| `avatar`              | [`Avatar`](https://www.radix-ui.com/themes/docs/components/avatar)          |
| `badge`               | [`Badge`](https://www.radix-ui.com/themes/docs/components/badge)            |
| `primaryButton`       | [`Button`](https://www.radix-ui.com/themes/docs/components/button)          |
| `secondaryButton`     | [`Button`](https://www.radix-ui.com/themes/docs/components/button)          |
| `destructiveButton`   | [`Button`](https://www.radix-ui.com/themes/docs/components/button)          |
| `dialog`              | [`Dialog`](https://www.radix-ui.com/themes/docs/components/dialog)          |
| `dropdown`            | [`Dropdown`](https://www.radix-ui.com/themes/docs/components/dropdown)      |
| `iconButton`          | [`IconButton`](https://www.radix-ui.com/themes/docs/components/icon-button) |
| `label`               | [`Label`](https://www.radix-ui.com/themes/docs/components/label)            |
| `primaryMenuItem`     | [`MenuItem`](https://www.radix-ui.com/themes/docs/components/menu-item)     |
| `destructiveMenuItem` | [`MenuItem`](https://www.radix-ui.com/themes/docs/components/menu-item)     |
| `select`              | [`Select`](https://www.radix-ui.com/themes/docs/components/select)          |
| `skeleton`            | [`Skeleton`](https://www.radix-ui.com/themes/docs/components/skeleton)      |
| `textfield`           | [`TextField`](https://www.radix-ui.com/themes/docs/components/text-field)   |