Showing preview only (1,347K chars total). Download the full file or copy to clipboard to get everything.
Repository: radix-ui/themes
Branch: main
Commit: 3d286ce09668
Files: 444
Total size: 1.2 MB
Directory structure:
gitextract_54k8yhkw/
├── .github/
│ ├── CONTRIBUTING.md
│ ├── PULL_REQUEST_TEMPLATE.md
│ ├── actions/
│ │ └── ci-setup/
│ │ └── action.yml
│ └── workflows/
│ ├── ci.yml
│ └── publish.yml
├── .gitignore
├── .npmrc
├── .nvmrc
├── .prettierignore
├── .prettierrc
├── .vscode/
│ ├── extensions.json
│ └── settings.json
├── AGENTS.md
├── CLAUDE.md
├── CODE_OF_CONDUCT.md
├── LICENSE
├── README.md
├── apps/
│ └── playground/
│ ├── .gitignore
│ ├── app/
│ │ ├── (static-theme)/
│ │ │ ├── layout.tsx
│ │ │ └── theme.tsx
│ │ ├── (themeable)/
│ │ │ ├── demo/
│ │ │ │ ├── page.tsx
│ │ │ │ └── users.ts
│ │ │ ├── ghost-balance/
│ │ │ │ └── page.tsx
│ │ │ ├── layout.tsx
│ │ │ ├── sink/
│ │ │ │ ├── _components.tsx
│ │ │ │ ├── _utils.tsx
│ │ │ │ ├── alert-dialog/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── aspect-ratio/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── avatar/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── badge/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── blockquote/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── button/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── callout/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── card/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── checkbox/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── checkbox-cards/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── checkbox-group/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── code/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── container/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── context-menu/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── cursors/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── data-list/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── dialog/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── docs-section.tsx
│ │ │ │ ├── dropdown-menu/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── grid/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── heading/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── hide-cursor.tsx
│ │ │ │ ├── hover-card/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── icon-button/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── kbd/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── layout.tsx
│ │ │ │ ├── link/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── mixed-nested-themes-test/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── nested-appearances-test/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── nested-colors-test/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── page.module.css
│ │ │ │ ├── page.tsx
│ │ │ │ ├── playground/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── pointer-cursors-checkbox.tsx
│ │ │ │ ├── popover/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── progress/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── radio/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── radio-cards/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── radio-group/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── radix-logo.tsx
│ │ │ │ ├── scroll-area/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── segmented-control/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── select/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── separator/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── shadow-tokens/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── skeleton/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── slider/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── spinner/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── switch/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── tab-nav/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── tab-nav-demo.tsx
│ │ │ │ ├── table/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── tabs/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── text/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── text-area/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── text-field/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── tooltip/
│ │ │ │ │ └── page.tsx
│ │ │ │ └── typography/
│ │ │ │ └── page.tsx
│ │ │ ├── snapshot/
│ │ │ │ ├── image-card.tsx
│ │ │ │ ├── page.module.css
│ │ │ │ └── page.tsx
│ │ │ └── test/
│ │ │ ├── appearance/
│ │ │ │ └── page.tsx
│ │ │ ├── as-child/
│ │ │ │ └── page.tsx
│ │ │ ├── avatar/
│ │ │ │ └── page.tsx
│ │ │ ├── checkbox-card/
│ │ │ │ └── page.tsx
│ │ │ ├── classic-button/
│ │ │ │ └── page.tsx
│ │ │ ├── data-list/
│ │ │ │ └── page.tsx
│ │ │ ├── dialog/
│ │ │ │ └── page.tsx
│ │ │ ├── grid-align-content/
│ │ │ │ └── page.tsx
│ │ │ ├── grid-align-self/
│ │ │ │ └── page.tsx
│ │ │ ├── grid-area/
│ │ │ │ └── page.tsx
│ │ │ ├── grid-justify-items/
│ │ │ │ └── page.tsx
│ │ │ ├── grid-justify-self/
│ │ │ │ └── page.tsx
│ │ │ ├── high-contrast/
│ │ │ │ └── page.tsx
│ │ │ ├── inset/
│ │ │ │ └── page.tsx
│ │ │ ├── radio-card/
│ │ │ │ └── page.tsx
│ │ │ ├── reset/
│ │ │ │ └── page.tsx
│ │ │ ├── responsive/
│ │ │ │ └── page.tsx
│ │ │ ├── skeleton/
│ │ │ │ └── page.tsx
│ │ │ ├── tabnav/
│ │ │ │ ├── (accounts)/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── documents/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── layout.tsx
│ │ │ │ ├── nav.tsx
│ │ │ │ └── settings/
│ │ │ │ └── page.tsx
│ │ │ ├── text-wrap/
│ │ │ │ └── page.tsx
│ │ │ ├── textfield/
│ │ │ │ └── page.tsx
│ │ │ └── webkit-tap-highlight-color/
│ │ │ └── page.tsx
│ │ ├── api/
│ │ │ └── avatar/
│ │ │ └── route.ts
│ │ ├── globals.css
│ │ ├── layout.tsx
│ │ └── next-theme-provider.tsx
│ ├── components/
│ │ ├── loading-buttons.tsx
│ │ └── snapshot-logo.tsx
│ ├── css.d.ts
│ ├── eslint.config.mjs
│ ├── next.config.mjs
│ ├── package.json
│ ├── playwright.config.ts
│ ├── postcss.config.mjs
│ ├── tests/
│ │ └── visual-regression.spec.ts
│ └── tsconfig.json
├── context7.json
├── package.json
├── packages/
│ └── radix-ui-themes/
│ ├── .browserslistrc
│ ├── .stylelintrc.cjs
│ ├── CHANGELOG.md
│ ├── README.md
│ ├── eslint.config.mjs
│ ├── package.json
│ ├── postcss-breakpoints.cjs
│ ├── postcss-whitespace.cjs
│ ├── postcss.config.cjs
│ ├── scripts/
│ │ ├── esbuild-cjs.js
│ │ ├── esbuild-esm.js
│ │ └── package.json
│ ├── src/
│ │ ├── components/
│ │ │ ├── _internal/
│ │ │ │ ├── base-button.css
│ │ │ │ ├── base-button.props.ts
│ │ │ │ ├── base-button.tsx
│ │ │ │ ├── base-card.css
│ │ │ │ ├── base-checkbox.css
│ │ │ │ ├── base-checkbox.props.ts
│ │ │ │ ├── base-dialog.css
│ │ │ │ ├── base-menu.css
│ │ │ │ ├── base-menu.props.ts
│ │ │ │ ├── base-radio.css
│ │ │ │ ├── base-radio.props.ts
│ │ │ │ ├── base-tab-list.css
│ │ │ │ └── base-tab-list.props.ts
│ │ │ ├── accessible-icon.tsx
│ │ │ ├── alert-dialog.css
│ │ │ ├── alert-dialog.props.tsx
│ │ │ ├── alert-dialog.tsx
│ │ │ ├── animations.css
│ │ │ ├── aspect-ratio.tsx
│ │ │ ├── avatar.css
│ │ │ ├── avatar.props.tsx
│ │ │ ├── avatar.tsx
│ │ │ ├── badge.css
│ │ │ ├── badge.props.tsx
│ │ │ ├── badge.tsx
│ │ │ ├── blockquote.css
│ │ │ ├── blockquote.props.tsx
│ │ │ ├── blockquote.tsx
│ │ │ ├── box.css
│ │ │ ├── box.props.tsx
│ │ │ ├── box.tsx
│ │ │ ├── button.css
│ │ │ ├── button.props.tsx
│ │ │ ├── button.tsx
│ │ │ ├── callout.css
│ │ │ ├── callout.props.tsx
│ │ │ ├── callout.tsx
│ │ │ ├── card.css
│ │ │ ├── card.props.tsx
│ │ │ ├── card.tsx
│ │ │ ├── checkbox-cards.css
│ │ │ ├── checkbox-cards.props.tsx
│ │ │ ├── checkbox-cards.tsx
│ │ │ ├── checkbox-group.css
│ │ │ ├── checkbox-group.primitive.tsx
│ │ │ ├── checkbox-group.props.tsx
│ │ │ ├── checkbox-group.tsx
│ │ │ ├── checkbox.css
│ │ │ ├── checkbox.props.tsx
│ │ │ ├── checkbox.tsx
│ │ │ ├── code.css
│ │ │ ├── code.props.tsx
│ │ │ ├── code.tsx
│ │ │ ├── container.css
│ │ │ ├── container.props.tsx
│ │ │ ├── container.tsx
│ │ │ ├── context-menu.css
│ │ │ ├── context-menu.props.tsx
│ │ │ ├── context-menu.tsx
│ │ │ ├── data-list.css
│ │ │ ├── data-list.props.tsx
│ │ │ ├── data-list.tsx
│ │ │ ├── dialog.css
│ │ │ ├── dialog.props.tsx
│ │ │ ├── dialog.tsx
│ │ │ ├── dropdown-menu.css
│ │ │ ├── dropdown-menu.props.tsx
│ │ │ ├── dropdown-menu.tsx
│ │ │ ├── em.css
│ │ │ ├── em.props.tsx
│ │ │ ├── em.tsx
│ │ │ ├── flex.css
│ │ │ ├── flex.props.tsx
│ │ │ ├── flex.tsx
│ │ │ ├── grid.css
│ │ │ ├── grid.props.tsx
│ │ │ ├── grid.tsx
│ │ │ ├── heading.css
│ │ │ ├── heading.props.tsx
│ │ │ ├── heading.tsx
│ │ │ ├── hover-card.css
│ │ │ ├── hover-card.props.tsx
│ │ │ ├── hover-card.tsx
│ │ │ ├── icon-button.css
│ │ │ ├── icon-button.props.tsx
│ │ │ ├── icon-button.tsx
│ │ │ ├── icons.tsx
│ │ │ ├── index.css
│ │ │ ├── index.tsx
│ │ │ ├── inset.css
│ │ │ ├── inset.props.tsx
│ │ │ ├── inset.tsx
│ │ │ ├── kbd.css
│ │ │ ├── kbd.props.tsx
│ │ │ ├── kbd.tsx
│ │ │ ├── layout.css
│ │ │ ├── link.css
│ │ │ ├── link.props.tsx
│ │ │ ├── link.tsx
│ │ │ ├── popover.css
│ │ │ ├── popover.props.tsx
│ │ │ ├── popover.tsx
│ │ │ ├── portal.tsx
│ │ │ ├── progress.css
│ │ │ ├── progress.props.tsx
│ │ │ ├── progress.tsx
│ │ │ ├── quote.css
│ │ │ ├── quote.props.tsx
│ │ │ ├── quote.tsx
│ │ │ ├── radio-cards.css
│ │ │ ├── radio-cards.props.tsx
│ │ │ ├── radio-cards.tsx
│ │ │ ├── radio-group.css
│ │ │ ├── radio-group.props.tsx
│ │ │ ├── radio-group.tsx
│ │ │ ├── radio.css
│ │ │ ├── radio.props.tsx
│ │ │ ├── radio.tsx
│ │ │ ├── reset.css
│ │ │ ├── reset.tsx
│ │ │ ├── scroll-area.css
│ │ │ ├── scroll-area.props.tsx
│ │ │ ├── scroll-area.tsx
│ │ │ ├── section.css
│ │ │ ├── section.props.tsx
│ │ │ ├── section.tsx
│ │ │ ├── segmented-control.css
│ │ │ ├── segmented-control.props.tsx
│ │ │ ├── segmented-control.tsx
│ │ │ ├── select.css
│ │ │ ├── select.props.tsx
│ │ │ ├── select.tsx
│ │ │ ├── separator.css
│ │ │ ├── separator.props.tsx
│ │ │ ├── separator.tsx
│ │ │ ├── skeleton.css
│ │ │ ├── skeleton.props.tsx
│ │ │ ├── skeleton.tsx
│ │ │ ├── slider.css
│ │ │ ├── slider.props.tsx
│ │ │ ├── slider.tsx
│ │ │ ├── slot.tsx
│ │ │ ├── spinner.css
│ │ │ ├── spinner.props.tsx
│ │ │ ├── spinner.tsx
│ │ │ ├── strong.css
│ │ │ ├── strong.props.tsx
│ │ │ ├── strong.tsx
│ │ │ ├── switch.css
│ │ │ ├── switch.props.tsx
│ │ │ ├── switch.tsx
│ │ │ ├── tab-nav.css
│ │ │ ├── tab-nav.props.tsx
│ │ │ ├── tab-nav.tsx
│ │ │ ├── table.css
│ │ │ ├── table.props.tsx
│ │ │ ├── table.tsx
│ │ │ ├── tabs.css
│ │ │ ├── tabs.props.tsx
│ │ │ ├── tabs.tsx
│ │ │ ├── text-area.css
│ │ │ ├── text-area.props.tsx
│ │ │ ├── text-area.tsx
│ │ │ ├── text-field.css
│ │ │ ├── text-field.props.tsx
│ │ │ ├── text-field.tsx
│ │ │ ├── text.css
│ │ │ ├── text.props.tsx
│ │ │ ├── text.tsx
│ │ │ ├── theme-panel.css
│ │ │ ├── theme-panel.tsx
│ │ │ ├── theme.props.tsx
│ │ │ ├── theme.tsx
│ │ │ ├── tooltip.css
│ │ │ ├── tooltip.props.tsx
│ │ │ ├── tooltip.tsx
│ │ │ └── visually-hidden.tsx
│ │ ├── helpers/
│ │ │ ├── component-props.ts
│ │ │ ├── extract-margin-props.ts
│ │ │ ├── extract-props.ts
│ │ │ ├── get-margin-styles.ts
│ │ │ ├── get-matching-gray-color.ts
│ │ │ ├── get-responsive-styles.ts
│ │ │ ├── get-subtree.ts
│ │ │ ├── has-own-property.ts
│ │ │ ├── index.ts
│ │ │ ├── inert.ts
│ │ │ ├── input-attributes.ts
│ │ │ ├── is-responsive-object.ts
│ │ │ ├── map-prop-values.ts
│ │ │ ├── merge-styles.ts
│ │ │ └── require-react-element.ts
│ │ ├── index.ts
│ │ ├── props/
│ │ │ ├── as-child.prop.ts
│ │ │ ├── color.prop.ts
│ │ │ ├── gap.props.ts
│ │ │ ├── height.props.ts
│ │ │ ├── high-contrast.prop.ts
│ │ │ ├── index.ts
│ │ │ ├── layout.props.ts
│ │ │ ├── leading-trim.prop.ts
│ │ │ ├── margin.props.ts
│ │ │ ├── padding.props.ts
│ │ │ ├── prop-def.ts
│ │ │ ├── radius.prop.ts
│ │ │ ├── text-align.prop.ts
│ │ │ ├── text-wrap.prop.ts
│ │ │ ├── truncate.prop.ts
│ │ │ ├── weight.prop.ts
│ │ │ └── width.props.ts
│ │ └── styles/
│ │ ├── breakpoints.css
│ │ ├── index.css
│ │ ├── layout.css
│ │ ├── tokens/
│ │ │ ├── base.css
│ │ │ ├── color.css
│ │ │ ├── colors/
│ │ │ │ ├── amber.css
│ │ │ │ ├── blue.css
│ │ │ │ ├── bronze.css
│ │ │ │ ├── brown.css
│ │ │ │ ├── crimson.css
│ │ │ │ ├── cyan.css
│ │ │ │ ├── gold.css
│ │ │ │ ├── grass.css
│ │ │ │ ├── gray.css
│ │ │ │ ├── green.css
│ │ │ │ ├── indigo.css
│ │ │ │ ├── iris.css
│ │ │ │ ├── jade.css
│ │ │ │ ├── lime.css
│ │ │ │ ├── mauve.css
│ │ │ │ ├── mint.css
│ │ │ │ ├── olive.css
│ │ │ │ ├── orange.css
│ │ │ │ ├── pink.css
│ │ │ │ ├── plum.css
│ │ │ │ ├── purple.css
│ │ │ │ ├── red.css
│ │ │ │ ├── ruby.css
│ │ │ │ ├── sage.css
│ │ │ │ ├── sand.css
│ │ │ │ ├── sky.css
│ │ │ │ ├── slate.css
│ │ │ │ ├── teal.css
│ │ │ │ ├── tomato.css
│ │ │ │ ├── violet.css
│ │ │ │ └── yellow.css
│ │ │ ├── cursor.css
│ │ │ ├── index.css
│ │ │ ├── layout.css
│ │ │ ├── radius.css
│ │ │ ├── scaling.css
│ │ │ ├── shadow.css
│ │ │ ├── space.css
│ │ │ └── typography.css
│ │ └── utilities/
│ │ ├── align-content.css
│ │ ├── align-items.css
│ │ ├── align-self.css
│ │ ├── display.css
│ │ ├── flex-basis.css
│ │ ├── flex-direction.css
│ │ ├── flex-grow.css
│ │ ├── flex-shrink.css
│ │ ├── flex-wrap.css
│ │ ├── font-weight.css
│ │ ├── gap.css
│ │ ├── grid-area.css
│ │ ├── grid-auto-flow.css
│ │ ├── grid-column-end.css
│ │ ├── grid-column-start.css
│ │ ├── grid-column.css
│ │ ├── grid-row-end.css
│ │ ├── grid-row-start.css
│ │ ├── grid-row.css
│ │ ├── grid-template-areas.css
│ │ ├── grid-template-columns.css
│ │ ├── grid-template-rows.css
│ │ ├── height.css
│ │ ├── index.css
│ │ ├── inset.css
│ │ ├── justify-content.css
│ │ ├── justify-items.css
│ │ ├── justify-self.css
│ │ ├── layout.css
│ │ ├── leading-trim.css
│ │ ├── margin.css
│ │ ├── max-height.css
│ │ ├── max-width.css
│ │ ├── min-height.css
│ │ ├── min-width.css
│ │ ├── overflow.css
│ │ ├── padding.css
│ │ ├── position.css
│ │ ├── resize.css
│ │ ├── table-layout.css
│ │ ├── text-align.css
│ │ ├── text-wrap.css
│ │ ├── truncate.css
│ │ ├── vertical-align.css
│ │ └── width.css
│ └── tsconfig.json
├── pnpm-workspace.yaml
├── release-process.md
└── turbo.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .github/CONTRIBUTING.md
================================================
# Contributing to Radix Themes
## Code of Conduct
Radix has adopted the [Contributor Covenant](https://www.contributor-covenant.org/) as its Code of Conduct, and we expect project participants to adhere to it.
Please read [the full text](/CODE_OF_CONDUCT.md) so that you can understand what actions will and will not be tolerated.
## Heuristics
[heuristic](<https://en.wikipedia.org/wiki/Heuristic_(computer_science)>)
/ˌhjʊ(ə)ˈrɪstɪk/
> A technique designed for solving a problem more quickly when classic methods are too slow, or for finding an approximate solution when classic methods fail to find any exact solution
- Priority is the best User Experience
- Complexity should be introduced when it’s inevitable
- Code should be easy to reason about
- Code should be easy to delete
- Avoid abstracting too early
- Avoid thinking too far in the future
## Questions
If you have questions about Radix Themes, be sure to check out the docs where we have several examples and detailed API references that may help you solve your problem. You can also share your questions on [GitHub Discussions](https://github.com/radix-ui/themes/discussions).
## How to contribute
There are many ways to contribute to the project. Code is just one possible means of contribution.
- **Feedback.** Tell us what we're doing well or where we can improve.
- **Support.** You can answer questions on StackOverflow or [GitHub Discussions](https://github.com/radix-ui/themes/discussions), or provide solutions for others in [open issues](https://github.com/radix-ui/themes/issues).
- **Write.** If you come up with an interesting example, write about it. Post it to your blog and share it with us. We'd love to see what folks in the community build with Radix Themes!
- **Report.** Create issues with bug reports so we can make Radix Themes even better.
## Working on your first Pull Request?
There are a lot of great resources on creating a good pull request. We've included a few below, but don't be shy—we appreciate all contributions and are happy to help those who are willing to help us!
- [How to Contribute to a Project on GitHub](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github)
## Preparing a Pull Request
[Pull Requests](https://docs.github.com/en/free-pro-team@latest/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request) are always welcome, but before working on a large change, it is best to open an issue first to discuss it with maintainers.
A good PR is small, focuses on a single feature or improvement, and clearly communicates the problem it solves. Try not to include more than one issue in a single PR. It's much easier for us to review multiple small pull requests than one that is large and unwieldy.
1. [Fork the repository](https://docs.github.com/en/free-pro-team@latest/github/getting-started-with-github/fork-a-repo).
2. Clone the fork to your local machine and add upstream remote:
```sh
git clone https://github.com/<your username>/themes.git
cd themes
git remote add upstream https://github.com/radix-ui/themes.git
```
1. Synchronize your local `main` branch with the upstream remote:
```sh
git checkout main
git pull upstream main
```
1. Make sure your Node version matches the [.nvmrc](../.nvmrc).
```
node -v
```
1. Install dependencies with [pnpm](https://pnpm.io):
```sh
pnpm install
```
1. Create a new branch related to your PR:
```sh
git checkout -b my-bug-fix
```
6. Make changes, then commit and push to your forked repository:
```sh
git push -u origin HEAD
```
7. Go to [the repository](https://github.com/radix-ui/themes/pulls) and [make a Pull Request](https://docs.github.com/en/free-pro-team@latest/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request).
8. We will review your Pull Request and either merge it, request changes to it, or close it with an explanation.
## Working locally
The repo is managed with [pnpm Workspaces](https://pnpm.io/workspaces).
### Development
```bash
# install dependencies
pnpm install
# start playground and see examples in the browser
pnpm dev
```
After staring the development server, navigate to `http://localhost:3000/sink` to view the playground. Visit other demos by navigating to pages in the app directory (./app/\*), such as `/demo`, `/explore-components`, `/home-os`.
Make your changes and check that they resolve the problem with an example in `/sink` or another demo page. If there are no examples in the playground to support your change, we suggest adding one and then running local development to make sure nothing is broken.
Lastly, run `pnpm build` to ensure that the build runs successfully before submitting the pull request.
================================================
FILE: .github/PULL_REQUEST_TEMPLATE.md
================================================
<!--
Thank you for contributing! Please follow the steps below to help us process your PR quickly.
- 📝 Use a meaningful title for the pull request and include the name of the package modified.
- 🔍 Add or edit demo examples in ./app/sink or other pages to reflect the change (run `pnpm dev`).
- 🙏 Please review your own PR to check for anything you may have missed.
-->
## Description
<!-- Describe the change you are introducing -->
## Testing steps
<!-- Describe step by step how to test the change being introduced -->
## Relates issues / PRs
<!-- List out related issues and PR links -->
================================================
FILE: .github/actions/ci-setup/action.yml
================================================
name: Setup CI
runs:
using: composite
steps:
- name: Setup pnpm
uses: pnpm/action-setup@v4
with:
run_install: false
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version-file: .nvmrc
cache: pnpm
- name: Install dependencies
shell: bash
run: pnpm install --frozen-lockfile
================================================
FILE: .github/workflows/ci.yml
================================================
name: CI
on:
pull_request:
push:
branches:
- main
permissions:
contents: read
jobs:
build:
name: Build
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: CI Setup
uses: ./.github/actions/ci-setup
- name: Build packages
run: pnpm --filter "@radix-ui/*" build
- name: Upload build artifacts
uses: actions/upload-artifact@v6
with:
name: build-output
path: |
packages/*/dist
packages/radix-ui-themes/layout
packages/radix-ui-themes/tokens
packages/radix-ui-themes/*.css
retention-days: 1
lint:
name: Lint
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: CI Setup
uses: ./.github/actions/ci-setup
- name: Lint
run: pnpm --filter "@radix-ui/*" lint
format:
name: Check Formatting
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: CI Setup
uses: ./.github/actions/ci-setup
- name: Check formatting
run: pnpm format:check
test-vr:
name: 'Tests: Visual regression'
needs: build
runs-on: macos-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: CI Setup
uses: ./.github/actions/ci-setup
- name: Download build artifacts
uses: actions/download-artifact@v7
with:
name: build-output
path: packages
- name: Install Playwright Browsers
run: pnpm --filter "playground" exec playwright install --with-deps
- name: Run Visual Regression Tests
run: pnpm test:vr
- name: Upload test results
if: failure()
uses: actions/upload-artifact@v6
with:
name: playwright-report
path: apps/playground/test-results/
retention-days: 30
================================================
FILE: .github/workflows/publish.yml
================================================
name: Publish Package
on:
release:
types: [created]
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
cancel-in-progress: true
jobs:
publish:
name: Publish Package
if: github.repository == 'radix-ui/themes'
runs-on: ubuntu-latest
permissions:
contents: read
id-token: write
steps:
- name: Checkout
uses: actions/checkout@v4
- name: CI Setup
uses: ./.github/actions/ci-setup
- name: Setup npm registry
uses: actions/setup-node@v4
with:
registry-url: 'https://registry.npmjs.org'
- name: Lint
run: pnpm --filter "@radix-ui/*" lint
- name: Build packages
run: pnpm --filter "@radix-ui/*" build
- name: Publish packages
run: pnpm --filter "@radix-ui/*" publish --access public --provenance --no-git-checks
================================================
FILE: .gitignore
================================================
.DS_Store
node_modules
.turbo
*.log
.next
dist
dist-ssr
*.local
.env
.cache
server/dist
public/dist
packages/radix-ui-themes/*.css
packages/radix-ui-themes/tokens
packages/radix-ui-themes/layout
================================================
FILE: .npmrc
================================================
use-beta-cli=true
================================================
FILE: .nvmrc
================================================
24
================================================
FILE: .prettierignore
================================================
pnpm-lock.yaml
node_modules
.turbo
.next
next-env.d.ts
dist
packages/radix-ui-themes/tokens
packages/radix-ui-themes/layout
packages/radix-ui-themes/styles.css
packages/radix-ui-themes/components.css
packages/radix-ui-themes/utilities.css
packages/radix-ui-themes/tokens.css
packages/radix-ui-themes/layout.css
apps/playground/playwright-report
apps/playground/test-results
================================================
FILE: .prettierrc
================================================
{
"printWidth": 100,
"singleQuote": true,
"overrides": [
{
"files": "*.css",
"options": {
"printWidth": 120
}
}
]
}
================================================
FILE: .vscode/extensions.json
================================================
{
"recommendations": ["stylelint.vscode-stylelint"]
}
================================================
FILE: .vscode/settings.json
================================================
{
"stylelint.enable": true
}
================================================
FILE: AGENTS.md
================================================
# AGENTS.md — Radix Themes
> Context file for AI agents working in this repository.
## Project Overview
**Radix Themes** (`@radix-ui/themes`) is an open-source React component library optimized for fast development, easy maintenance, and accessibility. It provides a comprehensive set of pre-styled, themeable UI components built on top of [Radix Primitives](https://www.radix-ui.com/primitives).
- **Package name:** `@radix-ui/themes`
- **Current version:** 3.x (check `packages/radix-ui-themes/package.json` for exact version)
- **License:** MIT
- **Documentation:** https://www.radix-ui.com/themes/docs/theme
## Documentation
The full docs for this project are hosted at:
- **Theme overview:** https://www.radix-ui.com/themes/docs/theme/overview
- **Component docs:** https://www.radix-ui.com/themes/docs/components (e.g., `.../components/button`, `.../components/dialog`)
- **Utilities:** https://www.radix-ui.com/themes/docs/utilities/box
- **Releases:** https://www.radix-ui.com/themes/docs/overview/releases
When you need to understand a component's API, intended behavior, or usage patterns, **consult the docs at the URLs above** rather than guessing. The documentation site lives in a [separate repository](https://github.com/radix-ui/website).
## Repository Structure
This is a **pnpm monorepo** managed with **Turborepo**.
```
themes/
├── packages/
│ └── radix-ui-themes/ # The core library (published as @radix-ui/themes)
│ ├── src/
│ │ ├── components/ # All component source files
│ │ │ ├── _internal/ # Shared base components (not exported)
│ │ │ ├── *.tsx # Component implementations
│ │ │ ├── *.props.tsx # Component prop definitions
│ │ │ ├── *.css # Component styles
│ │ │ └── index.tsx # Public component exports
│ │ ├── helpers/ # Utility functions (prop extraction, responsive styles, etc.)
│ │ ├── props/ # Shared prop definitions (color, margin, radius, etc.)
│ │ ├── styles/
│ │ │ ├── tokens/ # Design tokens (colors, typography, radius, shadow, spacing)
│ │ │ └── utilities/ # CSS utility classes (layout, typography)
│ │ └── index.ts # Package entry point
│ ├── scripts/ # Build scripts (esbuild CJS/ESM)
│ ├── postcss.config.cjs # PostCSS config with custom plugins
│ ├── tsconfig.json
│ └── package.json
├── apps/
│ └── playground/ # Next.js App Router playground for development
│ ├── app/
│ │ ├── (themeable)/sink/ # Main component showcase (http://localhost:3000/sink)
│ │ ├── (themeable)/test/ # Test pages for specific scenarios
│ │ └── (themeable)/demo/ # Demo pages
│ ├── tests/ # Playwright visual regression tests
│ └── playwright.config.ts
├── .github/
│ ├── workflows/
│ │ ├── ci.yml # Build, lint, format check, visual regression
│ │ └── publish.yml # Publish to npm on GitHub release
│ └── CONTRIBUTING.md
├── package.json # Root monorepo config
├── pnpm-workspace.yaml
└── turbo.json
```
## Tech Stack
| Concern | Tool |
| ---------------------- | ---------------------------------------------------------- |
| Package manager | pnpm 10 (see `.npmrc`) |
| Node version | 24 (see `.nvmrc`) |
| Monorepo orchestration | Turborepo |
| Language | TypeScript (strict) |
| Framework | React (16.8+, 17, 18, 19 supported) |
| JS bundler | esbuild (dual CJS + ESM output) |
| CSS processing | PostCSS (nesting, custom-media, breakpoints, autoprefixer) |
| Linting | ESLint (flat config), Stylelint (for CSS) |
| Formatting | Prettier (single quotes, 100 print width, 120 for CSS) |
| Playground | Next.js (App Router) |
| Testing | Playwright (visual regression) |
## Key Commands
Run all commands from the **repository root** unless stated otherwise:
```bash
# Install dependencies
pnpm install
# Start development (playground + watch mode)
pnpm dev
# Then visit http://localhost:3000/sink
# Build the library
pnpm build
# Build only the themes package
pnpm build:pkg
# Lint everything
pnpm lint
# Format code
pnpm format
# Check formatting
pnpm format:check
# Run visual regression tests
pnpm test:vr
# Update visual regression snapshots
pnpm test:vr:update
# Clean all build artifacts
pnpm clean
```
## Component Architecture
### File Convention
Each component typically consists of three co-located files:
- **`component-name.tsx`** — React component implementation
- **`component-name.props.tsx`** — Prop type definitions and default values
- **`component-name.css`** — Component styles using CSS custom properties and data attributes
Some complex components also have a `.primitive.tsx` file for lower-level behavior (e.g., `checkbox-cards.primitive.tsx`).
### Styling Approach
- Components use **CSS custom properties** (CSS variables) for theming
- Design tokens are defined in `src/styles/tokens/` and include 27+ color scales from `@radix-ui/colors`
- Responsive props use breakpoint-based classes generated via a custom PostCSS plugin (`postcss-breakpoints.cjs`)
- Layout utility classes are generated from `src/styles/utilities/`
- The `Theme` component wraps the app and provides theming context (appearance, accent color, gray color, radius, scaling)
### Prop System
- Components use a typed prop definition system in `src/props/prop-def.ts`
- Most visual props support **responsive objects** (e.g., `size={{ initial: '1', md: '3' }}`)
- Common shared props: `color`, `highContrast`, `radius`, `variant`, `size`, `weight`, `asChild`
- Margin props (`m`, `mx`, `my`, `mt`, `mr`, `mb`, `ml`) are extracted via `extractMarginProps()`
## Build System
The package produces:
1. **CJS output** → `dist/cjs/` (via esbuild)
2. **ESM output** → `dist/esm/` (via esbuild)
3. **Type declarations** → `dist/cjs/` and `dist/esm/` (via tsc)
4. **CSS output** → multiple CSS files at package root:
- `styles.css` — Full styles (tokens + components + utilities)
- `components.css` — Component styles only
- `utilities.css` — Utility classes only
- `tokens.css` — Design tokens only
- `tokens/base.css`, `tokens/colors/*.css` — Granular token files
- `layout.css`, `layout/*.css` — Layout-only subset
## Development Workflow
1. Run `pnpm dev` to start the playground and watch mode
2. Visit `http://localhost:3000/sink` to see all components
3. Test pages are at `http://localhost:3000/test/*` for specific scenarios
4. Demo pages at `http://localhost:3000/demo`
5. Always run `pnpm build` before submitting a PR to ensure the build succeeds
6. Visual regression tests compare screenshots across browsers (Chromium, Firefox, WebKit)
## Coding Conventions
- **Prettier** for formatting (single quotes, 100 char width, 120 for CSS)
- **ESLint** with TypeScript, React Hooks, and jsx-a11y rules
- **Stylelint** for CSS (enforces selector specificity, class naming patterns)
- CSS class names follow the pattern `.rt-ComponentName` (e.g., `.rt-Button`, `.rt-DialogContent`)
- CSS custom properties use `--` prefix namespacing
- Component files use kebab-case naming (e.g., `alert-dialog.tsx`)
- Props files export a `*PropDefs` object defining allowed values and defaults
- Use `classnames` library for conditional class merging
## Release Process
1. PRs that fix bugs or add features should update `packages/radix-ui-themes/CHANGELOG.md`
2. Releases follow semver and are published via GitHub Releases
3. The `publish.yml` workflow automatically publishes to npm when a GitHub release is created
4. Pre-releases use `pnpm publish -r --tag <alpha|beta|rc>`
See `release-process.md` for the full release checklist.
## Important Notes for Agents
- The **documentation site** is in a separate repo ([`radix-ui/website`](https://github.com/radix-ui/website)), not this one
- Built CSS files at the package root (e.g., `styles.css`, `components.css`) are **gitignored** — they are build artifacts
- The `dist/`, `tokens/`, and `layout/` directories are also gitignored build artifacts
- When modifying a component, update all three files (`.tsx`, `.props.tsx`, `.css`) as needed
- The `Theme` component (`theme.tsx`) is the root provider — all other components must be used within it
================================================
FILE: CLAUDE.md
================================================
# AGENTS.md — Radix Themes
> Context file for AI agents working in this repository.
## Project Overview
**Radix Themes** (`@radix-ui/themes`) is an open-source React component library optimized for fast development, easy maintenance, and accessibility. It provides a comprehensive set of pre-styled, themeable UI components built on top of [Radix Primitives](https://www.radix-ui.com/primitives).
- **Package name:** `@radix-ui/themes`
- **Current version:** 3.x (check `packages/radix-ui-themes/package.json` for exact version)
- **License:** MIT
- **Documentation:** https://www.radix-ui.com/themes/docs/theme
## Documentation
The full docs for this project are hosted at:
- **Theme overview:** https://www.radix-ui.com/themes/docs/theme/overview
- **Component docs:** https://www.radix-ui.com/themes/docs/components (e.g., `.../components/button`, `.../components/dialog`)
- **Utilities:** https://www.radix-ui.com/themes/docs/utilities/box
- **Releases:** https://www.radix-ui.com/themes/docs/overview/releases
When you need to understand a component's API, intended behavior, or usage patterns, **consult the docs at the URLs above** rather than guessing. The documentation site lives in a [separate repository](https://github.com/radix-ui/website).
## Repository Structure
This is a **pnpm monorepo** managed with **Turborepo**.
```
themes/
├── packages/
│ └── radix-ui-themes/ # The core library (published as @radix-ui/themes)
│ ├── src/
│ │ ├── components/ # All component source files
│ │ │ ├── _internal/ # Shared base components (not exported)
│ │ │ ├── *.tsx # Component implementations
│ │ │ ├── *.props.tsx # Component prop definitions
│ │ │ ├── *.css # Component styles
│ │ │ └── index.tsx # Public component exports
│ │ ├── helpers/ # Utility functions (prop extraction, responsive styles, etc.)
│ │ ├── props/ # Shared prop definitions (color, margin, radius, etc.)
│ │ ├── styles/
│ │ │ ├── tokens/ # Design tokens (colors, typography, radius, shadow, spacing)
│ │ │ └── utilities/ # CSS utility classes (layout, typography)
│ │ └── index.ts # Package entry point
│ ├── scripts/ # Build scripts (esbuild CJS/ESM)
│ ├── postcss.config.cjs # PostCSS config with custom plugins
│ ├── tsconfig.json
│ └── package.json
├── apps/
│ └── playground/ # Next.js App Router playground for development
│ ├── app/
│ │ ├── (themeable)/sink/ # Main component showcase (http://localhost:3000/sink)
│ │ ├── (themeable)/test/ # Test pages for specific scenarios
│ │ └── (themeable)/demo/ # Demo pages
│ ├── tests/ # Playwright visual regression tests
│ └── playwright.config.ts
├── .github/
│ ├── workflows/
│ │ ├── ci.yml # Build, lint, format check, visual regression
│ │ └── publish.yml # Publish to npm on GitHub release
│ └── CONTRIBUTING.md
├── package.json # Root monorepo config
├── pnpm-workspace.yaml
└── turbo.json
```
## Tech Stack
| Concern | Tool |
| ---------------------- | ---------------------------------------------------------- |
| Package manager | pnpm 10 (see `.npmrc`) |
| Node version | 24 (see `.nvmrc`) |
| Monorepo orchestration | Turborepo |
| Language | TypeScript (strict) |
| Framework | React (16.8+, 17, 18, 19 supported) |
| JS bundler | esbuild (dual CJS + ESM output) |
| CSS processing | PostCSS (nesting, custom-media, breakpoints, autoprefixer) |
| Linting | ESLint (flat config), Stylelint (for CSS) |
| Formatting | Prettier (single quotes, 100 print width, 120 for CSS) |
| Playground | Next.js (App Router) |
| Testing | Playwright (visual regression) |
## Key Commands
Run all commands from the **repository root** unless stated otherwise:
```bash
# Install dependencies
pnpm install
# Start development (playground + watch mode)
pnpm dev
# Then visit http://localhost:3000/sink
# Build the library
pnpm build
# Build only the themes package
pnpm build:pkg
# Lint everything
pnpm lint
# Format code
pnpm format
# Check formatting
pnpm format:check
# Run visual regression tests
pnpm test:vr
# Update visual regression snapshots
pnpm test:vr:update
# Clean all build artifacts
pnpm clean
```
## Component Architecture
### File Convention
Each component typically consists of three co-located files:
- **`component-name.tsx`** — React component implementation
- **`component-name.props.tsx`** — Prop type definitions and default values
- **`component-name.css`** — Component styles using CSS custom properties and data attributes
Some complex components also have a `.primitive.tsx` file for lower-level behavior (e.g., `checkbox-cards.primitive.tsx`).
### Styling Approach
- Components use **CSS custom properties** (CSS variables) for theming
- Design tokens are defined in `src/styles/tokens/` and include 27+ color scales from `@radix-ui/colors`
- Responsive props use breakpoint-based classes generated via a custom PostCSS plugin (`postcss-breakpoints.cjs`)
- Layout utility classes are generated from `src/styles/utilities/`
- The `Theme` component wraps the app and provides theming context (appearance, accent color, gray color, radius, scaling)
### Prop System
- Components use a typed prop definition system in `src/props/prop-def.ts`
- Most visual props support **responsive objects** (e.g., `size={{ initial: '1', md: '3' }}`)
- Common shared props: `color`, `highContrast`, `radius`, `variant`, `size`, `weight`, `asChild`
- Margin props (`m`, `mx`, `my`, `mt`, `mr`, `mb`, `ml`) are extracted via `extractMarginProps()`
## Build System
The package produces:
1. **CJS output** → `dist/cjs/` (via esbuild)
2. **ESM output** → `dist/esm/` (via esbuild)
3. **Type declarations** → `dist/cjs/` and `dist/esm/` (via tsc)
4. **CSS output** → multiple CSS files at package root:
- `styles.css` — Full styles (tokens + components + utilities)
- `components.css` — Component styles only
- `utilities.css` — Utility classes only
- `tokens.css` — Design tokens only
- `tokens/base.css`, `tokens/colors/*.css` — Granular token files
- `layout.css`, `layout/*.css` — Layout-only subset
## Development Workflow
1. Run `pnpm dev` to start the playground and watch mode
2. Visit `http://localhost:3000/sink` to see all components
3. Test pages are at `http://localhost:3000/test/*` for specific scenarios
4. Demo pages at `http://localhost:3000/demo`
5. Always run `pnpm build` before submitting a PR to ensure the build succeeds
6. Visual regression tests compare screenshots across browsers (Chromium, Firefox, WebKit)
## Coding Conventions
- **Prettier** for formatting (single quotes, 100 char width, 120 for CSS)
- **ESLint** with TypeScript, React Hooks, and jsx-a11y rules
- **Stylelint** for CSS (enforces selector specificity, class naming patterns)
- CSS class names follow the pattern `.rt-ComponentName` (e.g., `.rt-Button`, `.rt-DialogContent`)
- CSS custom properties use `--` prefix namespacing
- Component files use kebab-case naming (e.g., `alert-dialog.tsx`)
- Props files export a `*PropDefs` object defining allowed values and defaults
- Use `classnames` library for conditional class merging
## Release Process
1. PRs that fix bugs or add features should update `packages/radix-ui-themes/CHANGELOG.md`
2. Releases follow semver and are published via GitHub Releases
3. The `publish.yml` workflow automatically publishes to npm when a GitHub release is created
4. Pre-releases use `pnpm publish -r --tag <alpha|beta|rc>`
See `release-process.md` for the full release checklist.
## Important Notes for Agents
- The **documentation site** is in a separate repo ([`radix-ui/website`](https://github.com/radix-ui/website)), not this one
- Built CSS files at the package root (e.g., `styles.css`, `components.css`) are **gitignored** — they are build artifacts
- The `dist/`, `tokens/`, and `layout/` directories are also gitignored build artifacts
- When modifying a component, update all three files (`.tsx`, `.props.tsx`, `.css`) as needed
- The `Theme` component (`theme.tsx`) is the root provider — all other components must be used within it
================================================
FILE: CODE_OF_CONDUCT.md
================================================
# Contributor Covenant Code of Conduct
## Our Pledge
In the interest of fostering an open and welcoming environment, we as
contributors and maintainers pledge to making participation in our project and
our community a harassment-free experience for everyone, regardless of age, body
size, disability, ethnicity, sex characteristics, gender identity and expression,
level of experience, education, socio-economic status, nationality, personal
appearance, race, religion, or sexual identity and orientation.
## Our Standards
Examples of behavior that contributes to creating a positive environment
include:
- Using welcoming and inclusive language
- Being respectful of differing viewpoints and experiences
- Gracefully accepting constructive criticism
- Focusing on what is best for the community
- Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
- The use of sexualized language or imagery and unwelcome sexual attention or
advances
- Trolling, insulting/derogatory comments, and personal or political attacks
- Public or private harassment
- Publishing others' private information, such as a physical or electronic
address, without explicit permission
- Other conduct which could reasonably be considered inappropriate in a
professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable
behavior and are expected to take appropriate and fair corrective action in
response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or
reject comments, commits, code, wiki edits, issues, and other contributions
that are not aligned to this Code of Conduct, or to ban temporarily or
permanently any contributor for other behaviors that they deem inappropriate,
threatening, offensive, or harmful.
## Scope
This Code of Conduct applies both within project spaces and in public spaces
when an individual is representing the project or its community. Examples of
representing a project or community include using an official project e-mail
address, posting via an official social media account, or acting as an appointed
representative at an online or offline event. Representation of a project may be
further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported by contacting the project team at colm@workos.com. All
complaints will be reviewed and investigated and will result in a response that
is deemed necessary and appropriate to the circumstances. The project team is
obligated to maintain confidentiality with regard to the reporter of an incident.
Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good
faith may face temporary or permanent repercussions as determined by other
members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
[homepage]: https://www.contributor-covenant.org
For answers to common questions about this code of conduct, see
https://www.contributor-covenant.org/faq
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2023 WorkOS
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
[](https://radix-ui.com/themes)
# Radix Themes
**An open-source component library optimized for fast development, easy maintenance, and accessibility.**
---
## Documentation
For full documentation, visit [radix-ui.com/themes/docs](https://radix-ui.com/themes/docs).
## Releases
For changelog, visit [radix-ui.com/themes/docs/overview/releases](https://radix-ui.com/themes/docs/overview/releases).
## Authors
- Benoît Grélard ([@benoitgrelard](https://twitter.com/benoitgrelard))
- Vlad Moroz ([@vladyslavmoroz](https://twitter.com/vladyslavmoroz))
- Andy Hook ([@Andy_Hook](https://twitter.com/Andy_Hook))
- Lucas Motta ([@elmotta](https://twitter.com/elmotta))
---
## Community
See our [contribution guidelines](./.github/CONTRIBUTING.md) for information on local development and creating a pull request.
- [Github Discussions](https://github.com/radix-ui/themes/discussions) - Ask questions and get answers from other community members.
- [Discord](https://discord.com/invite/7Xb99uG) - To get involved with the Radix community, ask questions and share tips.
- [Twitter](https://twitter.com/radix_ui) - To receive updates, announcements, blog posts, and general Radix tips.
## License
Licensed under the MIT License, Copyright © 2023-present [WorkOS](https://workos.com).
See [LICENSE](./LICENSE) for more information.
================================================
FILE: apps/playground/.gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
/test-results/
/playwright-report/
/playwright/.cache/
# next.js
/.next/
/out/
/next-env.d.ts
# production
/build
# misc
.DS_Store
*.pem
tsconfig.tsbuildinfo
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local
# vercel
.vercel
================================================
FILE: apps/playground/app/(static-theme)/layout.tsx
================================================
import { Theme } from './theme';
export default function Layout({ children }: LayoutProps<'/'>) {
return <Theme>{children}</Theme>;
}
================================================
FILE: apps/playground/app/(static-theme)/theme.tsx
================================================
'use client';
import * as React from 'react';
import { Theme as RadixTheme, ThemeProps } from '@radix-ui/themes';
import { accentColors, appearances, radii, scalings } from '@radix-ui/themes/props';
import { useSearchParams } from 'next/navigation';
function ThemeImpl({
appearance,
accentColor,
radius,
scaling,
...props
}: ThemeProps & {
appearance: (typeof appearances)[number] | undefined;
accentColor: (typeof accentColors)[number] | undefined;
radius: (typeof radii)[number] | undefined;
scaling: (typeof scalings)[number] | undefined;
}) {
return (
<RadixTheme
appearance={appearance}
accentColor={accentColor}
radius={radius}
scaling={scaling}
{...props}
/>
);
}
function Themeable(props: ThemeProps) {
const searchParams = useSearchParams();
const appearance = searchParams.get('appearance');
const accentColor = searchParams.get('accentColor') ?? 'violet';
const radius = searchParams.get('radius');
const scaling = searchParams.get('scaling');
return (
<ThemeImpl
appearance={isAppearance(appearance) ? appearance : 'dark'}
accentColor={isAccentColor(accentColor) ? accentColor : 'violet'}
radius={isRadius(radius) ? radius : undefined}
scaling={isScaling(scaling) ? scaling : undefined}
{...props}
/>
);
}
export function Theme(props: ThemeProps) {
return (
<React.Suspense
fallback={
<ThemeImpl appearance="dark" accentColor="violet" radius={undefined} scaling={undefined} />
}
>
<Themeable {...props} />
</React.Suspense>
);
}
function isAppearance(value: unknown): value is (typeof appearances)[number] {
return isString(value) && appearances.includes(value as (typeof appearances)[number]);
}
function isAccentColor(value: unknown): value is (typeof accentColors)[number] {
return isString(value) && accentColors.includes(value as (typeof accentColors)[number]);
}
function isRadius(value: unknown): value is (typeof radii)[number] {
return isString(value) && radii.includes(value as (typeof radii)[number]);
}
function isScaling(value: unknown): value is (typeof scalings)[number] {
return isString(value) && scalings.includes(value as (typeof scalings)[number]);
}
function isString(value: unknown): value is string {
return typeof value === 'string';
}
================================================
FILE: apps/playground/app/(themeable)/demo/page.tsx
================================================
import * as React from 'react';
import {
Avatar,
Flex,
Separator,
Text,
Button,
IconButton,
Dialog,
TextField,
Select,
Box,
Container,
} from '@radix-ui/themes';
import { Pencil1Icon } from '@radix-ui/react-icons';
import { users } from './users';
export default function Demo() {
return (
<Container size="1" py="8" mx="4">
{users.map((user) => {
return (
<React.Fragment key={user.id}>
<Flex align="center" justify="between">
<Flex align="center" gap="3">
<Avatar src={user.image} fallback={user.name[0]} radius="full" />
<Flex direction="column">
<Text size="2">{user.name}</Text>
<Text size="1" color="gray">
{user.handle}
</Text>
</Flex>
</Flex>
<Dialog.Root>
<Dialog.Trigger>
<IconButton aria-label="Edit user" variant="soft">
<Pencil1Icon />
</IconButton>
</Dialog.Trigger>
<Dialog.Content>
<Flex direction="column" gap="5">
<Box>
<Dialog.Title>{user.name}</Dialog.Title>
<Dialog.Description>Edit and save details below.</Dialog.Description>
</Box>
<Flex direction="column">
<Flex direction="column">
<Text
size="1"
weight="bold"
color="gray"
mb="1"
as="label"
htmlFor={`name-field-${user.id}`}
>
Name
</Text>
<TextField.Root
defaultValue={user.name}
mb="2"
id={`name-field-${user.id}`}
/>
</Flex>
<Flex direction="column">
<Text
size="1"
weight="bold"
color="gray"
mb="1"
id={`role-label-${user.id}`}
as="label"
>
Role
</Text>
<Select.Root defaultValue={user.role}>
<Select.Trigger aria-labelledby={`role-label-${user.id}`} />
<Select.Content variant="soft" color="gray">
<Select.Item value="viewer">Viewer</Select.Item>
<Select.Item value="maintainer">Maintainer</Select.Item>
<Select.Item value="contributor">Contributor</Select.Item>
<Select.Item value="admin">Admin</Select.Item>
</Select.Content>
</Select.Root>
</Flex>
</Flex>
<Flex justify="end" gap="3">
<Dialog.Close>
<Button variant="soft" color="gray">
Cancel
</Button>
</Dialog.Close>
<Dialog.Close>
<Button variant="solid">Save</Button>
</Dialog.Close>
</Flex>
</Flex>
</Dialog.Content>
</Dialog.Root>
</Flex>
<Separator size="4" my="3" />
</React.Fragment>
);
})}
</Container>
);
}
================================================
FILE: apps/playground/app/(themeable)/demo/users.ts
================================================
type User = {
id: string;
image?: string;
name: string;
handle: string;
role: 'admin' | 'maintainer' | 'contributor' | 'viewer';
};
export const users: User[] = [
{
id: 'user1',
image: avatar('1544005313-94ddf0286df2'),
name: 'Emmeline Labrie',
handle: '@emmeline_labrie',
role: 'contributor',
},
{
id: 'user2',
image: avatar('1522075469751-3a6694fb2f61'),
name: 'Zac Wight',
handle: '@zacwight',
role: 'admin',
},
{
id: 'user3',
image: avatar('1632765854612-9b02b6ec2b15', { x: 0.4, y: 0.35, zoom: 1.05 }),
name: 'Zahra Ambessa',
handle: '@zahraambessa',
role: 'viewer',
},
{
id: 'user4',
image: avatar('1533933269825-da140ad3132f', { y: 0.46, zoom: 1.25 }),
name: 'Tilde Thygesen',
handle: '@tildethygesen',
role: 'maintainer',
},
{
id: 'user5',
name: 'Joaquin Verdugo',
handle: '@joaquinverdugo',
role: 'viewer',
},
{
id: 'user6',
image: avatar('1496345875659-11f7dd282d1d', { x: 0.49, y: 0.5, zoom: 2.5 }),
name: 'Craig Caldwell',
handle: '@craigcaldwell',
role: 'contributor',
},
{
id: 'user7',
name: 'Harrison Mellor',
handle: '@harrison_mellor',
role: 'viewer',
},
];
//
//
//
//
//
//
//
function avatar(id: string, params?: { x?: number; y?: number; zoom?: number }) {
let crop = '';
if (params === undefined) {
crop = 'faces';
} else {
const { x = 0.5, y = 0.5, zoom = 1 } = params ?? {};
crop = `focalpoint&fp-x=${x}&fp-y=${y}&fp-z=${zoom}`;
}
return `https://images.unsplash.com/photo-${id}?&w=64&h=64&dpr=2&q=70&crop=${crop}&fit=crop`;
}
================================================
FILE: apps/playground/app/(themeable)/ghost-balance/page.tsx
================================================
import * as React from 'react';
import {
Section,
Flex,
Grid,
Button,
IconButton,
Link,
Popover,
Container,
} from '@radix-ui/themes';
import {
ChatBubbleIcon,
DotsHorizontalIcon,
FileTextIcon,
QuestionMarkCircledIcon,
SunIcon,
} from '@radix-ui/react-icons';
export default function Ghost() {
return (
<Container py="8" mx="4">
<Flex wrap="wrap" width="100%">
<Grid columns="2">
{(['row', 'column'] as const).map((direction) => (
<Section key={direction}>
<Flex direction={direction === 'row' ? 'column' : 'row'} gap="7">
<Flex
direction={direction}
align={direction === 'row' ? 'center' : 'start'}
gap="4"
>
<Button variant="ghost" size="1">
Action
</Button>
<Button variant="ghost" size="1">
Cancel
</Button>
<Button size="1">Save</Button>
<Button size="1">Delete</Button>
<IconButton variant="ghost" size="1" radius="full">
<SunIcon />
</IconButton>
</Flex>
<Flex
direction={direction}
align={direction === 'row' ? 'center' : 'start'}
gap="4"
>
<Button variant="ghost" size="2">
Action
</Button>
<Button variant="ghost" size="2">
Cancel
</Button>
<Button size="2">Save</Button>
<Button size="2">Delete</Button>
<IconButton variant="ghost" size="2" radius="full">
<SunIcon />
</IconButton>
</Flex>
<Flex
direction={direction}
align={direction === 'row' ? 'center' : 'start'}
gap="5"
>
<Button variant="ghost" size="3">
Action
</Button>
<Button variant="ghost" size="3">
Cancel
</Button>
<Button size="3">Save</Button>
<Button size="3">Delete</Button>
<IconButton variant="ghost" size="3" radius="full">
<SunIcon />
</IconButton>
</Flex>
<Flex
direction={direction}
align={direction === 'row' ? 'center' : 'start'}
gap="4"
>
<Button variant="ghost" size="2">
<QuestionMarkCircledIcon />
Help
</Button>
<Button variant="ghost" size="2">
<ChatBubbleIcon />
Feedback
</Button>
<Flex asChild align="center" gap="1">
<Link size="2" href="#">
<FileTextIcon />
Docs
</Link>
</Flex>
<IconButton variant="ghost" size="2" radius="full">
<SunIcon />
</IconButton>
</Flex>
<Flex
direction={direction}
align={direction === 'row' ? 'center' : 'start'}
gap="4"
>
<Popover.Root>
<Popover.Trigger>
<Button variant="ghost">Open</Button>
</Popover.Trigger>
<Popover.Content sideOffset={0} style={{ padding: 100 }} />
</Popover.Root>
<Popover.Root>
<Popover.Trigger>
<IconButton variant="ghost">
<DotsHorizontalIcon />
</IconButton>
</Popover.Trigger>
<Popover.Content sideOffset={0} style={{ padding: 100 }} />
</Popover.Root>
</Flex>
</Flex>
</Section>
))}
</Grid>
<Flex direction="column" gap="2" mb="5">
<Flex align="center" gap="5">
<Button variant="ghost">Cancel</Button>
<Button>Save</Button>
</Flex>
<Flex align="center">
<Button variant="ghost" mr="5">
Cancel
</Button>
<Button>Save</Button>
</Flex>
</Flex>
<Flex direction="column" gap="2" style={{ width: 500 }}>
<Flex align="center" justify="between">
<Button variant="ghost">Cancel</Button>
<Button>Save</Button>
</Flex>
<Flex align="center">
<Button variant="ghost" mr="auto">
Cancel
</Button>
<Button>Save</Button>
</Flex>
</Flex>
</Flex>
</Container>
);
}
================================================
FILE: apps/playground/app/(themeable)/layout.tsx
================================================
import { Theme, ThemePanel } from '@radix-ui/themes';
export default function Layout({ children }: LayoutProps<'/'>) {
return (
<Theme appearance="dark" accentColor="violet">
{children}
<ThemePanel defaultOpen={false} />
</Theme>
);
}
================================================
FILE: apps/playground/app/(themeable)/sink/_components.tsx
================================================
import type * as React from 'react';
import {
ContextMenu,
DropdownMenu,
Flex,
Grid,
Select,
Switch,
Table,
Text,
TextArea,
TextField,
Button,
Heading,
} from '@radix-ui/themes';
export function DropdownMenuContentDemo(props: React.ComponentProps<typeof DropdownMenu.Content>) {
return (
<DropdownMenu.Content {...props}>
<DropdownMenu.Item shortcut="⌘+T">New Tab</DropdownMenu.Item>
<DropdownMenu.Item shortcut="⌘+N">New Window</DropdownMenu.Item>
<DropdownMenu.Item shortcut="⇧+⌘+N" disabled>
New Private Window
</DropdownMenu.Item>
<DropdownMenu.Sub>
<DropdownMenu.SubTrigger>More Tools</DropdownMenu.SubTrigger>
<DropdownMenu.SubContent>
<DropdownMenu.Item shortcut="⌘+S">Save Page As…</DropdownMenu.Item>
<DropdownMenu.Item>Create Shortcut…</DropdownMenu.Item>
<DropdownMenu.Item>Name Window…</DropdownMenu.Item>
<DropdownMenu.Separator />
<DropdownMenu.Item>Developer Tools</DropdownMenu.Item>
</DropdownMenu.SubContent>
</DropdownMenu.Sub>
<DropdownMenu.Separator />
<DropdownMenu.Group>
<DropdownMenu.Label>Other</DropdownMenu.Label>
<DropdownMenu.Item shortcut="⌘+P">Print</DropdownMenu.Item>
<DropdownMenu.Item shortcut="⌘+Q" asChild>
<a href="#logout">Logout</a>
</DropdownMenu.Item>
</DropdownMenu.Group>
{props.variant === 'solid' && (
<>
<DropdownMenu.Separator />
<DropdownMenu.CheckboxItem shortcut="⌘+B" checked>
Show Bookmarks
</DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem>Show Full URLs</DropdownMenu.CheckboxItem>
<DropdownMenu.Separator />
<DropdownMenu.Label>People</DropdownMenu.Label>
<DropdownMenu.RadioGroup value="pedro">
<DropdownMenu.RadioItem value="pedro">Pedro Duarte</DropdownMenu.RadioItem>
<DropdownMenu.RadioItem value="colm">Colm Tuite</DropdownMenu.RadioItem>
</DropdownMenu.RadioGroup>
<DropdownMenu.Separator />
<DropdownMenu.Item color="red">Delete</DropdownMenu.Item>
</>
)}
</DropdownMenu.Content>
);
}
export function ContextMenuContentDemo(props: React.ComponentProps<typeof ContextMenu.Content>) {
return (
<ContextMenu.Content {...props}>
<ContextMenu.Item shortcut="⌘+T">New Tab</ContextMenu.Item>
<ContextMenu.Item shortcut="⌘+N">New Window</ContextMenu.Item>
<ContextMenu.Item shortcut="⇧+⌘+N" disabled>
New Private Window
</ContextMenu.Item>
<ContextMenu.Sub>
<ContextMenu.SubTrigger>More Tools</ContextMenu.SubTrigger>
<ContextMenu.SubContent>
<ContextMenu.Item shortcut="⌘+S">Save Page As…</ContextMenu.Item>
<ContextMenu.Item>Create Shortcut…</ContextMenu.Item>
<ContextMenu.Item>Name Window…</ContextMenu.Item>
<ContextMenu.Separator />
<ContextMenu.Item>Developer Tools</ContextMenu.Item>
</ContextMenu.SubContent>
</ContextMenu.Sub>
<ContextMenu.Separator />
<ContextMenu.Group>
<ContextMenu.Label>Other</ContextMenu.Label>
<ContextMenu.Item shortcut="⌘+P">Print</ContextMenu.Item>
<ContextMenu.Item shortcut="⌘+Q" asChild>
<a href="#logout">Logout</a>
</ContextMenu.Item>
</ContextMenu.Group>
{props.variant === 'solid' && (
<>
<ContextMenu.Separator />
<ContextMenu.CheckboxItem shortcut="⌘+B" checked>
Show Bookmarks
</ContextMenu.CheckboxItem>
<ContextMenu.CheckboxItem>Show Full URLs</ContextMenu.CheckboxItem>
<ContextMenu.Separator />
<ContextMenu.Label>People</ContextMenu.Label>
<ContextMenu.RadioGroup value="pedro">
<ContextMenu.RadioItem value="pedro">Pedro Duarte</ContextMenu.RadioItem>
<ContextMenu.RadioItem value="colm">Colm Tuite</ContextMenu.RadioItem>
</ContextMenu.RadioGroup>
<DropdownMenu.Separator />
<ContextMenu.Item color="red">Delete</ContextMenu.Item>
</>
)}
</ContextMenu.Content>
);
}
type RightClickAreaProps = React.ComponentProps<typeof Grid> & {
size: '1' | '2';
};
export function RightClickArea({ size = '2', ...props }: RightClickAreaProps) {
return (
<Grid
height={size === '2' ? '48px' : '32px'}
px="3"
{...props}
style={{
placeItems: 'center',
borderRadius: 'var(--radius-3)',
border: '1px dashed var(--accent-6)',
cursor: 'default',
...props.style,
}}
>
<Text size="1" color="gray">
Right-click here
</Text>
</Grid>
);
}
export function SelectItemsDemo() {
return (
<>
<Select.Group>
<Select.Label>Fruits</Select.Label>
<Select.Item value="orange">Orange</Select.Item>
<Select.Item value="apple">Apple</Select.Item>
<Select.Item value="grapes" disabled>
Grape
</Select.Item>
</Select.Group>
<Select.Separator />
<Select.Group>
<Select.Label>Vegetables</Select.Label>
<Select.Item value="carrot">Carrot</Select.Item>
<Select.Item value="potato">Potato</Select.Item>
</Select.Group>
</>
);
}
export function AspectRatioImage() {
return (
<img
src="https://images.unsplash.com/photo-1605030753481-bb38b08c384a?&auto=format&fit=crop&w=400&q=80"
alt="A house in a forest"
style={{ objectFit: 'cover', width: '100%', height: '100%' }}
/>
);
}
export function CustomUserIcon() {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
style={{ width: '60%', height: '60%' }}
>
<path
fillRule="evenodd"
d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z"
clipRule="evenodd"
/>
</svg>
);
}
export function SampleNestedUI({
children,
title,
...props
}: React.ComponentPropsWithRef<typeof Flex>) {
return (
<Flex
p="5"
gap="9"
{...props}
style={{
boxShadow: '0 0 0 1px var(--gray-a6)',
borderRadius: 'var(--radius-2)',
}}
>
<div>
<Heading size="2" trim="start" mb="3">
{title}
</Heading>
<Flex direction="column" gap="3">
<Grid gap="1">
<Text as="p" weight="bold">
Feedback
</Text>
<TextArea variant="classic" placeholder="Your feedback" />
</Grid>
<Flex asChild justify="between">
<label>
<Text color="gray" size="2">
Attach screenshot?
</Text>
<Switch size="1" variant="classic" defaultChecked highContrast />
</label>
</Flex>
<Grid columns="2" gap="2">
<Button variant="surface">Back</Button>
<Button variant="classic">Submit</Button>
</Grid>
</Flex>
</div>
{children}
</Flex>
);
}
export function PlaygroundForm({
size,
...props
}: React.ComponentProps<typeof Flex> & {
size?: React.ComponentProps<typeof TextField.Root>['size'];
}) {
return (
<Flex direction="column" gap="3" {...props}>
<Grid gap="1">
<Text size={size} weight="bold">
Email
</Text>
<TextField.Root size={size} variant="classic" placeholder="Your email" />
</Grid>
<Grid gap="1">
<Text size={size} weight="bold">
Subject
</Text>
<Select.Root defaultValue="customer" size={size}>
<Select.Trigger variant="classic" />
<Select.Content>
<Select.Item value="customer">Customer feedback</Select.Item>
<Select.Item value="help">Help</Select.Item>
</Select.Content>
</Select.Root>
</Grid>
<Grid gap="1">
<Text size={size} weight="bold">
Feedback
</Text>
<TextArea size={size} variant="classic" placeholder="Your feedback" />
</Grid>
<Grid columns="2" gap="2">
<Button size={size} variant="surface">
Back
</Button>
<Button size={size} variant="classic">
Submit
</Button>
</Grid>
</Flex>
);
}
export function TableExample(
props: React.ComponentProps<typeof Table.Root> & { noEmail?: boolean },
) {
const { noEmail, ...rootProps } = props;
return (
<Table.Root {...rootProps}>
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell>Full name</Table.ColumnHeaderCell>
{!noEmail && <Table.ColumnHeaderCell>Email</Table.ColumnHeaderCell>}
<Table.ColumnHeaderCell>Group</Table.ColumnHeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
<Table.Row>
<Table.RowHeaderCell>Andy</Table.RowHeaderCell>
{!noEmail && <Table.Cell>andy@workos.com</Table.Cell>}
<Table.Cell>Developer</Table.Cell>
</Table.Row>
<Table.Row>
<Table.RowHeaderCell>Benoit</Table.RowHeaderCell>
{!noEmail && <Table.Cell>benoit@workos.com</Table.Cell>}
<Table.Cell>Admin</Table.Cell>
</Table.Row>
<Table.Row>
<Table.RowHeaderCell>Lucas</Table.RowHeaderCell>
{!noEmail && <Table.Cell>lucas@workos.com</Table.Cell>}
<Table.Cell>Developer</Table.Cell>
</Table.Row>
<Table.Row>
<Table.RowHeaderCell>Vlad</Table.RowHeaderCell>
{!noEmail && <Table.Cell>vlad@workos.com</Table.Cell>}
<Table.Cell>Designer</Table.Cell>
</Table.Row>
</Table.Body>
</Table.Root>
);
}
================================================
FILE: apps/playground/app/(themeable)/sink/_utils.tsx
================================================
export function upperFirst(string: string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
export const colorsRegular = [
'tomato',
'red',
'ruby',
'crimson',
'pink',
'plum',
'purple',
'violet',
'iris',
'indigo',
'blue',
'cyan',
'teal',
'jade',
'green',
'grass',
'brown',
'orange',
] as const;
export const colorsBright = ['sky', 'mint', 'lime', 'yellow', 'amber'] as const;
export const colorsMetal = ['gold', 'bronze'] as const;
export const accentColorsGrouped = [
{ label: 'Regulars', values: colorsRegular },
{ label: 'Brights', values: colorsBright },
{ label: 'Metals', values: colorsMetal },
{ label: 'Gray', values: ['gray'] as const },
];
================================================
FILE: apps/playground/app/(themeable)/sink/alert-dialog/page.tsx
================================================
import { AlertDialog, Button, Flex } from '@radix-ui/themes';
import { DocsSection, DocsSectionBody, DocsSectionHeading } from '../docs-section';
export default function AlertDialogPage() {
return (
<DocsSection>
<DocsSectionHeading>AlertDialog</DocsSectionHeading>
<DocsSectionBody>
<AlertDialog.Root>
<AlertDialog.Trigger>
<Button variant="solid">Open</Button>
</AlertDialog.Trigger>
<AlertDialog.Content maxWidth="450px">
<Flex direction="column" gap="3">
<AlertDialog.Title>Revoke setup link</AlertDialog.Title>
<AlertDialog.Description>
The setup link will no longer be accessible and any existing setup sessions will be
revoked.
</AlertDialog.Description>
<Flex gap="3" mt="4" justify="end">
<AlertDialog.Cancel>
<Button variant="soft" color="gray">
Cancel
</Button>
</AlertDialog.Cancel>
<AlertDialog.Action>
<Button variant="solid" color="red">
Revoke link
</Button>
</AlertDialog.Action>
</Flex>
</Flex>
</AlertDialog.Content>
</AlertDialog.Root>
</DocsSectionBody>
</DocsSection>
);
}
================================================
FILE: apps/playground/app/(themeable)/sink/aspect-ratio/page.tsx
================================================
import { AspectRatio, Grid, Text } from '@radix-ui/themes';
import { DocsSection, DocsSectionBody, DocsSectionHeading } from '../docs-section';
import { AspectRatioImage } from '../_components';
export default function AspectRatioPage() {
return (
<DocsSection>
<DocsSectionHeading>AspectRatio</DocsSectionHeading>
<DocsSectionBody>
<Grid gap="5" columns="4">
<div>
<Text as="p" size="1" color="gray" mb="2">
1x2
</Text>
<AspectRatio ratio={1 / 2}>
<AspectRatioImage />
</AspectRatio>
</div>
<div>
<Text as="p" size="1" color="gray" mb="2">
1x1
</Text>
<AspectRatio>
<AspectRatioImage />
</AspectRatio>
</div>
<div>
<Text as="p" size="1" color="gray" mb="2">
16x9
</Text>
<AspectRatio ratio={16 / 9}>
<AspectRatioImage />
</AspectRatio>
</div>
<div>
<Text as="p" size="1" color="gray" mb="2">
2x1
</Text>
<AspectRatio ratio={2 / 1}>
<AspectRatioImage />
</AspectRatio>
</div>
</Grid>
</DocsSectionBody>
</DocsSection>
);
}
================================================
FILE: apps/playground/app/(themeable)/sink/avatar/page.tsx
================================================
import { Fragment } from 'react';
import { Avatar, Box, Code, Flex, Table, Text } from '@radix-ui/themes';
import { avatarPropDefs } from '@radix-ui/themes/props';
import { DocsSection, DocsSectionBody, DocsSectionHeading } from '../docs-section';
import { CustomUserIcon } from '../_components';
import { accentColorsGrouped } from '../_utils';
export default function AvatarPage() {
return (
<DocsSection>
<DocsSectionHeading>Avatar</DocsSectionHeading>
<DocsSectionBody>
<Table.Root>
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell />
<Table.ColumnHeaderCell>image</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>1 letter</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>2 letters</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>icon</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>+ high-contrast</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>gray</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>+ high-contrast</Table.ColumnHeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{avatarPropDefs.variant.values.map((variant) => (
<Table.Row key={variant}>
<Table.RowHeaderCell>{variant}</Table.RowHeaderCell>
<Table.Cell>
<Avatar variant={variant} src="./api/avatar" fallback="D" />
</Table.Cell>
<Table.Cell>
<Avatar variant={variant} fallback="D" />
</Table.Cell>
<Table.Cell>
<Avatar variant={variant} fallback="BG" />
</Table.Cell>
<Table.Cell>
<Avatar variant={variant} fallback={<CustomUserIcon />} />
</Table.Cell>
<Table.Cell>
<Avatar variant={variant} highContrast fallback="D" />
</Table.Cell>
<Table.Cell>
<Avatar variant={variant} color="gray" fallback="D" />
</Table.Cell>
<Table.Cell>
<Avatar variant={variant} color="gray" highContrast fallback="D" />
</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table.Root>
<Table.Root>
<Table.Body>
{avatarPropDefs.size.values.map((size) => (
<Table.Row key={size}>
<Table.RowHeaderCell>{size}</Table.RowHeaderCell>
<Table.Cell>
<Flex gap="3">
<Avatar size={size} src="./api/avatar" fallback="D" />
<Avatar size={size} fallback="D" />
<Avatar size={size} fallback="BG" />
</Flex>
</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table.Root>
<Text as="p" my="5">
<Code>radius</Code> can be set per instance:
</Text>
<details>
<summary>
<Text size="2" color="gray">
See specific radius examples
</Text>
</summary>
<Box mt="3">
<Table.Root>
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell />
{avatarPropDefs.size.values.map((size) => (
<Table.ColumnHeaderCell key={size}>size {size}</Table.ColumnHeaderCell>
))}
</Table.Row>
</Table.Header>
<Table.Body>
{avatarPropDefs.radius.values.map((radius) => (
<Table.Row key={radius}>
<Table.RowHeaderCell>{radius}</Table.RowHeaderCell>
{avatarPropDefs.size.values.map((size) => (
<Table.Cell key={size}>
<Avatar size={size} radius={radius} src="./api/avatar" fallback="D" />
</Table.Cell>
))}
</Table.Row>
))}
</Table.Body>
</Table.Root>
</Box>
</details>
<Text as="p" my="5">
<Code>color</Code> can be set per instance:
</Text>
<details>
<summary>
<Text size="2" color="gray">
See colors & variants combinations
</Text>
</summary>
{accentColorsGrouped.map(({ label, values }) => (
<Fragment key={label}>
<Text as="p" weight="bold" mt="6" mb="4">
{label}
</Text>
<Table.Root>
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell />
{avatarPropDefs.variant.values.map((variant) => (
<Table.ColumnHeaderCell key={variant}>{variant}</Table.ColumnHeaderCell>
))}
</Table.Row>
</Table.Header>
<Table.Body>
{values.map((color) => (
<Table.Row key={color}>
<Table.RowHeaderCell>{color}</Table.RowHeaderCell>
{avatarPropDefs.variant.values.map((variant) => (
<Table.Cell key={variant}>
<Avatar variant={variant} color={color} fallback="D" />
<Avatar
variant={variant}
color={color}
highContrast
fallback="D"
ml="2"
/>
</Table.Cell>
))}
</Table.Row>
))}
</Table.Body>
</Table.Root>
</Fragment>
))}
</details>
</DocsSectionBody>
</DocsSection>
);
}
================================================
FILE: apps/playground/app/(themeable)/sink/badge/page.tsx
================================================
import { Fragment } from 'react';
import { Badge, Box, Code, Flex, Text, Table } from '@radix-ui/themes';
import { badgePropDefs } from '@radix-ui/themes/props';
import { DocsSection, DocsSectionBody, DocsSectionHeading } from '../docs-section';
import { accentColorsGrouped, upperFirst } from '../_utils';
export default function BadgePage() {
return (
<DocsSection>
<DocsSectionHeading>Badge</DocsSectionHeading>
<DocsSectionBody>
<Table.Root>
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell />
{badgePropDefs.size.values.map((size) => (
<Table.ColumnHeaderCell key={size}>size {size}</Table.ColumnHeaderCell>
))}
</Table.Row>
</Table.Header>
<Table.Body>
{badgePropDefs.variant.values.map((variant) => (
<Table.Row key={variant}>
<Table.RowHeaderCell>{variant}</Table.RowHeaderCell>
{badgePropDefs.size.values.map((size) => (
<Table.Cell key={size}>
<Flex key={variant} gap="3" wrap="wrap" style={{ maxWidth: 600 }}>
{(['orange', 'violet', 'cyan', 'gray'] as const).map((color) => (
<Flex key={color} direction="column" gap="1">
<Badge size={size} variant={variant} color={color}>
{upperFirst(color)}
</Badge>
</Flex>
))}
</Flex>
</Table.Cell>
))}
</Table.Row>
))}
</Table.Body>
</Table.Root>
<Text as="p" my="5">
<Code>radius</Code> can be set per instance:
</Text>
<details>
<summary>
<Text size="2" color="gray">
See specific radius examples
</Text>
</summary>
<Box mt="3">
<Table.Root>
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell />
{badgePropDefs.size.values.map((size) => (
<Table.ColumnHeaderCell key={size}>size {size}</Table.ColumnHeaderCell>
))}
</Table.Row>
</Table.Header>
<Table.Body>
{badgePropDefs.radius.values.map((radius) => (
<Table.Row key={radius}>
<Table.RowHeaderCell>{radius}</Table.RowHeaderCell>
{badgePropDefs.size.values.map((size) => (
<Table.Cell key={size}>
<Badge size={size} radius={radius}>
{upperFirst(radius)}
</Badge>
</Table.Cell>
))}
</Table.Row>
))}
</Table.Body>
</Table.Root>
</Box>
</details>
<Text as="p" my="5">
<Code>color</Code> can be set per instance:
</Text>
<details>
<summary>
<Text size="2" color="gray">
See colors & variants combinations
</Text>
</summary>
{accentColorsGrouped.map(({ label, values }) => (
<Fragment key={label}>
<Text as="p" weight="bold" mt="6" mb="4">
{label}
</Text>
<Table.Root>
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell />
{badgePropDefs.variant.values.map((variant) => (
<Table.ColumnHeaderCell key={variant}>{variant}</Table.ColumnHeaderCell>
))}
</Table.Row>
</Table.Header>
<Table.Body>
{values.map((color) => (
<Table.Row key={color}>
<Table.RowHeaderCell>{color}</Table.RowHeaderCell>
{badgePropDefs.variant.values.map((variant) => (
<Table.Cell key={variant}>
<Flex direction="column" align="start" gap="1">
<Badge variant={variant} color={color}>
{color}
</Badge>
<Badge variant={variant} color={color} highContrast>
{color}
</Badge>
</Flex>
</Table.Cell>
))}
</Table.Row>
))}
</Table.Body>
</Table.Root>
</Fragment>
))}
</details>
</DocsSectionBody>
</DocsSection>
);
}
================================================
FILE: apps/playground/app/(themeable)/sink/blockquote/page.tsx
================================================
import { Blockquote, Flex, Text } from '@radix-ui/themes';
import { DocsSection, DocsSectionBody, DocsSectionHeading } from '../docs-section';
export default function BlockquotePage() {
return (
<DocsSection>
<DocsSectionHeading>Blockquote</DocsSectionHeading>
<DocsSectionBody>
<Flex direction="column" align="start" gap="5">
<Blockquote size="6" style={{ maxWidth: '50ch' }}>
The goal of typography is to relate font size, line height, and line width in a
proportional way that maximizes beauty and makes reading easier and more pleasant. The
question is: What proportion(s) will give us the best results?
</Blockquote>
<Blockquote size="4" style={{ maxWidth: '50ch' }} color="gray" highContrast>
The goal of typography is to relate font size, line height, and line width in a
proportional way that maximizes <Text color="pink">beauty</Text> and makes reading
easier and more pleasant. The question is: What proportion(s) will give us the best
results?
</Blockquote>
<Blockquote size="2" style={{ maxWidth: '50ch' }} color="blue">
The goal of typography is to relate font size, line height, and line width in a
proportional way that maximizes <Text highContrast>beauty</Text> and makes reading
easier and more pleasant. The question is: What proportion(s) will give us the best
results?
</Blockquote>
</Flex>
</DocsSectionBody>
</DocsSection>
);
}
================================================
FILE: apps/playground/app/(themeable)/sink/button/page.tsx
================================================
import { Fragment } from 'react';
import { ArrowRightIcon, Pencil2Icon } from '@radix-ui/react-icons';
import { Button, Box, Text, Table, Code } from '@radix-ui/themes';
import { buttonPropDefs } from '@radix-ui/themes/props';
import { DocsSection, DocsSectionBody, DocsSectionHeading } from '../docs-section';
import { accentColorsGrouped } from '../_utils';
export default function ButtonPage() {
return (
<DocsSection>
<DocsSectionHeading>Button</DocsSectionHeading>
<DocsSectionBody>
<Table.Root>
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell />
{buttonPropDefs.size.values.map((size) => (
<Table.ColumnHeaderCell key={size}>size {size}</Table.ColumnHeaderCell>
))}
<Table.ColumnHeaderCell>+ high-contrast</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell />
<Table.ColumnHeaderCell>gray</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>+ high-contrast</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell />
<Table.ColumnHeaderCell>disabled</Table.ColumnHeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{buttonPropDefs.variant.values.map((variant) => (
<Table.Row key={variant}>
<Table.RowHeaderCell>{variant}</Table.RowHeaderCell>
{buttonPropDefs.size.values.map((size) => (
<Table.Cell key={size}>
<Button size={size} variant={variant}>
Next <ArrowRightIcon />
</Button>
</Table.Cell>
))}
<Table.Cell>
<Button variant={variant} highContrast>
Next <ArrowRightIcon />
</Button>
</Table.Cell>
<Table.Cell />
<Table.Cell>
<Button variant={variant} color="gray">
Next <ArrowRightIcon />
</Button>
</Table.Cell>
<Table.Cell>
<Button variant={variant} color="gray" highContrast>
Next <ArrowRightIcon />
</Button>
</Table.Cell>
<Table.Cell />
<Table.Cell>
<Button variant={variant} disabled>
Next <ArrowRightIcon />
</Button>
</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table.Root>
<Text as="p" my="5">
<Code>radius</Code> can be set per instance:
</Text>
<details>
<summary>
<Text size="2" color="gray">
See specific radius examples
</Text>
</summary>
<Box mt="3">
<Table.Root>
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell />
{buttonPropDefs.size.values.map((size) => (
<Table.ColumnHeaderCell key={size}>size {size}</Table.ColumnHeaderCell>
))}
</Table.Row>
</Table.Header>
<Table.Body>
{buttonPropDefs.radius.values.map((radius) => (
<Table.Row key={radius}>
<Table.RowHeaderCell>{radius}</Table.RowHeaderCell>
{buttonPropDefs.size.values.map((size) => (
<Table.Cell key={size}>
<Button size={size} radius={radius}>
Next <ArrowRightIcon />
</Button>
</Table.Cell>
))}
</Table.Row>
))}
</Table.Body>
</Table.Root>
</Box>
</details>
<Text as="p" my="5">
<Code>color</Code> can be set per instance:
</Text>
<details>
<summary>
<Text size="2" color="gray">
See colors & variants combinations
</Text>
</summary>
{accentColorsGrouped.map(({ label, values }) => (
<Fragment key={label}>
<Text as="p" weight="bold" mt="6" mb="4">
{label}
</Text>
<Table.Root>
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell />
{buttonPropDefs.variant.values.map((variant) => (
<Table.ColumnHeaderCell key={variant}>{variant}</Table.ColumnHeaderCell>
))}
</Table.Row>
</Table.Header>
<Table.Body>
{values.map((color) => (
<Table.Row key={color}>
<Table.RowHeaderCell>{color}</Table.RowHeaderCell>
{buttonPropDefs.variant.values.map((variant) => (
<Table.Cell key={variant}>
<Button variant={variant} color={color}>
<Pencil2Icon />
Edit
</Button>
<Button variant={variant} color={color} highContrast ml="2">
<Pencil2Icon />
Edit
</Button>
</Table.Cell>
))}
</Table.Row>
))}
</Table.Body>
</Table.Root>
</Fragment>
))}
</details>
</DocsSectionBody>
</DocsSection>
);
}
================================================
FILE: apps/playground/app/(themeable)/sink/callout/page.tsx
================================================
import { Fragment } from 'react';
import { InfoCircledIcon, Cross1Icon } from '@radix-ui/react-icons';
import { Callout, Flex, IconButton, Link, Separator, Text, Code, Table } from '@radix-ui/themes';
import { calloutRootPropDefs } from '@radix-ui/themes/props';
import { DocsSection, DocsSectionBody, DocsSectionHeading } from '../docs-section';
import { accentColorsGrouped } from '../_utils';
export default function CalloutPage() {
return (
<DocsSection>
<DocsSectionHeading>Callout</DocsSectionHeading>
<DocsSectionBody>
<Table.Root>
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell />
<Table.ColumnHeaderCell>default</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>+ high-contrast</Table.ColumnHeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{calloutRootPropDefs.variant.values.map((variant) => (
<Table.Row key={variant}>
<Table.RowHeaderCell>{variant}</Table.RowHeaderCell>
<Table.Cell style={{ width: 450 }}>
<Callout.Root variant={variant}>
<Callout.Icon>
<InfoCircledIcon />
</Callout.Icon>
<Callout.Text>
We have detected multiple issues in your application configuration file.
Please read our <Link href="/">Configuration Guide</Link> for more details.
</Callout.Text>
</Callout.Root>
</Table.Cell>
<Table.Cell style={{ width: 450 }}>
<Callout.Root variant={variant} highContrast>
<Callout.Icon>
<InfoCircledIcon />
</Callout.Icon>
<Callout.Text>
We have detected multiple issues in your application configuration file.
Please read our <Link href="/">Configuration Guide</Link> for more details.
</Callout.Text>
</Callout.Root>
</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table.Root>
<Table.Root>
<Table.Body>
{calloutRootPropDefs.size.values.map((size) => (
<Table.Row key={size}>
<Table.RowHeaderCell>size {size}</Table.RowHeaderCell>
<Table.Cell style={{ width: 450 }}>
<Callout.Root size={size}>
<Callout.Icon>
<InfoCircledIcon
width={size === '3' ? 20 : 15}
height={size === '3' ? 20 : 15}
/>
</Callout.Icon>
<Callout.Text>
We have detected multiple issues in your application configuration file.
Please read our <Link href="/">Configuration Guide</Link> for more details.
</Callout.Text>
</Callout.Root>
</Table.Cell>
<Table.Cell style={{ width: 450 }}>
<Callout.Root size={size}>
<Callout.Icon>
<InfoCircledIcon
width={size === '3' ? 20 : 15}
height={size === '3' ? 20 : 15}
/>
</Callout.Icon>
<Callout.Text>There was an error in your configuration.</Callout.Text>
</Callout.Root>
</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table.Root>
<Text as="p" my="5">
<Code>color</Code> can be set per instance:
</Text>
<details>
<summary>
<Text size="2" color="gray">
See colors & variants combinations
</Text>
</summary>
{accentColorsGrouped.map(({ label, values }) => (
<Fragment key={label}>
<Text as="p" weight="bold" mt="6" mb="4">
{label}
</Text>
<Table.Root>
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell />
{calloutRootPropDefs.variant.values.map((variant) => (
<Table.ColumnHeaderCell key={variant}>{variant}</Table.ColumnHeaderCell>
))}
</Table.Row>
</Table.Header>
<Table.Body>
{values.map((color) => (
<Table.Row key={color}>
<Table.RowHeaderCell>{color}</Table.RowHeaderCell>
{calloutRootPropDefs.variant.values.map((variant) => (
<Table.Cell key={variant}>
<Flex direction="column" align="start" gap="2">
<Callout.Root variant={variant} color={color}>
<Callout.Icon>
<InfoCircledIcon />
</Callout.Icon>
<Flex gap="3">
<Callout.Text>
We have detected multiple issues in your application configuration
file. Please read our <Link href="/">Configuration Guide</Link>{' '}
for more details.
</Callout.Text>
<IconButton size="1" variant="soft">
<Cross1Icon />
</IconButton>
</Flex>
</Callout.Root>
<Callout.Root variant={variant} color={color} highContrast>
<Callout.Icon>
<InfoCircledIcon />
</Callout.Icon>
<Callout.Text>
We have detected multiple issues in your application configuration
file. Please read our <Link href="/">Configuration Guide</Link> for
more details.
</Callout.Text>
</Callout.Root>
</Flex>
</Table.Cell>
))}
</Table.Row>
))}
</Table.Body>
</Table.Root>
</Fragment>
))}
</details>
<details>
<summary>
<Text size="2" color="gray">
See layout & size combinations
</Text>
</summary>
<Flex direction="column" my="5" gap="5" style={{ maxWidth: 500 }}>
{calloutRootPropDefs.size.values.map((size) => (
<Fragment key={size}>
<Callout.Root size={size}>
<Callout.Text trim="both">
We have detected multiple issues in your application configuration file. Please
read our <Link href="/">Configuration Guide</Link> for more details.
</Callout.Text>
</Callout.Root>
<Callout.Root size={size}>
<Callout.Text trim="start">
There was an error in your configuration.
</Callout.Text>
<Callout.Text trim="end">
We have detected multiple issues in your application configuration file. Please
read our <Link href="/">Configuration Guide</Link> for more details.
</Callout.Text>
</Callout.Root>
<Callout.Root size={size}>
<Callout.Icon>
<InfoCircledIcon
width={size === '3' ? 20 : 15}
height={size === '3' ? 20 : 15}
/>
</Callout.Icon>
<Callout.Text>
We have detected multiple issues in your application configuration file. Please
read our <Link href="/">Configuration Guide</Link> for more details.
</Callout.Text>
</Callout.Root>
<Callout.Root size={size}>
<Callout.Icon>
<InfoCircledIcon
width={size === '3' ? 20 : 15}
height={size === '3' ? 20 : 15}
/>
</Callout.Icon>
<Callout.Text>There was an error in your configuration.</Callout.Text>
<Callout.Text>
We have detected multiple issues in your application configuration file. Please
read our <Link href="/">Configuration Guide</Link> for more details.
</Callout.Text>
</Callout.Root>
<Separator />
</Fragment>
))}
</Flex>
</details>
</DocsSectionBody>
</DocsSection>
);
}
================================================
FILE: apps/playground/app/(themeable)/sink/card/page.tsx
================================================
import { Avatar, Card, Flex, Grid, Heading, Text, Table } from '@radix-ui/themes';
import { cardPropDefs } from '@radix-ui/themes/props';
import { DocsSection, DocsSectionBody, DocsSectionHeading } from '../docs-section';
export default function CardPage() {
return (
<DocsSection>
<DocsSectionHeading>Card</DocsSectionHeading>
<DocsSectionBody>
<Table.Root>
<Table.Body>
{cardPropDefs.variant.values.map((variant) => (
<Table.Row key={variant}>
<Table.RowHeaderCell>{variant}</Table.RowHeaderCell>
<Table.Cell>
<Flex gap="5">
<Card variant={variant}>
<Text as="p" size="2" weight="bold">
Quick start
</Text>
<Text as="p" color="gray" size="2">
Create a proof of concept app
</Text>
</Card>
<Card variant={variant} asChild>
<a href="#some-page">
<Text as="p" size="2" weight="bold">
Quick start
</Text>
<Text as="p" color="gray" size="2">
Create a proof of concept app
</Text>
</a>
</Card>
</Flex>
</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table.Root>
<Grid columns="4" gap="5" my="7" style={{ marginLeft: 124 }}>
<div>
<Heading>Contacts</Heading>
<Text as="p" color="gray" mb="4">
Here are all your contacts:
</Text>
<Flex direction="column" gap="3">
{Array.from({ length: 4 }, (_, i) => (
<Card key={i} variant="surface" asChild>
<a href="#some-page">
<Flex align="center" gap="2">
<Avatar src="./api/avatar" fallback="D" />
<div>
<Text as="p" size="2" weight="medium">
Poppy Nichols
</Text>
<Text as="p" color="gray" size="1">
poppy.nichols@gmail.com
</Text>
</div>
</Flex>
</a>
</Card>
))}
</Flex>
</div>
<div>
<Heading>Contacts</Heading>
<Text as="p" color="gray" mb="4">
Here are all your contacts:
</Text>
<Flex direction="column" gap="3">
{Array.from({ length: 4 }, (_, i) => (
<Card key={i} variant="classic" asChild>
<a href="#some-page">
<Flex align="center" gap="2">
<Avatar src="./api/avatar" fallback="D" />
<div>
<Text as="p" size="2" weight="medium">
Poppy Nichols
</Text>
<Text as="p" color="gray" size="1">
poppy.nichols@gmail.com
</Text>
</div>
</Flex>
</a>
</Card>
))}
</Flex>
</div>
<div>
<Heading>Contacts</Heading>
<Text as="p" color="gray" mb="4">
Here are all your contacts:
</Text>
<Flex direction="column" gap="5">
{Array.from({ length: 4 }, (_, i) => (
<Card key={i} variant="ghost" asChild>
<a href="#some-page">
<Flex align="center" gap="2">
<Avatar src="./api/avatar" fallback="D" />
<div>
<Text as="p" size="2" weight="medium">
Poppy Nichols
</Text>
<Text as="p" color="gray" size="1">
poppy.nichols@gmail.com
</Text>
</div>
</Flex>
</a>
</Card>
))}
</Flex>
</div>
</Grid>
<Table.Root>
<Table.Body>
{cardPropDefs.size.values.map((size) => (
<Table.Row key={size}>
<Table.RowHeaderCell>size {size}</Table.RowHeaderCell>
<Table.Cell>
<Card size={size} style={{ maxWidth: 'fit-content' }}>
<Text as="p" size={size} weight="bold" mb={size}>
Typography
</Text>
<Text as="p" color="gray" size={size} style={{ maxWidth: '40ch' }}>
The goal of typography is to relate font size, line height, and line width in
a proportional way that maximizes beauty and makes reading easier and more
pleasant.
</Text>
</Card>
</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table.Root>
</DocsSectionBody>
</DocsSection>
);
}
================================================
FILE: apps/playground/app/(themeable)/sink/checkbox/page.tsx
================================================
import { Fragment } from 'react';
import { DocsSection, DocsSectionBody, DocsSectionHeading } from '../docs-section';
import { Checkbox, Grid, Flex, Text, Code, Box, Separator, Table } from '@radix-ui/themes';
import { accentColorsGrouped } from '../_utils';
import { checkboxPropDefs } from '@radix-ui/themes/props';
export default function CheckboxPage() {
return (
<DocsSection>
<DocsSectionHeading>Checkbox</DocsSectionHeading>
<DocsSectionBody>
<Grid columns="2" gap="9">
<div>
<Table.Root>
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell />
<Table.ColumnHeaderCell>not checked</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>checked</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>indeterminate</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>disabled</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>disabled checked</Table.ColumnHeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{checkboxPropDefs.variant.values.map((variant) => (
<Fragment key={variant}>
{[variant, '+ high-contrast'].map((label) => (
<Table.Row key={label}>
<Table.RowHeaderCell>{label}</Table.RowHeaderCell>
<Table.Cell>
<Checkbox variant={variant} highContrast={label === '+ high-contrast'} />
</Table.Cell>
<Table.Cell>
<Checkbox
variant={variant}
highContrast={label === '+ high-contrast'}
defaultChecked
/>
</Table.Cell>
<Table.Cell>
<Checkbox
variant={variant}
highContrast={label === '+ high-contrast'}
defaultChecked="indeterminate"
/>
</Table.Cell>
<Table.Cell>
<Checkbox
variant={variant}
highContrast={label === '+ high-contrast'}
disabled
/>
</Table.Cell>
<Table.Cell>
<Checkbox
variant={variant}
highContrast={label === '+ high-contrast'}
disabled
defaultChecked
/>
</Table.Cell>
</Table.Row>
))}
</Fragment>
))}
</Table.Body>
</Table.Root>
<Table.Root>
<Table.Body>
{checkboxPropDefs.size.values.map((size) => (
<Table.Row key={size}>
<Table.RowHeaderCell>size {size}</Table.RowHeaderCell>
<Table.Cell>
<Flex gap="2">
<Checkbox size={size} />
<Checkbox size={size} defaultChecked />
</Flex>
</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table.Root>
</div>
<div>
<Box py="4">
<Text as="p" size="2">
Alignment
</Text>
</Box>
<Flex direction="column" gap="5" style={{ maxWidth: 320 }}>
<Separator size="4" />
<Text size="1" asChild>
<label>
<Flex gap="2">
<Checkbox size="1" />
<Text>Agree to Terms and Conditions</Text>
</Flex>
</label>
</Text>
<Separator size="4" />
<Text size="2" asChild>
<label>
<Flex gap="2">
<Checkbox size="1" />
<Text>Agree to Terms and Conditions</Text>
</Flex>
</label>
</Text>
<Separator size="4" />
<Text size="2" asChild>
<label>
<Flex gap="2">
<Checkbox size="2" />
<Text>Agree to Terms and Conditions</Text>
</Flex>
</label>
</Text>
<Separator size="4" />
<Text size="3" asChild>
<label>
<Flex gap="2">
<Checkbox size="2" />
<Text>Agree to Terms and Conditions</Text>
</Flex>
</label>
</Text>
<Separator size="4" />
<Text size="3" asChild>
<label>
<Flex gap="2">
<Checkbox size="3" />
<Text>Agree to Terms and Conditions</Text>
</Flex>
</label>
</Text>
<Separator size="4" />
<Text size="4" asChild>
<label>
<Flex gap="2">
<Checkbox size="3" />
<Text>Agree to Terms and Conditions</Text>
</Flex>
</label>
</Text>
<Separator size="4" />
</Flex>
</div>
</Grid>
<Text as="p" my="5">
<Code>color</Code> can be set per instance:
</Text>
<details>
<summary>
<Text size="2" color="gray">
See colors & variants combinations
</Text>
</summary>
{accentColorsGrouped.map(({ label, values }) => (
<Fragment key={label}>
<Text as="p" weight="bold" mt="6" mb="4">
{label}
</Text>
<Table.Root>
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell />
{checkboxPropDefs.variant.values.map((variant) => (
<Table.ColumnHeaderCell key={variant}>{variant}</Table.ColumnHeaderCell>
))}
</Table.Row>
</Table.Header>
<Table.Body>
{values.map((color) => (
<Table.Row key={color}>
<Table.RowHeaderCell>{color}</Table.RowHeaderCell>
{checkboxPropDefs.variant.values.map((variant) => (
<Table.Cell key={variant}>
<Checkbox variant={variant} color={color} defaultChecked />
<Checkbox
variant={variant}
color={color}
highContrast
defaultChecked
ml="2"
/>
</Table.Cell>
))}
</Table.Row>
))}
</Table.Body>
</Table.Root>
</Fragment>
))}
</details>
</DocsSectionBody>
</DocsSection>
);
}
================================================
FILE: apps/playground/app/(themeable)/sink/checkbox-cards/page.tsx
================================================
import { Fragment } from 'react';
import { CheckboxCards, Box, Text, Code, Flex, Table } from '@radix-ui/themes';
import { CodeIcon } from '@radix-ui/react-icons';
import { checkboxCardsRootPropDefs } from '@radix-ui/themes/props';
import { DocsSection, DocsSectionBody, DocsSectionHeading } from '../docs-section';
import { accentColorsGrouped } from '../_utils';
export default function CheckboxCardsPage() {
return (
<DocsSection>
<DocsSectionHeading>CheckboxCards</DocsSectionHeading>
<DocsSectionBody>
<Table.Root>
<Table.Body>
{checkboxCardsRootPropDefs.variant.values.map((variant, index) => (
<Table.Row key={variant}>
<Table.RowHeaderCell>{variant}</Table.RowHeaderCell>
<Table.Cell>
<CheckboxCards.Root defaultValue={[String(index)]} columns="3" variant={variant}>
<CheckboxCards.Item value="0">
<CodeIcon />
<Text truncate>Node.js</Text>
</CheckboxCards.Item>
<CheckboxCards.Item value="1" disabled>
Ruby
</CheckboxCards.Item>
<CheckboxCards.Item value="2">Go</CheckboxCards.Item>
</CheckboxCards.Root>
</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table.Root>
<Box mb="7" />
<Table.Root>
<Table.Body>
{checkboxCardsRootPropDefs.size.values.map((size, index) => (
<Table.Row key={size}>
<Table.RowHeaderCell>size {size}</Table.RowHeaderCell>
<Table.Cell>
<CheckboxCards.Root
defaultValue={[String(index)]}
size={size}
columns="3"
style={{ width: 400 + Number(size) * 100 }}
>
<CheckboxCards.Item value="0">Node.js</CheckboxCards.Item>
<CheckboxCards.Item value="1" disabled>
Ruby
</CheckboxCards.Item>
<CheckboxCards.Item value="2">Go</CheckboxCards.Item>
</CheckboxCards.Root>
</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table.Root>
<Text as="p" my="5">
<Code>color</Code> can be set per instance:
</Text>
<details>
<summary>
<Text size="2" color="gray">
See colors & variants combinations
</Text>
</summary>
{accentColorsGrouped.map(({ label, values }) => (
<Fragment key={label}>
<Text as="p" weight="bold" mt="6" mb="4">
{label}
</Text>
<Table.Root>
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell />
{checkboxCardsRootPropDefs.variant.values.map((variant) => (
<Table.ColumnHeaderCell key={variant}>{variant}</Table.ColumnHeaderCell>
))}
</Table.Row>
</Table.Header>
<Table.Body>
{values.map((color) => (
<Table.Row key={color}>
<Table.RowHeaderCell>{color}</Table.RowHeaderCell>
{checkboxCardsRootPropDefs.variant.values.map((variant) => (
<Table.Cell key={variant}>
<Flex direction="column" gap="2">
<CheckboxCards.Root
defaultValue={['0']}
size="1"
gap="2"
columns="3"
variant={variant}
color={color}
style={{ width: 400 }}
>
<CheckboxCards.Item value="0">Node.js</CheckboxCards.Item>
<CheckboxCards.Item value="1" disabled>
Ruby
</CheckboxCards.Item>
<CheckboxCards.Item value="2">Go</CheckboxCards.Item>
</CheckboxCards.Root>
<CheckboxCards.Root
defaultValue={['0']}
size="1"
gap="2"
columns="3"
variant={variant}
color={color}
highContrast
style={{ width: 400 }}
>
<CheckboxCards.Item value="0">Node.js</CheckboxCards.Item>
<CheckboxCards.Item value="1" disabled>
Ruby
</CheckboxCards.Item>
<CheckboxCards.Item value="2">Go</CheckboxCards.Item>
</CheckboxCards.Root>
</Flex>
</Table.Cell>
))}
</Table.Row>
))}
</Table.Body>
</Table.Root>
</Fragment>
))}
</details>
</DocsSectionBody>
</DocsSection>
);
}
================================================
FILE: apps/playground/app/(themeable)/sink/checkbox-group/page.tsx
================================================
import { Fragment } from 'react';
import { CheckboxGroup, Grid, Box, Text, Code, Flex, Separator, Table } from '@radix-ui/themes';
import { checkboxGroupRootPropDefs } from '@radix-ui/themes/props';
import { DocsSection, DocsSectionBody, DocsSectionHeading } from '../docs-section';
import { accentColorsGrouped } from '../_utils';
export default function CheckboxGroupPage() {
return (
<DocsSection>
<DocsSectionHeading>CheckboxGroup</DocsSectionHeading>
<DocsSectionBody>
<Grid columns="2" gap="9">
<div>
<Table.Root>
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell />
<Table.ColumnHeaderCell>not checked</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>checked</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>disabled</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>disabled checked</Table.ColumnHeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{checkboxGroupRootPropDefs.variant.values.map((variant) => (
<Fragment key={variant}>
{[variant, '+ high-contrast'].map((label) => (
<Table.Row key={label}>
<Table.RowHeaderCell>{label}</Table.RowHeaderCell>
<Table.Cell>
<CheckboxGroup.Root
variant={variant}
highContrast={label === '+ high-contrast'}
>
<CheckboxGroup.Item value="value" />
</CheckboxGroup.Root>
</Table.Cell>
<Table.Cell>
<CheckboxGroup.Root
variant={variant}
defaultValue={['value']}
highContrast={label === '+ high-contrast'}
>
<CheckboxGroup.Item value="value" />
</CheckboxGroup.Root>
</Table.Cell>
<Table.Cell>
<CheckboxGroup.Root
variant={variant}
highContrast={label === '+ high-contrast'}
>
<CheckboxGroup.Item value="value" disabled />
</CheckboxGroup.Root>
</Table.Cell>
<Table.Cell>
<CheckboxGroup.Root
variant={variant}
highContrast={label === '+ high-contrast'}
disabled
defaultValue={['value']}
>
<CheckboxGroup.Item value="value" />
</CheckboxGroup.Root>
</Table.Cell>
</Table.Row>
))}
</Fragment>
))}
</Table.Body>
</Table.Root>
<Table.Root>
<Table.Body>
{checkboxGroupRootPropDefs.size.values.map((size) => (
<Table.Row key={size}>
<Table.RowHeaderCell>size {size}</Table.RowHeaderCell>
<Table.Cell style={{ width: '100%' }}>
<CheckboxGroup.Root size={size} defaultValue={['red']}>
<CheckboxGroup.Item value="red">Red</CheckboxGroup.Item>
<CheckboxGroup.Item value="green">Green</CheckboxGroup.Item>
<CheckboxGroup.Item value="blue">Blue</CheckboxGroup.Item>
<CheckboxGroup.Item value="violet">Violet</CheckboxGroup.Item>
</CheckboxGroup.Root>
</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table.Root>
</div>
<div>
<Box py="4">
<Text as="p" size="2">
Alignment
</Text>
</Box>
<Flex direction="column" gap="5" style={{ maxWidth: 320 }}>
<Separator size="4" />
<CheckboxGroup.Root defaultValue={['1']} size="1">
<Flex direction="column" gap="1">
<Text as="label" size="1">
<Flex gap="2">
<CheckboxGroup.Item value="1" />
<Text>Agree to Terms and Conditions</Text>
</Flex>
</Text>
<Text as="label" size="1">
<Flex gap="2">
<CheckboxGroup.Item value="2" />
<Text>Agree to Privacy Policy</Text>
</Flex>
</Text>
</Flex>
</CheckboxGroup.Root>
<Separator size="4" />
<CheckboxGroup.Root defaultValue={['1']} size="1">
<Flex direction="column" gap="1">
<Text as="label" size="2">
<Flex gap="2">
<CheckboxGroup.Item value="1" />
<Text>Agree to Terms and Conditions</Text>
</Flex>
</Text>
<Text as="label" size="2">
<Flex gap="2">
<CheckboxGroup.Item value="2" />
<Text>Agree to Privacy Policy</Text>
</Flex>
</Text>
</Flex>
</CheckboxGroup.Root>
<Separator size="4" />
<CheckboxGroup.Root defaultValue={['1']} size="2">
<Flex direction="column" gap="1">
<Text as="label" size="2">
<Flex gap="2">
<CheckboxGroup.Item value="1" />
<Text>Agree to Terms and Conditions</Text>
</Flex>
</Text>
<Text as="label" size="2">
<Flex gap="2">
<CheckboxGroup.Item value="2" />
<Text>Agree to Privacy Policy</Text>
</Flex>
</Text>
</Flex>
</CheckboxGroup.Root>
<Separator size="4" />
<CheckboxGroup.Root defaultValue={['1']} size="2">
<Flex direction="column" gap="1">
<Text as="label" size="3">
<Flex gap="2">
<CheckboxGroup.Item value="1" />
<Text>Agree to Terms and Conditions</Text>
</Flex>
</Text>
<Text as="label" size="3">
<Flex gap="2">
<CheckboxGroup.Item value="2" />
<Text>Agree to Privacy Policy</Text>
</Flex>
</Text>
</Flex>
</CheckboxGroup.Root>
<Separator size="4" />
<CheckboxGroup.Root defaultValue={['1']} size="3">
<Flex direction="column" gap="1">
<Text as="label" size="3">
<Flex gap="2">
<CheckboxGroup.Item value="1" />
<Text>Agree to Terms and Conditions</Text>
</Flex>
</Text>
<Text as="label" size="3">
<Flex gap="2">
<CheckboxGroup.Item value="2" />
<Text>Agree to Privacy Policy</Text>
</Flex>
</Text>
</Flex>
</CheckboxGroup.Root>
<Separator size="4" />
<CheckboxGroup.Root defaultValue={['1']} size="3">
<Flex direction="column" gap="1">
<Text as="label" size="4">
<Flex gap="2">
<CheckboxGroup.Item value="1" />
<Text>Agree to Terms and Conditions</Text>
</Flex>
</Text>
<Text as="label" size="4">
<Flex gap="2">
<CheckboxGroup.Item value="2" />
<Text>Agree to Privacy Policy</Text>
</Flex>
</Text>
</Flex>
</CheckboxGroup.Root>
<Separator size="4" />
</Flex>
</div>
</Grid>
<Text as="p" my="5">
<Code>color</Code> can be set per instance:
</Text>
<details>
<summary>
<Text size="2" color="gray">
See colors & variants combinations
</Text>
</summary>
{accentColorsGrouped.map(({ label, values }) => (
<Fragment key={label}>
<Text as="p" weight="bold" mt="6" mb="4">
{label}
</Text>
<Table.Root>
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell />
{checkboxGroupRootPropDefs.variant.values.map((variant) => (
<Table.ColumnHeaderCell key={variant}>{variant}</Table.ColumnHeaderCell>
))}
</Table.Row>
</Table.Header>
<Table.Body>
{values.map((color) => (
<Table.Row key={color}>
<Table.RowHeaderCell>{color}</Table.RowHeaderCell>
{checkboxGroupRootPropDefs.variant.values.map((variant) => (
<Table.Cell key={variant}>
<Flex gap="2">
<CheckboxGroup.Root
variant={variant}
color={color}
defaultValue={['value']}
>
<CheckboxGroup.Item value="value" />
</CheckboxGroup.Root>
<CheckboxGroup.Root
variant={variant}
color={color}
defaultValue={['value']}
highContrast
>
<CheckboxGroup.Item value="value" />
</CheckboxGroup.Root>
</Flex>
</Table.Cell>
))}
</Table.Row>
))}
</Table.Body>
</Table.Root>
</Fragment>
))}
</details>
<Separator size="3" my="5" />
</DocsSectionBody>
</DocsSection>
);
}
================================================
FILE: apps/playground/app/(themeable)/sink/code/page.tsx
================================================
import { Fragment } from 'react';
import { Code, Text, Grid, Flex, Strong, Em, Kbd, Quote, Link, Table } from '@radix-ui/themes';
import { codePropDefs } from '@radix-ui/themes/props';
import { DocsSection, DocsSectionBody, DocsSectionHeading } from '../docs-section';
import { accentColorsGrouped } from '../_utils';
export default function CodePage() {
return (
<DocsSection>
<DocsSectionHeading>Code</DocsSectionHeading>
<DocsSectionBody>
<Table.Root>
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell />
<Table.ColumnHeaderCell>color</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>+ high-contrast</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>gray</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>+ high-contrast</Table.ColumnHeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{codePropDefs.variant.values.map((variant) => (
<Table.Row key={variant}>
<Table.RowHeaderCell>{variant}</Table.RowHeaderCell>
<Table.Cell>
<Code variant={variant}>console.log()</Code>
</Table.Cell>
<Table.Cell>
<Code variant={variant} highContrast>
console.log()
</Code>
</Table.Cell>
<Table.Cell>
<Code variant={variant} color="gray">
console.log()
</Code>
</Table.Cell>
<Table.Cell>
<Code variant={variant} color="gray" highContrast>
console.log()
</Code>
</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table.Root>
<Grid columns="400px 400px" gap="5" my="7">
{codePropDefs.variant.values.map((variant) => (
<Text as="p" size="3" key={variant}>
The CSS rule <Code variant={variant}>antialiased</Code> has been applied to all
fonts.google.com pages where fonts are rendered. This results in browsers using the{' '}
<Strong>greyscale antialiasing method</Strong> rather than default{' '}
<Em>subpixel rendering</Em> of fonts. Press <Kbd>⌘ Q</Kbd> to quit.{' '}
<Quote>
I believe this was probably introduced to get around inconsistencies in rendering
between browsers
</Quote>
, particular between Chrome and Safari on MacOS.
</Text>
))}
</Grid>
<Grid columns="400px 400px" gap="5" my="7">
{codePropDefs.variant.values.map((variant) => (
<Text as="p" size="3" key={variant}>
The{' '}
<Link href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code">
<Code variant={variant}>
{'<'}code{'>'}
</Code>
</Link>{' '}
HTML element displays its contents styled in a fashion intended to indicate that the
text is a short fragment of computer code.
</Text>
))}
</Grid>
<Flex direction="column" gap="4" mt="7">
{codePropDefs.size.values
.slice()
.reverse()
.map((size) => (
<Code key={size} size={size} variant="ghost">
The quick brown fox jumped{Number(size) < 9 && ' over the lazy dog'}
</Code>
))}
</Flex>
<Text as="p" my="5">
<Code>color</Code> can be set per instance:
</Text>
<details>
<summary>
<Text size="2" color="gray">
See colors & variants combinations
</Text>
</summary>
{accentColorsGrouped.map(({ label, values }) => (
<Fragment key={label}>
<Text as="p" weight="bold" mt="6" mb="4">
{label}
</Text>
<Table.Root>
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell />
{codePropDefs.variant.values.map((variant) => (
<Table.ColumnHeaderCell key={variant}>{variant}</Table.ColumnHeaderCell>
))}
</Table.Row>
</Table.Header>
<Table.Body>
{values.map((color) => (
<Table.Row key={color}>
<Table.RowHeaderCell>{color}</Table.RowHeaderCell>
{codePropDefs.variant.values.map((variant) => (
<Table.Cell key={variant}>
<Code variant={variant} color={color}>
console.log()
</Code>
</Table.Cell>
))}
</Table.Row>
))}
</Table.Body>
</Table.Root>
</Fragment>
))}
</details>
</DocsSectionBody>
</DocsSection>
);
}
================================================
FILE: apps/playground/app/(themeable)/sink/container/page.tsx
================================================
import { Container, Box, Text, Code } from '@radix-ui/themes';
import { DocsSection, DocsSectionBody, DocsSectionHeading } from '../docs-section';
export default function ContainerPage() {
return (
<DocsSection>
<DocsSectionHeading>Container</DocsSectionHeading>
<DocsSectionBody>
<Text as="p" my="5">
<Code>size</Code> can be set on nested <Code>Container</Code> instances:
</Text>
<Container size="4">
<Box
style={{
backgroundColor: 'var(--color-panel-solid)',
borderRadius: 'var(--radius-2)',
boxShadow: 'inset 0 0 0 1px var(--gray-a4)',
}}
p="2"
>
<Text>This should be size 4</Text>
</Box>
<Container size="1">
<Box
style={{
backgroundColor: 'var(--color-panel-solid)',
borderRadius: 'var(--radius-2)',
boxShadow: 'inset 0 0 0 1px var(--gray-a4)',
}}
p="2"
>
<Text>This should be size 1</Text>
</Box>
</Container>
</Container>
</DocsSectionBody>
</DocsSection>
);
}
================================================
FILE: apps/playground/app/(themeable)/sink/context-menu/page.tsx
================================================
import { ContextMenu, Table } from '@radix-ui/themes';
import { contextMenuContentPropDefs } from '@radix-ui/themes/props';
import { DocsSection, DocsSectionBody, DocsSectionHeading } from '../docs-section';
import { ContextMenuContentDemo, RightClickArea } from '../_components';
export default function ContextMenuPage() {
return (
<DocsSection>
<DocsSectionHeading>ContextMenu</DocsSectionHeading>
<DocsSectionBody>
<Table.Root>
<Table.Header>
<Table.Row>
{contextMenuContentPropDefs.size.values.map((size) => (
<Table.ColumnHeaderCell key={size}>size {size}</Table.ColumnHeaderCell>
))}
</Table.Row>
</Table.Header>
<Table.Body>
{contextMenuContentPropDefs.variant.values.map((variant) => (
<Table.Row key={variant}>
{contextMenuContentPropDefs.size.values.map((size) => (
<Table.Cell key={size}>
<ContextMenu.Root>
<ContextMenu.Trigger>
<RightClickArea size={size} />
</ContextMenu.Trigger>
<ContextMenuContentDemo size={size} variant={variant} />
</ContextMenu.Root>
</Table.Cell>
))}
</Table.Row>
))}
</Table.Body>
</Table.Root>
</DocsSectionBody>
</DocsSection>
);
}
================================================
FILE: apps/playground/app/(themeable)/sink/cursors/page.tsx
================================================
import { Button, Card, DropdownMenu, Flex, Link, Text } from '@radix-ui/themes';
import { DocsSection, DocsSectionBody, DocsSectionHeading } from '../docs-section';
import { PointerCursorsCheckbox } from '../pointer-cursors-checkbox';
import { DropdownMenuContentDemo } from '../_components';
export default function CursorsPage() {
return (
<DocsSection>
<DocsSectionHeading>Cursors</DocsSectionHeading>
<DocsSectionBody>
<Flex align="center" gap="5" wrap="wrap" my="5">
<Card asChild>
<button>
<Text as="p" size="2" weight="bold" trim="start">
Button
</Text>
<Text as="p" color="gray" size="2" trim="end">
That looks like card
</Text>
</button>
</Card>
<Card asChild>
<a href="#Cursors">
<Text as="p" size="2" weight="bold" trim="start">
Link
</Text>
<Text as="p" color="gray" size="2" trim="end">
That looks like card
</Text>
</a>
</Card>
<DropdownMenu.Root>
<DropdownMenu.Trigger>
<Button>
Dropdown Menu <DropdownMenu.TriggerIcon />
</Button>
</DropdownMenu.Trigger>
<DropdownMenuContentDemo />
</DropdownMenu.Root>
<Button>Button</Button>
<Button asChild>
<a href="#Cursors">Link</a>
</Button>
<Link href="#Cursors">Link</Link>
<Link asChild>
<button>Button</button>
</Link>
</Flex>
<PointerCursorsCheckbox />
</DocsSectionBody>
</DocsSection>
);
}
================================================
FILE: apps/playground/app/(themeable)/sink/data-list/page.tsx
================================================
import { Box, Button, Code, DataList, Flex, Link, Table, Tabs, Text } from '@radix-ui/themes';
import { dataListLabelPropDefs, dataListRootPropDefs } from '@radix-ui/themes/props';
import { DocsSection, DocsSectionBody, DocsSectionHeading } from '../docs-section';
import { upperFirst } from '../_utils';
export default function DataListPage() {
return (
<DocsSection>
<DocsSectionHeading>DataList</DocsSectionHeading>
<DocsSectionBody>
<Flex gap="4" align="center">
<Tabs.Root defaultValue="specimen">
<Tabs.List size="2">
<Tabs.Trigger value="specimen">Specimen</Tabs.Trigger>
<Tabs.Trigger value="all-orientations">All orientations</Tabs.Trigger>
<Tabs.Trigger value="all-sizes">All sizes</Tabs.Trigger>
</Tabs.List>
<Tabs.Content value="specimen">
<Box my="6" style={{ maxWidth: '688px' }}>
<DataList.Root>
<DataList.Item>
<DataList.Label width="200px">Name</DataList.Label>
<DataList.Value>Susan Kare</DataList.Value>
</DataList.Item>
<DataList.Item>
<DataList.Label>Email</DataList.Label>
<DataList.Value>susan.kare@apple.com</DataList.Value>
</DataList.Item>
<DataList.Item>
<DataList.Label>Status</DataList.Label>
<DataList.Value>
<Button color="green" size="1">
Active
</Button>
</DataList.Value>
</DataList.Item>
<DataList.Item>
<DataList.Label>Bio</DataList.Label>
<DataList.Value>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac nisl et
libero ultricies viverra quis vitae quam. Proin a feugiat metus.
</DataList.Value>
</DataList.Item>
<DataList.Item>
<DataList.Label>Organization</DataList.Label>
<DataList.Value>
<Link href="https://workos.com">WorkOS</Link>
</DataList.Value>
</DataList.Item>
</DataList.Root>
</Box>
</Tabs.Content>
<Tabs.Content value="all-orientations">
<Box my="6">
<Table.Root>
<Table.Body>
{dataListRootPropDefs.orientation.values.map((orientation) => (
<Table.Row key={orientation}>
<Table.RowHeaderCell>{upperFirst(orientation)}</Table.RowHeaderCell>
<Table.Cell style={{ textAlign: 'left' }}>
<DataList.Root orientation={orientation} my="3">
<DataList.Item>
<DataList.Label>Name</DataList.Label>
<DataList.Value>Susan Kare</DataList.Value>
</DataList.Item>
<DataList.Item>
<DataList.Label>Email</DataList.Label>
<DataList.Value>susan.kare@apple.com</DataList.Value>
</DataList.Item>
</DataList.Root>
</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table.Root>
</Box>
</Tabs.Content>
<Tabs.Content value="all-sizes">
<Box my="6">
<Table.Root>
<Table.Body>
{dataListRootPropDefs.size.values.map((size) => (
<Table.Row key={size}>
<Table.RowHeaderCell>{`Size ${size}`}</Table.RowHeaderCell>
<Table.Cell style={{ textAlign: 'left' }}>
<DataList.Root size={size} my="3">
<DataList.Item>
<DataList.Label>Name</DataList.Label>
<DataList.Value>Susan Kare</DataList.Value>
</DataList.Item>
<DataList.Item>
<DataList.Label>Email</DataList.Label>
<DataList.Value>susan.kare@apple.com</DataList.Value>
</DataList.Item>
</DataList.Root>
</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table.Root>
</Box>
</Tabs.Content>
</Tabs.Root>
</Flex>
<Text as="p" my="5">
<Code>color</Code> can be set per <Code>DataListLabel</Code> instance:
</Text>
<details>
<summary>
<Text size="2" color="gray">
See color combinations
</Text>
</summary>
<Table.Root>
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell />
<Table.ColumnHeaderCell>Color</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>High Contrast</Table.ColumnHeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{dataListLabelPropDefs.color.values.map((color) => (
<Table.Row key={color}>
<Table.RowHeaderCell style={{ whiteSpace: 'nowrap' }}>
{color}
</Table.RowHeaderCell>
<Table.Cell>
<DataList.Root my="3">
<DataList.Item>
<DataList.Label color={color}>Name</DataList.Label>
<DataList.Value>Susan Kare</DataList.Value>
</DataList.Item>
<DataList.Item>
<DataList.Label color={color}>Email</DataList.Label>
<DataList.Value>susan.kare@apple.com</DataList.Value>
</DataList.Item>
</DataList.Root>
</Table.Cell>
<Table.Cell>
<DataList.Root my="3" ml="6">
<DataList.Item>
<DataList.Label highContrast color={color}>
Name
</DataList.Label>
<DataList.Value>Susan Kare</DataList.Value>
</DataList.Item>
<DataList.Item>
<DataList.Label highContrast color={color}>
Email
</DataList.Label>
<DataList.Value>susan.kare@apple.com</DataList.Value>
</DataList.Item>
</DataList.Root>
</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table.Root>
</details>
<Text as="p" my="5">
<Code>width</Code> can be set per <Code>DataListLabel</Code> instance:
</Text>
<details>
<summary>
<Text size="2" color="gray">
See width examples
</Text>
</summary>
<Table.Root>
<Table.Body>
{['64px', '80px', '128px'].map((width) => {
return (
<Table.Row key={width}>
<Table.RowHeaderCell>{`${width}`}</Table.RowHeaderCell>
<Table.Cell>
<DataList.Root my="3">
<DataList.Item>
<DataList.Label width={width}>Name</DataList.Label>
<DataList.Value>Susan Kare</DataList.Value>
</DataList.Item>
<DataList.Item>
<DataList.Label width={width}>Email</DataList.Label>
<DataList.Value>susan.kare@apple.com</DataList.Value>
</DataList.Item>
</DataList.Root>
</Table.Cell>
</Table.Row>
);
})}
</Table.Body>
</Table.Root>
</details>
</DocsSectionBody>
</DocsSection>
);
}
================================================
FILE: apps/playground/app/(themeable)/sink/dialog/page.tsx
================================================
import { Button, Dialog, Flex } from '@radix-ui/themes';
import { DocsSection, DocsSectionBody, DocsSectionHeading } from '../docs-section';
import { InfoCircledIcon, Share2Icon } from '@radix-ui/react-icons';
export default function DialogPage() {
return (
<DocsSection>
<DocsSectionHeading>Dialog</DocsSectionHeading>
<DocsSectionBody>
<Dialog.Root>
<Dialog.Trigger>
<Button variant="solid">Open</Button>
</Dialog.Trigger>
<Dialog.Content asChild maxWidth="450px">
<Flex direction="column" gap="3">
<InfoCircledIcon style={{ position: 'absolute', top: '24px', right: '20px' }} />
<Dialog.Title>Share resource</Dialog.Title>
<Dialog.Description>
Jan Tschichold was a German calligrapher, typographer and book designer. He played a
significant role in the development of graphic design in the 20th century.
</Dialog.Description>
<Flex gap="3" mt="4" justify="end">
<Dialog.Close>
<Button variant="soft" color="gray">
Cancel
</Button>
</Dialog.Close>
<Dialog.Close>
<Button variant="solid">
Share <Share2Icon />
</Button>
</Dialog.Close>
</Flex>
</Flex>
</Dialog.Content>
</Dialog.Root>
</DocsSectionBody>
</DocsSection>
);
}
================================================
FILE: apps/playground/app/(themeable)/sink/docs-section.tsx
================================================
import { Box, Flex, Heading } from '@radix-ui/themes';
export function DocsSectionHeading({ children }: { children: React.ReactNode }) {
return (
<Heading size="6" as="h2">
{children}
</Heading>
);
}
export function DocsSection({ children }: { children: React.ReactNode }) {
return (
<Flex asChild direction="column" gap="4">
<section>{children}</section>
</Flex>
);
}
export function DocsSectionBody({ children }: { children: React.ReactNode }) {
return <Box>{children}</Box>;
}
================================================
FILE: apps/playground/app/(themeable)/sink/dropdown-menu/page.tsx
================================================
'use client';
import { Fragment } from 'react';
import { DropdownMenu, Button, IconButton, Text, Code, Table } from '@radix-ui/themes';
import { DotsHorizontalIcon } from '@radix-ui/react-icons';
import { dropdownMenuContentPropDefs } from '@radix-ui/themes/props';
import { DocsSection, DocsSectionBody, DocsSectionHeading } from '../docs-section';
import { DropdownMenuContentDemo } from '../_components';
import { accentColorsGrouped } from '../_utils';
export default function DropdownMenuPage() {
return (
<DocsSection>
<DocsSectionHeading>DropdownMenu</DocsSectionHeading>
<DocsSectionBody>
<Table.Root>
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell />
{dropdownMenuContentPropDefs.size.values.map((size) => (
<Table.ColumnHeaderCell key={size}>size {size}</Table.ColumnHeaderCell>
))}
<Table.ColumnHeaderCell>+ high-contrast</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>gray</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>+ high-contrast</Table.ColumnHeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{dropdownMenuContentPropDefs.variant.values.map((variant) => (
<Table.Row key={variant}>
<Table.RowHeaderCell>{variant}</Table.RowHeaderCell>
{dropdownMenuContentPropDefs.size.values.map((size) => (
<Table.Cell key={size}>
<DropdownMenu.Root>
<DropdownMenu.Trigger>
<Button size={size} variant="soft" color="gray">
More <DropdownMenu.TriggerIcon />
</Button>
</DropdownMenu.Trigger>
<DropdownMenuContentDemo size={size} variant={variant} />
</DropdownMenu.Root>
</Table.Cell>
))}
<Table.Cell>
<DropdownMenu.Root>
<DropdownMenu.Trigger>
<Button variant="soft" color="gray">
More <DropdownMenu.TriggerIcon />
</Button>
</DropdownMenu.Trigger>
<DropdownMenuContentDemo variant={variant} highContrast />
</DropdownMenu.Root>
</Table.Cell>
<Table.Cell>
<DropdownMenu.Root>
<DropdownMenu.Trigger>
<Button variant="soft" color="gray">
More <DropdownMenu.TriggerIcon />
</Button>
</DropdownMenu.Trigger>
<DropdownMenuContentDemo variant={variant} color="gray" />
</DropdownMenu.Root>
</Table.Cell>
<Table.Cell>
<DropdownMenu.Root>
<DropdownMenu.Trigger>
<Button variant="soft" color="gray">
More <DropdownMenu.TriggerIcon />
</Button>
</DropdownMenu.Trigger>
<DropdownMenuContentDemo variant={variant} color="gray" highContrast />
</DropdownMenu.Root>
</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table.Root>
<Text as="p" my="5">
<Code>color</Code> can be set per instance:
</Text>
<details>
<summary>
<Text size="2" color="gray">
See colors & variants combinations
</Text>
</summary>
{accentColorsGrouped.map(({ label, values }) => (
<Fragment key={label}>
<Text as="p" weight="bold" mt="6" mb="4">
{label}
</Text>
<Table.Root>
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell />
{dropdownMenuContentPropDefs.variant.values.map((variant) => (
<Table.ColumnHeaderCell key={variant}>{variant}</Table.ColumnHeaderCell>
))}
</Table.Row>
</Table.Header>
<Table.Body>
{values.map((color) => (
<Table.Row key={color}>
<Table.RowHeaderCell>{color}</Table.RowHeaderCell>
{dropdownMenuContentPropDefs.variant.values.map((variant) => (
<Table.Cell key={variant}>
<DropdownMenu.Root>
<DropdownMenu.Trigger>
<IconButton variant="soft" color="gray">
<DotsHorizontalIcon />
</IconButton>
</DropdownMenu.Trigger>
<DropdownMenuContentDemo variant={variant} color={color} />
</DropdownMenu.Root>
<DropdownMenu.Root>
<DropdownMenu.Trigger>
<IconButton variant="soft" color="gray" ml="2">
<DotsHorizontalIcon />
</IconButton>
</DropdownMenu.Trigger>
<DropdownMenuContentDemo variant={variant} color={color} highContrast />
</DropdownMenu.Root>
</Table.Cell>
))}
</Table.Row>
))}
</Table.Body>
</Table.Root>
</Fragment>
))}
</details>
</DocsSectionBody>
</DocsSection>
);
}
================================================
FILE: apps/playground/app/(themeable)/sink/grid/page.tsx
================================================
import { Box, Grid } from '@radix-ui/themes';
import { DocsSection, DocsSectionBody, DocsSectionHeading } from '../docs-section';
export default function GridPage() {
return (
<DocsSection>
<DocsSectionHeading>Grid</DocsSectionHeading>
<DocsSectionBody>
{/* Ensure breakpoints work */}
<Grid columns={{ initial: '1', md: '2', lg: '3' }} gap="3" mb="8">
<Box style={{ height: 256 }}>
{/* Ensure default value works */}
<Grid gap="3" style={{ height: 256 }}>
{Array.from(Array(4).keys()).map((i) => (
<Box key={i} style={{ height: 55, background: 'var(--accent-9)' }} />
))}
</Grid>
</Box>
<Box style={{ height: 256 }}>
{/* Ensure plain strings works */}
<Grid columns="5" gap="3" height="100%">
{Array.from(Array(5).keys()).map((i) => (
<Box key={i} style={{ background: 'var(--accent-9)' }} />
))}
</Grid>
</Box>
<Box style={{ height: 256 }}>
{/* Ensure initial is equal to plain strings */}
<Grid columns={{ initial: '5' }} gap="3" height="100%">
{Array.from(Array(20).keys()).map((i) => (
<Box key={i} style={{ background: 'var(--accent-9)' }} />
))}
</Grid>
</Box>
</Grid>
<Grid gap="3" columns="4">
{/* Ensure arbitrary values work */}
<Grid gap="3" columns="1fr 1fr 2fr">
{Array.from(Array(3).keys()).map((i) => (
<Box key={i} style={{ height: 55, background: 'var(--accent-9)' }} />
))}
</Grid>
{/* Ensure arbitrary values work with theme values */}
<Grid gap="3" columns={{ xs: '3', md: '1fr 1fr 2fr' }}>
{Array.from(Array(3).keys()).map((i) => (
<Box key={i} style={{ height: 55, background: 'var(--accent-9)' }} />
))}
</Grid>
{/* Ensure CSS source order is correct for arbitrary and theme values */}
<Grid gap="3" columns={{ xs: '3', md: '1fr 1fr 2fr', lg: '3' }}>
{Array.from(Array(3).keys()).map((i) => (
<Box key={i} style={{ height: 55, background: 'var(--accent-9)' }} />
))}
</Grid>
{/* Ensure mapped values work*/}
<Grid gap="1" columns={{ xs: '20' }}>
{Array.from(Array(20).keys()).map((i) => (
<Box key={i} style={{ height: 55, background: 'var(--accent-9)' }} />
))}
</Grid>
</Grid>
</DocsSectionBody>
</DocsSection>
);
}
================================================
FILE: apps/playground/app/(themeable)/sink/heading/page.tsx
================================================
import { Flex, Heading, Text } from '@radix-ui/themes';
import { headingPropDefs } from '@radix-ui/themes/props';
import { DocsSection, DocsSectionBody, DocsSectionHeading } from '../docs-section';
import { upperFirst } from '../_utils';
export default function HeadingPage() {
return (
<DocsSection>
<DocsSectionHeading>Heading</DocsSectionHeading>
<DocsSectionBody>
<Flex direction="column" gap="4">
{headingPropDefs.size.values
.slice()
.reverse()
.map((size) => (
<Heading key={size} size={size}>
The quick brown fox jumped{Number(size) < 9 && ' over the lazy dog'}
</Heading>
))}
<Flex direction="column" gap="6" mt="5">
<Heading size="9" style={{ width: '50%' }}>
Principles of the Typographic Craft
</Heading>
<Heading size="8" style={{ width: '40%' }}>
Principles of the Typographic Craft
</Heading>
<Heading size="7" style={{ width: '30%' }}>
Principles of the Typographic Craft
</Heading>
<Heading size="6" style={{ width: '25%' }}>
Principles of the Typographic Craft
</Heading>
<Heading size="5" style={{ width: '20%' }}>
Principles of the Typographic Craft
</Heading>
<Heading size="4" style={{ width: '15%' }}>
Principles of the Typographic Craft
</Heading>
<Heading size="3" style={{ width: '15%' }}>
Principles of the Typographic Craft
</Heading>
<Heading size="2" style={{ width: '15%' }}>
Principles of the Typographic Craft
</Heading>
<Heading size="1" style={{ width: '10%' }}>
Principles of the Typographic Craft
</Heading>
</Flex>
</Flex>
<Flex direction="column" gap="5" mt="8">
<Flex gap="5">
{(['red', 'yellow', 'green', 'gray'] as const).map((color) => (
<Flex key={color} direction="column" gap="1">
<Heading color={color}>{upperFirst(color)}</Heading>
<Heading color={color} highContrast>
{upperFirst(color)}
</Heading>
</Flex>
))}
</Flex>
<Heading color="red" highContrast>
This is some red text in high-contrast and this <Text color="blue">word</Text> should be
blue.
</Heading>
<Heading color="red">
This is some red text and this <Text highContrast>word</Text> should be in
high-contrast.
</Heading>
</Flex>
</DocsSectionBody>
</DocsSection>
);
}
================================================
FILE: apps/playground/app/(themeable)/sink/hide-cursor.tsx
================================================
'use client';
import * as React from 'react';
import { useIdle } from 'react-use';
function hideCursor() {
document.body.classList.add('hide-cursor');
}
function showCursor() {
document.body.classList.remove('hide-cursor');
}
export function HideCursor() {
const isIdle = useIdle(1000);
React.useEffect(() => {
if (isIdle) {
hideCursor();
} else {
showCursor();
}
}, [isIdle]);
return null;
}
================================================
FILE: apps/playground/app/(themeable)/sink/hover-card/page.tsx
================================================
import { HoverCard, Link, Text } from '@radix-ui/themes';
import { DocsSection, DocsSectionBody, DocsSectionHeading } from '../docs-section';
export default function HoverCardPage() {
return (
<DocsSection>
<DocsSectionHeading>HoverCard</DocsSectionHeading>
<DocsSectionBody>
<HoverCard.Root>
<HoverCard.Trigger>
<Link>A fancy link</Link>
</HoverCard.Trigger>
<HoverCard.Content width="200px">
<Text as="p" size="2">
Jan Tschichold was a German calligrapher, typographer and book designer. He played a
significant role in the development of graphic design in the 20th century.
</Text>
</HoverCard.Content>
</HoverCard.Root>
</DocsSectionBody>
</DocsSection>
);
}
================================================
FILE: apps/playground/app/(themeable)/sink/icon-button/page.tsx
================================================
import { Fragment } from 'react';
import { Share2Icon } from '@radix-ui/react-icons';
import { IconButton, Box, Text, Code, Table } from '@radix-ui/themes';
import { iconButtonPropDefs } from '@radix-ui/themes/props';
import { DocsSection, DocsSectionBody, DocsSectionHeading } from '../docs-section';
import { accentColorsGrouped } from '../_utils';
export default function IconButtonPage() {
return (
<DocsSection>
<DocsSectionHeading>IconButton</DocsSectionHeading>
<DocsSectionBody>
<Table.Root>
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell />
{iconButtonPropDefs.size.values.map((size) => (
<Table.ColumnHeaderCell key={size}>size {size}</Table.ColumnHeaderCell>
))}
<Table.ColumnHeaderCell>+ high-contrast</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell />
<Table.ColumnHeaderCell>gray</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>+ high-contrast</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell />
<Table.ColumnHeaderCell>disabled</Table.ColumnHeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{iconButtonPropDefs.variant.values.map((variant) => (
<Table.Row key={variant}>
<Table.RowHeaderCell>{variant}</Table.RowHeaderCell>
{iconButtonPropDefs.size.values.map((size) => (
<Table.Cell key={size}>
<IconButton size={size} variant={variant}>
<Share2Icon />
</IconButton>
</Table.Cell>
))}
<Table.Cell>
<IconButton variant={variant} highContrast>
<Share2Icon />
</IconButton>
</Table.Cell>
<Table.Cell />
<Table.Cell>
<IconButton variant={variant} color="gray">
<Share2Icon />
</IconButton>
</Table.Cell>
<Table.Cell>
<IconButton variant={variant} color="gray" highContrast>
<Share2Icon />
</IconButton>
</Table.Cell>
<Table.Cell />
<Table.Cell>
<IconButton variant={variant} disabled>
<Share2Icon />
</IconButton>
</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table.Root>
<Text as="p" my="5">
<Code>radius</Code> can be set per instance:
</Text>
<details>
<summary>
<Text size="2" color="gray">
See specific radius examples
</Text>
</summary>
<Box mt="3">
<Table.Root>
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell />
{iconButtonPropDefs.size.values.map((size) => (
<Table.ColumnHeaderCell key={size}>size {size}</Table.ColumnHeaderCell>
))}
</Table.Row>
</Table.Header>
<Table.Body>
{iconButtonPropDefs.radius.values.map((radius) => (
<Table.Row key={radius}>
<Table.RowHeaderCell>{radius}</Table.RowHeaderCell>
{iconButtonPropDefs.size.values.map((size) => (
<Table.Cell key={size}>
<IconButton size={size} radius={radius}>
<Share2Icon />
</IconButton>
</Table.Cell>
))}
</Table.Row>
))}
</Table.Body>
</Table.Root>
</Box>
</details>
<Text as="p" my="5">
<Code>color</Code> can be set per instance:
</Text>
<details>
<summary>
<Text size="2" color="gray">
See colors & variants combinations
</Text>
</summary>
{accentColorsGrouped.map(({ label, values }) => (
<Fragment key={label}>
<Text as="p" weight="bold" mt="6" mb="4">
{label}
</Text>
<Table.Root>
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell />
{iconButtonPropDefs.variant.values.map((variant) => (
<Table.ColumnHeaderCell key={variant}>{variant}</Table.ColumnHeaderCell>
))}
</Table.Row>
</Table.Header>
<Table.Body>
{values.map((color) => (
<Table.Row key={color}>
<Table.RowHeaderCell>{color}</Table.RowHeaderCell>
{iconButtonPropDefs.variant.values.map((variant) => (
<Table.Cell key={variant}>
<IconButton variant={variant} color={color}>
<Share2Icon />
</IconButton>
<IconButton variant={variant} color={color} highContrast ml="2">
<Share2Icon />
</IconButton>
</Table.Cell>
))}
</Table.Row>
))}
</Table.Body>
</Table.Root>
</Fragment>
))}
</details>
</DocsSectionBody>
</DocsSection>
);
}
================================================
FILE: apps/playground/app/(themeable)/sink/kbd/page.tsx
================================================
import { Kbd, Flex, Table } from '@radix-ui/themes';
import { kbdPropDefs } from '@radix-ui/themes/props';
import { DocsSection, DocsSectionBody, DocsSectionHeading } from '../docs-section';
export default function KbdPage() {
return (
<DocsSection>
<DocsSectionHeading>Kbd</DocsSectionHeading>
<DocsSectionBody>
<Flex gap="4">
<Kbd asChild>
<button>Enter</button>
</Kbd>
<Kbd asChild>
<button>Tab</button>
</Kbd>
<Kbd asChild>
<button>Shift + Tab</button>
</Kbd>
</Flex>
<Table.Root>
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell />
{kbdPropDefs.variant.values.map((variant) => (
<Table.ColumnHeaderCell key={variant}>{variant}</Table.ColumnHeaderCell>
))}
</Table.Row>
</Table.Header>
<Table.Body>
{kbdPropDefs.size.values
.slice()
.reverse()
.map((size) => (
<Table.Row key={size}>
<Table.RowHeaderCell>size {size}</Table.RowHeaderCell>
{kbdPropDefs.variant.values.map((variant) => (
<Table.Cell key={variant} style={{ paddingRight: 'var(--space-6)' }}>
<Flex gap="2">
<Kbd size={size} variant={variant}>
/
</Kbd>
<Kbd size={size} variant={variant}>
X
</Kbd>
<Kbd size={size} variant={variant}>
⇧ ⌘ V
</Kbd>
</Flex>
</Table.Cell>
))}
</Table.Row>
))}
</Table.Body>
</Table.Root>
</DocsSectionBody>
</DocsSection>
);
}
================================================
FILE: apps/playground/app/(themeable)/sink/layout.tsx
================================================
import NextLink from 'next/link';
import { Collapsible } from 'radix-ui';
import {
Box,
Container,
Flex,
Grid,
Heading,
IconButton,
Link,
Reset,
Separator,
Tooltip,
} from '@radix-ui/themes';
import { RadixLogo } from './radix-logo';
import { HamburgerMenuIcon } from '@radix-ui/react-icons';
// prettier-ignore
const NAV_ITEMS = [
{ label: 'Alert Dialog', href: 'alert-dialog' },
{ label: 'Aspect Ratio', href: 'aspect-ratio' },
{ label: 'Avatar', href: 'avatar' },
{ label: 'Badge', href: 'badge' },
{ label: 'Blockquote', href: 'blockquote' },
{ label: 'Button', href: 'button' },
{ label: 'Callout', href: 'callout' },
{ label: 'Card', href: 'card' },
{ label: 'Checkbox', href: 'checkbox' },
{ label: 'Checkbox Cards', href: 'checkbox-cards' },
{ label: 'Checkbox Group', href: 'checkbox-group' },
{ label: 'Code', href: 'code' },
{ label: 'Container', href: 'container' },
{ label: 'Context Menu', href: 'context-menu' },
{ label: 'Cursors', href: 'cursors' },
{ label: 'Data List', href: 'data-list' },
{ label: 'Dialog', href: 'dialog' },
{ label: 'Dropdown Menu', href: 'dropdown-menu' },
{ label: 'Grid', href: 'grid' },
{ label: 'Heading', href: 'heading' },
{ label: 'Hover Card', href: 'hover-card' },
{ label: 'Icon Button', href: 'icon-button' },
{ label: 'Kbd', href: 'kbd' },
{ label: 'Link', href: 'link' },
{ label: 'Mixed Nested Themes Test', href: 'mixed-nested-themes-test' },
{ label: 'Nested Appearances Test', href: 'nested-appearances-test' },
{ label: 'Nested Colors Test', href: 'nested-colors-test' },
{ label: 'Playground', href: 'playground' },
{ label: 'Popover', href: 'popover' },
{ label: 'Progress', href: 'progress' },
{ label: 'Radio', href: 'radio' },
{ label: 'Radio Cards', href: 'radio-cards' },
{ label: 'Radio Group', href: 'radio-group' },
{ label: 'Scroll Area', href: 'scroll-area' },
{ label: 'Segmented Control', href: 'segmented-control' },
{ label: 'Select', href: 'select' },
{ label: 'Separator', href: 'separator' },
{ label: 'Shadow Tokens', href: 'shadow-tokens' },
{ label: 'Skeleton', href: 'skeleton' },
{ label: 'Slider', href: 'slider' },
{ label: 'Spinner', href: 'spinner' },
{ label: 'Switch', href: 'switch' },
{ label: 'Tab Nav', href: 'tab-nav' },
{ label: 'Table', href: 'table' },
{ label: 'Tabs', href: 'tabs' },
{ label: 'Text', href: 'text' },
{ label: 'Text Area', href: 'text-area' },
{ label: 'Text Field', href: 'text-field' },
{ label: 'Tooltip', href: 'tooltip' },
{ label: 'Typography', href: 'typography' },
] satisfies { label: string; href: string }[];
export default function SinkLayout({ children }: { children: React.ReactNode }) {
return (
<Container size="4" maxWidth="1680px">
<Grid
areas={{ initial: '"header" "separator" "main"', md: '"main separator header"' }}
columns={{ initial: '1', md: '1fr 1px 360px', xl: '1fr 1px 480px' }}
rows={{ initial: 'auto 1px 1fr', md: '1' }}
height="100%"
minHeight="100svh"
>
<Collapsible.Root asChild>
<Grid
asChild
flexGrow={{ initial: '0', md: '1' }}
flexShrink={{ initial: '0', md: '1' }}
flexBasis={{ initial: '0', md: '1' }}
align={{ initial: 'center', md: 'start' }}
justify="center"
gridArea="header"
position={{ initial: undefined, md: 'sticky' }}
top={{ initial: undefined, md: '0' }}
alignSelf={{ initial: undefined, md: 'start' }}
maxHeight={{ initial: undefined, md: '100svh' }}
overflow={{ initial: undefined, md: 'auto' }}
rows="auto 1fr"
>
<header>
<Box
width="100%"
alignSelf="center"
style={{ backgroundColor: 'var(--color-background)' }}
position={{ initial: undefined, md: 'sticky' }}
top={{ initial: undefined, md: '0' }}
pt={{ initial: '4', md: '9' }}
pb="4"
>
<Flex height="100%" width="100%" align="center">
<Container mx="4" size="4">
<Flex gap="4" align="center">
<Flex align="center" gap="1" flexGrow="1">
<RadixLogo />
<Heading size="5">Radix Themes</Heading>
</Flex>
<Tooltip content="Toggle navigation">
<Collapsible.Trigger asChild>
<IconButton aria-label="Toggle navigation" variant="ghost" color="gray">
<HamburgerMenuIcon />
</IconButton>
</Collapsible.Trigger>
</Tooltip>
</Flex>
</Container>
</Flex>
</Box>
<Collapsible.Content asChild>
<Box asChild height="100%" py="4" pb={{ initial: undefined, md: '9' }}>
<nav aria-label="Main">
<Container mx="4" size="4">
<NavigationMenu />
</Container>
</nav>
</Box>
</Collapsible.Content>
</header>
</Grid>
</Collapsible.Root>
<Box asChild gridArea="separator">
<Separator size="4" aria-hidden orientation={{ initial: 'horizontal', md: 'vertical' }} />
</Box>
<Box
asChild
flexGrow="1"
flexShrink="1"
flexBasis="0"
gridArea="main"
py={{ initial: '6', md: '9' }}
>
<main>
<Container mx="4" size="4" position="relative" width="100%" height="100%">
{children}
</Container>
</main>
</Box>
</Grid>
</Container>
);
}
function NavigationMenu() {
return (
<Flex direction="column" gap="2">
<Link asChild highContrast>
<NextLink href="/sink">Kitchen sink</NextLink>
</Link>
<Separator size="4" />
<Flex direction="column" gap="1" asChild>
<Reset>
<ul>
{NAV_ITEMS.map((item) => (
<Box display="contents" asChild key={item.label}>
<li>
<Link asChild highContrast>
<NextLink href={`/sink${item.href ? '/' + item.href : ''}`}>
{item.label}
</NextLink>
</Link>
</li>
</Box>
))}
</ul>
</Reset>
</Flex>
</Flex>
);
}
================================================
FILE: apps/playground/app/(themeable)/sink/link/page.tsx
================================================
import { ArrowTopRightIcon } from '@radix-ui/react-icons';
import { Flex, Link, Separator, Text } from '@radix-ui/themes';
import { linkPropDefs } from '@radix-ui/themes/props';
import { DocsSection, DocsSectionBody, DocsSectionHeading } from '../docs-section';
export default function LinkPage() {
return (
<DocsSection>
<DocsSectionHeading>Link</DocsSectionHeading>
<DocsSectionBody>
<Flex gap="4" mb="5">
<Link color="purple" href="/">
This is a link
</Link>
<Link color="gray" href="/">
This is a link
</Link>
<Link color="green" href="/">
This is a link
</Link>
<Link color="red" href="/">
This is a link
</Link>
<Link color="yellow" href="/">
This is a link
</Link>
<Link color="blue" href="/">
This is a link
</Link>
<Text as="p" color="gray">
<Link href="/">This is a link</Link>
</Text>
</Flex>
<Flex gap="4" mb="5">
<Link color="purple" highContrast href="/">
This is a link
</Link>
<Link color="gray" highContrast href="/">
This is a link
</Link>
<Link color="green" highContrast href="/">
This is a link
</Link>
<Link color="red" highContrast href="/">
This is a link
</Link>
<Link color="yellow" highContrast href="/">
This is a link
</Link>
<Link color="blue" highContrast href="/">
This is a link
</Link>
</Flex>
<Flex direction="column" align="start" gap="4" mb="5">
{linkPropDefs.size.values
.slice()
.reverse()
.map((size) => (
<Link key={size} href="/" size={size}>
This is a link
</Link>
))}
<Flex align="center" gap="1" asChild>
<Link color="purple" href="/" size="3">
This is a link
<ArrowTopRightIcon />
</Link>
</Flex>
<Flex align="center" gap="1" asChild>
<Link color="gray" href="/" size="3">
This is a link
<ArrowTopRightIcon />
</Link>
</Flex>
<Text as="p" size="6">
Single Sign-On (SSO) is the most frequently asked for requirement by enterprise
organizations looking to adopt new SaaS applications. SSO enables authentication via an
organization's Identity Provider (IdP), such as Google Workspace or Okta, as
opposed to users or <Link href="/">IT admins</Link> managing hundreds, if not thousands,
of usernames and passwords. Facilitate greater security, easier account management, and
accelerated application onboarding and adoption by{' '}
<Link href="/">adding SSO to your app</Link>.
</Text>
<Text as="p" size="6">
Single Sign-On (SSO) is the most frequently asked for requirement by enterprise
organizations looking to adopt new SaaS applications. SSO enables authentication via an
organization's Identity Provider (IdP), such as Google Workspace or Okta, as
opposed to users or <Link href="/">IT admins</Link> managing hundreds, if not thousands,
of usernames and passwords. Facilitate greater security, easier account management, and
accelerated application onboarding and adoption by{' '}
<Link href="/">adding SSO to your app</Link>.
</Text>
<Separator size="3" my="5" />
<Text as="p" color="gray" size="6">
Single Sign-On (SSO) is the most frequently asked for requirement by enterprise
organizations looking to adopt new SaaS applications. SSO enables authentication via an
organization's Identity Provider (IdP), such as Google Workspace or Okta, as
opposed to users or <Link href="/">IT admins</Link> managing hundreds, if not thousands,
of usernames and passwords. Facilitate greater security, easier account management, and
accelerated application onboarding and adoption by{' '}
<Link href="/">adding SSO to your app</Link>.
</Text>
<Text as="p" color="purple" size="6">
Single Sign-On (SSO) is the most frequently asked for requirement by enterprise
organizations looking to adopt new SaaS applications. SSO enables authentication via an
organization's Identity Provider (IdP), such as Google Workspace or Okta, as
opposed to users or <Link href="/">IT admins</Link> managing hundreds, if not thousands,
of usernames and passwords. Facilitate greater security, easier account management, and
accelerated application onboarding and adoption by{' '}
<Link href="/">adding SSO to your app</Link>.
</Text>
<Text as="p" color="blue" size="6">
Single Sign-On (SSO) is the most frequently asked for requirement by enterprise
organizations looking to adopt new SaaS applications. SSO enables authentication via an
organization's Identity Provider (IdP), such as Google Workspace or Okta, as
opposed to users or <Link href="/">IT admins</Link> managing hundreds, if not thousands,
of usernames and passwords. Facilitate greater security, easier account management, and
accelerated application onboarding and adoption by{' '}
<Link href="/">adding SSO to your app</Link>.
</Text>
<Text as="p" color="green" size="6">
Single Sign-On (SSO) is the most frequently asked for requirement by enterprise
organizations looking to adopt new SaaS applications. SSO enables authentication via an
organization's Identity Provider (IdP), such as Google Workspace or Okta, as
opposed to users or <Link href="/">IT admins</Link> managing hundreds, if not thousands,
of usernames and passwords. Facilitate greater security, easier account management, and
accelerated application onboarding and adoption by{' '}
<Link href="/">adding SSO to your app</Link>.
</Text>
<Text as="p" color="yellow" size="6">
Single Sign-On (SSO) is the most frequently asked for requirement by enterprise
organizations looking to adopt new SaaS applications. SSO enables authentication via an
organization's Identity Provider (IdP), such as Google Workspace or Okta, as
opposed to users or <Link href="/">IT admins</Link> managing hundreds, if not thousands,
of usernames and passwords. Facilitate greater security, easier account management, and
accelerated application onboarding and adoption by{' '}
<Link href="/">adding SSO to your app</Link>.
</Text>
<Text as="p" color="red" size="6">
Single Sign-On (SSO) is the most frequently asked for requirement by enterprise
organizations looking to adopt new SaaS applications. SSO enables authentication via an
organization's Identity Provider (IdP), such as Google Workspace or Okta, as
opposed to users or <Link href="/">IT admins</Link> managing hundreds, if not thousands,
of usernames and passwords. Facilitate greater security, easier account management, and
accelerated application onboarding and adoption by{' '}
<Link href="/">adding SSO to your app</Link>.
</Text>
</Flex>
</DocsSectionBody>
</DocsSection>
);
}
================================================
FILE: apps/playground/app/(themeable)/sink/mixed-nested-themes-test/page.tsx
================================================
import { Theme } from '@radix-ui/themes';
import { DocsSection, DocsSectionBody, DocsSectionHeading } from '../docs-section';
import { SampleNestedUI } from '../_components';
export default function MixedNestedThemesTest() {
return (
<DocsSection>
<DocsSectionHeading>Mixed nested themes test</DocsSectionHeading>
<DocsSectionBody>
<SampleNestedUI title="Global theme">
<Theme asChild accentColor="mint" appearance="dark" radius="none" scaling="90%">
<SampleNestedUI title="Dark, Mint, no radius, 90%">
<Theme asChild accentColor="amber" appearance="light" radius="full" scaling="110%">
<SampleNestedUI title="Light, Amber, full radius, 110%">
<Theme
asChild
accentColor="tomato"
appearance="dark"
radius="large"
scaling="100%"
>
<SampleNestedUI title="Dark, Tomato, large radius, 100%" />
</Theme>
</SampleNestedUI>
</Theme>
</SampleNestedUI>
</Theme>
</SampleNestedUI>
</DocsSectionBody>
</DocsSection>
);
}
================================================
FILE: apps/playground/app/(themeable)/sink/nested-appearances-test/page.tsx
================================================
import { Theme } from '@radix-ui/themes';
import { DocsSection, DocsSectionBody, DocsSectionHeading } from '../docs-section';
import { SampleNestedUI } from '../_components';
export default function NestedAppearancesTest() {
return (
<DocsSection>
<DocsSectionHeading>Nested appearances test</DocsSectionHeading>
<DocsSectionBody>
<SampleNestedUI title="Global appearance">
<Theme asChild appearance="dark">
<SampleNestedUI title="Always dark">
<Theme asChild appearance="light">
<SampleNestedUI title="Always light">
<Theme asChild appearance="dark">
<SampleNestedUI title="Always dark" />
</Theme>
</SampleNestedUI>
</Theme>
</SampleNestedUI>
</Theme>
</SampleNestedUI>
</DocsSectionBody>
</DocsSection>
);
}
================================================
FILE: apps/playground/app/(themeable)/sink/nested-colors-test/page.tsx
================================================
import { Theme } from '@radix-ui/themes';
import { DocsSection, DocsSectionBody, DocsSectionHeading } from '../docs-section';
import { SampleNestedUI } from '../_components';
export default function NestedColorsTest() {
return (
<DocsSection>
<DocsSectionHeading>Nested colors test</DocsSectionHeading>
<DocsSectionBody>
<SampleNestedUI title="Global color">
<Theme asChild accentColor="mint">
<SampleNestedUI title="Always mint">
<Theme asChild accentColor="amber">
<SampleNestedUI title="Always amber">
<Theme asChild accentColor="tomato">
<SampleNestedUI title="Always tomato" />
</Theme>
</SampleNestedUI>
</Theme>
</SampleNestedUI>
</Theme>
</SampleNestedUI>
</DocsSectionBody>
</DocsSection>
);
}
================================================
FILE: apps/playground/app/(themeable)/sink/page.module.css
================================================
.root {
margin-bottom: 400px;
}
.root :global(summary) {
cursor: pointer;
}
.root :global(summary:focus-visible) {
outline: 2px solid var(--accent-8);
outline-offset: 2px;
}
.root :global(.hide-cursor),
.root :global(.hide-cursor *) {
cursor: none !important;
}
.table {
border-collapse: collapse;
}
.table + .table {
margin-top: var(--space-3);
}
.table thead tr,
.table tbody tr:not(:last-child) {
border-bottom: 1px solid var(--gray-a5);
}
.table th {
font-weight: 400;
}
.table th,
.table td {
padding: 0;
padding-top: var(--space-4);
padding-right: var(--space-4);
padding-bottom: var(--space-4);
}
.table .rowHeaderCell {
padding-left: 0;
padding-right: var(--space-5);
min-width: 100px;
}
================================================
FILE: apps/playground/app/(themeable)/sink/page.tsx
================================================
'use client';
import { Flex, Separator } from '@radix-ui/themes';
import AlertDialogPage from './alert-dialog/page';
import AspectRatioPage from './aspect-ratio/page';
import AvatarPage from './avatar/page';
import BadgePage from './badge/page';
import BlockquotePage from './blockquote/page';
import ButtonPage from './button/page';
import CalloutPage from './callout/page';
import CardPage from './card/page';
import CheckboxPage from './checkbox/page';
import CheckboxCardsPage from './checkbox-cards/page';
import CheckboxGroupPage from './checkbox-group/page';
import CodePage from './code/page';
import ContainerPage from './container/page';
import ContextMenuPage from './context-menu/page';
import CursorsPage from './cursors/page';
import DataListPage from './data-list/page';
import DialogPage from './dialog/page';
import DropdownMenuPage from './dropdown-menu/page';
import GridPage from './grid/page';
import HeadingPage from './heading/page';
import HoverCardPage from './hover-card/page';
import IconButtonPage from './icon-button/page';
import KbdPage from './kbd/page';
import LinkPage from './link/page';
import MixedNestedThemesTestPage from './mixed-nested-themes-test/page';
import NestedAppearancesTestPage from './nested-appearances-test/page';
import NestedColorsTestPage from './nested-colors-test/page';
import PlaygroundPage from './playground/page';
import PopoverPage from './popover/page';
import ProgressPage from './progress/page';
import RadioPage from './radio/page';
import RadioCardsPage from './radio-cards/page';
import RadioGroupPage from './radio-group/page';
import ScrollAreaPage from './scroll-area/page';
import SegmentedControlPage from './segmented-control/page';
import SelectPage from './select/page';
import SeparatorPage from './separator/page';
import ShadowTokensPage from './shadow-tokens/page';
import SkeletonPage from './skeleton/page';
import SliderPage from './slider/page';
import SpinnerPage from './spinner/page';
import SwitchPage from './switch/page';
import TablePage from './table/page';
import TabNavPage from './tab-nav/page';
import TabsPage from './tabs/page';
import TextPage from './text/page';
import TextAreaPage from './text-area/page';
import TextFieldPage from './text-field/page';
import TooltipPage from './tooltip/page';
import TypographyPage from './typography/page';
export default function Sink() {
return (
<div id="root">
<div
style={{
display: 'none',
position: 'fixed',
backgroundAttachment: 'fixed',
inset: 0,
backgroundSize: '100% max(100%, 600px)',
backgroundImage: [
'radial-gradient(at 0% 0%, transparent, transparent)',
'radial-gradient(at 41% 18%, var(--blue-1) 0, hsla(212, 92%, 67%, 0) 50%)',
'radial-gradient(at 76% 14%, var(--purple-3) 0, hsla(239, 87%, 67%, 0) 50%)',
'radial-gradient(at 7% 83%, var(--green-2) 0, hsla(165, 92%, 67%, 0) 50%)',
'radial-gradient(at 72% 2%, var(--purple-4) 0, hsla(248, 95%, 67%, 0) 50%)',
'radial-gradient(at 38% 76%, var(--red-3) 0, hsla(23, 86%, 55%, 0) 50%)',
'radial-gradient(at 88% 24%, var(--green-1) 0, hsla(82, 92%, 68%, 0) 50%)',
'radial-gradient(at 4% 89%, var(--green-4) 0, hsla(95, 86%, 55%, 0) 50%)',
'radial-gradient(at 54% 17%, var(--red-3) 0, hsla(2, 93%, 63%, 0) 50%)',
'radial-gradient(at 65% 86%, var(--red-2) 0, hsla(328, 85%, 64%, 0) 50%)',
'radial-gradient(at 68% 5%, var(--green-1) 0, hsla(173, 87%, 55%, 0) 50%)',
'radial-gradient(at 0% 64%, var(--red-1) 0, hsla(8, 90%, 67%, 0) 50%)',
].join(', '),
}}
/>
<Flex direction="column" gap="6">
<DialogPage />
<Separator size="4" />
<HoverCardPage />
<Separator size="4" />
<TooltipPage />
<Separator size="4" />
<AlertDialogPage />
<Separator size="4" />
<PopoverPage />
<Separator size="4" />
<DropdownMenuPage />
<Separator size="4" />
<ContextMenuPage />
<Separator size="4" />
<SelectPage />
<Separator size="4" />
<SwitchPage />
<Separator size="4" />
<SliderPage />
<Separator size="4" />
<ProgressPage />
<Separator size="4" />
<SpinnerPage />
<Separator size="4" />
<CheckboxPage />
<Separator size="4" />
<CheckboxGroupPage />
<Separator size="4" />
<CheckboxCardsPage />
<Separator size="4" />
<RadioPage />
<Separator size="4" />
<RadioGroupPage />
<Separator size="4" />
<RadioCardsPage />
<Separator size="4" />
<ButtonPage />
<Separator size="4" />
<IconButtonPage />
<Separator size="4" />
<TextFieldPage />
<Separator size="4" />
<TextAreaPage />
<Separator size="4" />
<BadgePage />
<Separator size="4" />
<AvatarPage />
<Separator size="4" />
<CardPage />
<Separator size="4" />
<TablePage />
<Separator size="4" />
<TypographyPage />
<Separator size="4" />
<TextPage />
<Separator size="4" />
<CodePage />
<Separator size="4" />
<HeadingPage />
<Separator size="4" />
<LinkPage />
<Separator size="4" />
<BlockquotePage />
<Separator size="4" />
<CalloutPage />
<Separator size="4" />
<KbdPage />
<Separator size="4" />
<TabNavPage />
<Separator size="4" />
<TabsPage />
<Separator size="4" />
<AspectRatioPage />
<Separator size="4" />
<ScrollAreaPage />
<Separator size="4" />
<PlaygroundPage />
<Separator size="4" />
<NestedAppearancesTestPage />
<Separator size="4" />
<NestedColorsTestPage />
<Separator size="4" />
<MixedNestedThemesTestPage />
<Separator size="4" />
<ShadowTokensPage />
<Separator size="4" />
<GridPage />
<Separator size="4" />
<SeparatorPage />
<Separator size="4" />
<CursorsPage />
<Separator size="4" />
<SkeletonPage />
<Separator size="4" />
<DataListPage />
<Separator size="4" />
<SegmentedControlPage />
<Separator size="4" />
<ContainerPage />
</Flex>
</div>
);
}
================================================
FILE: apps/playground/app/(themeable)/sink/playground/page.tsx
================================================
import { Card, Flex, Text } from '@radix-ui/themes';
import { textFieldRootPropDefs } from '@radix-ui/themes/props';
import { DocsSection, DocsSectionBody, DocsSectionHeading } from '../docs-section';
import { PlaygroundForm } from '../_components';
export default function PlaygroundPage() {
return (
<DocsSection>
<DocsSectionHeading>Playground</DocsSectionHeading>
<DocsSectionBody>
<Text as="p" mb="5">
In this section, I am just throwing together some of the components to get a sense of how
harmonious they are.
</Text>
<Flex gap="9">
{textFieldRootPropDefs.size.values.map((size) => (
<PlaygroundForm key={size} size={size} style={{ width: (Number(size) + 1) * 100 }} />
))}
</Flex>
<Card size="4" style={{ width: 400 }} mt="3">
<PlaygroundForm size="2" />
</Card>
</DocsSectionBody>
</DocsSection>
);
}
================================================
FILE: apps/playground/app/(themeable)/sink/pointer-cursors-checkbox.tsx
================================================
'use client';
import { Box, Checkbox, Flex, Text } from '@radix-ui/themes';
import React from 'react';
export function PointerCursorsCheckbox() {
const [checked, setChecked] = React.useState(false);
return (
<Box>
<Text as="label" size="2">
<Flex gap="2">
<Checkbox onCheckedChange={(value) => setChecked(!!value)} />
Use pointer cursors
</Flex>
</Text>
{checked && (
<style>
{`
.radix-themes {
--cursor-button: pointer;
--cursor-checkbox: pointer;
--cursor-disabled: default;
--cursor-link: pointer;
--cursor-menu-item: pointer;
--cursor-radio: pointer;
--cursor-slider-thumb: grab;
--cursor-slider-thumb-active: grabbing;
--cursor-switch: pointer;
}
`}
</style>
)}
</Box>
);
}
================================================
FILE: apps/playground/app/(themeable)/sink/popover/page.tsx
================================================
import { Button, Popover, Text } from '@radix-ui/themes';
import { DocsSection, DocsSectionBody, DocsSectionHeading } from '../docs-section';
import { Share2Icon } from '@radix-ui/react-icons';
export default function PopoverPage() {
return (
<DocsSection>
<DocsSectionHeading>Popover</DocsSectionHeading>
<DocsSectionBody>
<Popover.Root>
<Popover.Trigger>
<Button variant="solid">Popover</Button>
</Popover.Trigger>
<Popover.Content width="200px">
<Text as="p" size="2" mb="2">
Jan Tschichold was a German calligrapher, typographer and book designer. He played a
significant role in the development of graphic design in the 20th century.
</Text>
<Button variant="solid" size="1">
Share <Share2Icon />
</Button>
</Popover.Content>
</Popover.Root>
</DocsSectionBody>
</DocsSection>
);
}
================================================
FILE: apps/playground/app/(themeable)/sink/progress/page.tsx
================================================
import { Fragment } from 'react';
import { Progress, Grid, Text, Code, Box, Flex, Table } from '@radix-ui/themes';
import { progressPropDefs } from '@radix-ui/themes/props';
import { DocsSection, DocsSectionBody, DocsSectionHeading } from '../docs-section';
import { accentColorsGrouped } from '../_utils';
export default function ProgressPage() {
return (
<DocsSection>
<DocsSectionHeading>Progress</DocsSectionHeading>
<DocsSectionBody>
<Flex direction="column" gap="5">
<div>
<Table.Root>
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell />
<Table.ColumnHeaderCell>color</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>+ high-contrast</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>gray</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>+ high-contrast</Table.ColumnHeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{progressPropDefs.variant.values.map((variant, index) => (
<Table.Row key={variant}>
<Table.RowHeaderCell>{variant}</Table.RowHeaderCell>
<Table.Cell style={{ minWidth: 220 }}>
<Grid gap="3">
<Progress variant={variant} />
<Progress variant={variant} value={33 + index * 10} />
</Grid>
</Table.Cell>
<Table.Cell style={{ minWidth: 220 }}>
<Grid gap="3">
<Progress variant={variant} highContrast />
<Progress variant={variant} highContrast value={33 + index * 10} />
</Grid>
</Table.Cell>
<Table.Cell style={{ minWidth: 220 }}>
<Grid gap="3">
<Progress variant={variant} color="gray" />
<Progress variant={variant} color="gray" value={33 + index * 10} />
</Grid>
</Table.Cell>
<Table.Cell style={{ minWidth: 220 }}>
<Grid gap="3">
<Progress variant={variant} color="gray" highContrast />
<Progress
variant={variant}
color="gray"
highContrast
value={33 + index * 10}
/>
</Grid>
</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table.Root>
</div>
<div>
<Table.Root>
<Table.Body>
{progressPropDefs.size.values.map((size) => (
<Table.Row key={size}>
<Table.RowHeaderCell>size {size}</Table.RowHeaderCell>
<Table.Cell style={{ width: 220 }}>
<Progress size={size} />
</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table.Root>
</div>
</Flex>
<Text as="p" my="5">
<Code>radius</Code> can be set per instance:
</Text>
<details>
<summary>
<Text size="2" color="gray">
See specific radius examples
</Text>
</summary>
<Box mt="3">
<Table.Root>
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell />
{progressPropDefs.size.values.map((size) => (
<Table.ColumnHeaderCell key={size}>size {size}</Table.ColumnHeaderCell>
))}
</Table.Row>
</Table.Header>
<Table.Body>
{progressPropDefs.radius.values.map((radius) => (
<Table.Row key={radius}>
<Table.RowHeaderCell>{radius}</Table.RowHeaderCell>
{progressPropDefs.size.values.map((size) => (
<Table.Cell key={size} style={{ minWidth: 150 }}>
<Progress size={size} radius={radius} value={66} />
</Table.Cell>
))}
</Table.Row>
))}
</Table.Body>
</Table.Root>
</Box>
</details>
<Text as="p" my="5">
<Code>color</Code> can be set per instance:
</Text>
<details>
<summary>
<Text size="2" color="gray">
See colors
</Text>
</summary>
{accentColorsGrouped.map(({ label, values }) => (
<Fragment key={label}>
<Text as="p" weight="bold" mt="6" mb="4">
gitextract_54k8yhkw/ ├── .github/ │ ├── CONTRIBUTING.md │ ├── PULL_REQUEST_TEMPLATE.md │ ├── actions/ │ │ └── ci-setup/ │ │ └── action.yml │ └── workflows/ │ ├── ci.yml │ └── publish.yml ├── .gitignore ├── .npmrc ├── .nvmrc ├── .prettierignore ├── .prettierrc ├── .vscode/ │ ├── extensions.json │ └── settings.json ├── AGENTS.md ├── CLAUDE.md ├── CODE_OF_CONDUCT.md ├── LICENSE ├── README.md ├── apps/ │ └── playground/ │ ├── .gitignore │ ├── app/ │ │ ├── (static-theme)/ │ │ │ ├── layout.tsx │ │ │ └── theme.tsx │ │ ├── (themeable)/ │ │ │ ├── demo/ │ │ │ │ ├── page.tsx │ │ │ │ └── users.ts │ │ │ ├── ghost-balance/ │ │ │ │ └── page.tsx │ │ │ ├── layout.tsx │ │ │ ├── sink/ │ │ │ │ ├── _components.tsx │ │ │ │ ├── _utils.tsx │ │ │ │ ├── alert-dialog/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── aspect-ratio/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── avatar/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── badge/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── blockquote/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── button/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── callout/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── card/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── checkbox/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── checkbox-cards/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── checkbox-group/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── code/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── container/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── context-menu/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── cursors/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── data-list/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── dialog/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── docs-section.tsx │ │ │ │ ├── dropdown-menu/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── grid/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── heading/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── hide-cursor.tsx │ │ │ │ ├── hover-card/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── icon-button/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── kbd/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── layout.tsx │ │ │ │ ├── link/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── mixed-nested-themes-test/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── nested-appearances-test/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── nested-colors-test/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── page.module.css │ │ │ │ ├── page.tsx │ │ │ │ ├── playground/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── pointer-cursors-checkbox.tsx │ │ │ │ ├── popover/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── progress/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── radio/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── radio-cards/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── radio-group/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── radix-logo.tsx │ │ │ │ ├── scroll-area/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── segmented-control/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── select/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── separator/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── shadow-tokens/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── skeleton/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── slider/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── spinner/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── switch/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── tab-nav/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── tab-nav-demo.tsx │ │ │ │ ├── table/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── tabs/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── text/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── text-area/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── text-field/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── tooltip/ │ │ │ │ │ └── page.tsx │ │ │ │ └── typography/ │ │ │ │ └── page.tsx │ │ │ ├── snapshot/ │ │ │ │ ├── image-card.tsx │ │ │ │ ├── page.module.css │ │ │ │ └── page.tsx │ │ │ └── test/ │ │ │ ├── appearance/ │ │ │ │ └── page.tsx │ │ │ ├── as-child/ │ │ │ │ └── page.tsx │ │ │ ├── avatar/ │ │ │ │ └── page.tsx │ │ │ ├── checkbox-card/ │ │ │ │ └── page.tsx │ │ │ ├── classic-button/ │ │ │ │ └── page.tsx │ │ │ ├── data-list/ │ │ │ │ └── page.tsx │ │ │ ├── dialog/ │ │ │ │ └── page.tsx │ │ │ ├── grid-align-content/ │ │ │ │ └── page.tsx │ │ │ ├── grid-align-self/ │ │ │ │ └── page.tsx │ │ │ ├── grid-area/ │ │ │ │ └── page.tsx │ │ │ ├── grid-justify-items/ │ │ │ │ └── page.tsx │ │ │ ├── grid-justify-self/ │ │ │ │ └── page.tsx │ │ │ ├── high-contrast/ │ │ │ │ └── page.tsx │ │ │ ├── inset/ │ │ │ │ └── page.tsx │ │ │ ├── radio-card/ │ │ │ │ └── page.tsx │ │ │ ├── reset/ │ │ │ │ └── page.tsx │ │ │ ├── responsive/ │ │ │ │ └── page.tsx │ │ │ ├── skeleton/ │ │ │ │ └── page.tsx │ │ │ ├── tabnav/ │ │ │ │ ├── (accounts)/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── documents/ │ │ │ │ │ └── page.tsx │ │ │ │ ├── layout.tsx │ │ │ │ ├── nav.tsx │ │ │ │ └── settings/ │ │ │ │ └── page.tsx │ │ │ ├── text-wrap/ │ │ │ │ └── page.tsx │ │ │ ├── textfield/ │ │ │ │ └── page.tsx │ │ │ └── webkit-tap-highlight-color/ │ │ │ └── page.tsx │ │ ├── api/ │ │ │ └── avatar/ │ │ │ └── route.ts │ │ ├── globals.css │ │ ├── layout.tsx │ │ └── next-theme-provider.tsx │ ├── components/ │ │ ├── loading-buttons.tsx │ │ └── snapshot-logo.tsx │ ├── css.d.ts │ ├── eslint.config.mjs │ ├── next.config.mjs │ ├── package.json │ ├── playwright.config.ts │ ├── postcss.config.mjs │ ├── tests/ │ │ └── visual-regression.spec.ts │ └── tsconfig.json ├── context7.json ├── package.json ├── packages/ │ └── radix-ui-themes/ │ ├── .browserslistrc │ ├── .stylelintrc.cjs │ ├── CHANGELOG.md │ ├── README.md │ ├── eslint.config.mjs │ ├── package.json │ ├── postcss-breakpoints.cjs │ ├── postcss-whitespace.cjs │ ├── postcss.config.cjs │ ├── scripts/ │ │ ├── esbuild-cjs.js │ │ ├── esbuild-esm.js │ │ └── package.json │ ├── src/ │ │ ├── components/ │ │ │ ├── _internal/ │ │ │ │ ├── base-button.css │ │ │ │ ├── base-button.props.ts │ │ │ │ ├── base-button.tsx │ │ │ │ ├── base-card.css │ │ │ │ ├── base-checkbox.css │ │ │ │ ├── base-checkbox.props.ts │ │ │ │ ├── base-dialog.css │ │ │ │ ├── base-menu.css │ │ │ │ ├── base-menu.props.ts │ │ │ │ ├── base-radio.css │ │ │ │ ├── base-radio.props.ts │ │ │ │ ├── base-tab-list.css │ │ │ │ └── base-tab-list.props.ts │ │ │ ├── accessible-icon.tsx │ │ │ ├── alert-dialog.css │ │ │ ├── alert-dialog.props.tsx │ │ │ ├── alert-dialog.tsx │ │ │ ├── animations.css │ │ │ ├── aspect-ratio.tsx │ │ │ ├── avatar.css │ │ │ ├── avatar.props.tsx │ │ │ ├── avatar.tsx │ │ │ ├── badge.css │ │ │ ├── badge.props.tsx │ │ │ ├── badge.tsx │ │ │ ├── blockquote.css │ │ │ ├── blockquote.props.tsx │ │ │ ├── blockquote.tsx │ │ │ ├── box.css │ │ │ ├── box.props.tsx │ │ │ ├── box.tsx │ │ │ ├── button.css │ │ │ ├── button.props.tsx │ │ │ ├── button.tsx │ │ │ ├── callout.css │ │ │ ├── callout.props.tsx │ │ │ ├── callout.tsx │ │ │ ├── card.css │ │ │ ├── card.props.tsx │ │ │ ├── card.tsx │ │ │ ├── checkbox-cards.css │ │ │ ├── checkbox-cards.props.tsx │ │ │ ├── checkbox-cards.tsx │ │ │ ├── checkbox-group.css │ │ │ ├── checkbox-group.primitive.tsx │ │ │ ├── checkbox-group.props.tsx │ │ │ ├── checkbox-group.tsx │ │ │ ├── checkbox.css │ │ │ ├── checkbox.props.tsx │ │ │ ├── checkbox.tsx │ │ │ ├── code.css │ │ │ ├── code.props.tsx │ │ │ ├── code.tsx │ │ │ ├── container.css │ │ │ ├── container.props.tsx │ │ │ ├── container.tsx │ │ │ ├── context-menu.css │ │ │ ├── context-menu.props.tsx │ │ │ ├── context-menu.tsx │ │ │ ├── data-list.css │ │ │ ├── data-list.props.tsx │ │ │ ├── data-list.tsx │ │ │ ├── dialog.css │ │ │ ├── dialog.props.tsx │ │ │ ├── dialog.tsx │ │ │ ├── dropdown-menu.css │ │ │ ├── dropdown-menu.props.tsx │ │ │ ├── dropdown-menu.tsx │ │ │ ├── em.css │ │ │ ├── em.props.tsx │ │ │ ├── em.tsx │ │ │ ├── flex.css │ │ │ ├── flex.props.tsx │ │ │ ├── flex.tsx │ │ │ ├── grid.css │ │ │ ├── grid.props.tsx │ │ │ ├── grid.tsx │ │ │ ├── heading.css │ │ │ ├── heading.props.tsx │ │ │ ├── heading.tsx │ │ │ ├── hover-card.css │ │ │ ├── hover-card.props.tsx │ │ │ ├── hover-card.tsx │ │ │ ├── icon-button.css │ │ │ ├── icon-button.props.tsx │ │ │ ├── icon-button.tsx │ │ │ ├── icons.tsx │ │ │ ├── index.css │ │ │ ├── index.tsx │ │ │ ├── inset.css │ │ │ ├── inset.props.tsx │ │ │ ├── inset.tsx │ │ │ ├── kbd.css │ │ │ ├── kbd.props.tsx │ │ │ ├── kbd.tsx │ │ │ ├── layout.css │ │ │ ├── link.css │ │ │ ├── link.props.tsx │ │ │ ├── link.tsx │ │ │ ├── popover.css │ │ │ ├── popover.props.tsx │ │ │ ├── popover.tsx │ │ │ ├── portal.tsx │ │ │ ├── progress.css │ │ │ ├── progress.props.tsx │ │ │ ├── progress.tsx │ │ │ ├── quote.css │ │ │ ├── quote.props.tsx │ │ │ ├── quote.tsx │ │ │ ├── radio-cards.css │ │ │ ├── radio-cards.props.tsx │ │ │ ├── radio-cards.tsx │ │ │ ├── radio-group.css │ │ │ ├── radio-group.props.tsx │ │ │ ├── radio-group.tsx │ │ │ ├── radio.css │ │ │ ├── radio.props.tsx │ │ │ ├── radio.tsx │ │ │ ├── reset.css │ │ │ ├── reset.tsx │ │ │ ├── scroll-area.css │ │ │ ├── scroll-area.props.tsx │ │ │ ├── scroll-area.tsx │ │ │ ├── section.css │ │ │ ├── section.props.tsx │ │ │ ├── section.tsx │ │ │ ├── segmented-control.css │ │ │ ├── segmented-control.props.tsx │ │ │ ├── segmented-control.tsx │ │ │ ├── select.css │ │ │ ├── select.props.tsx │ │ │ ├── select.tsx │ │ │ ├── separator.css │ │ │ ├── separator.props.tsx │ │ │ ├── separator.tsx │ │ │ ├── skeleton.css │ │ │ ├── skeleton.props.tsx │ │ │ ├── skeleton.tsx │ │ │ ├── slider.css │ │ │ ├── slider.props.tsx │ │ │ ├── slider.tsx │ │ │ ├── slot.tsx │ │ │ ├── spinner.css │ │ │ ├── spinner.props.tsx │ │ │ ├── spinner.tsx │ │ │ ├── strong.css │ │ │ ├── strong.props.tsx │ │ │ ├── strong.tsx │ │ │ ├── switch.css │ │ │ ├── switch.props.tsx │ │ │ ├── switch.tsx │ │ │ ├── tab-nav.css │ │ │ ├── tab-nav.props.tsx │ │ │ ├── tab-nav.tsx │ │ │ ├── table.css │ │ │ ├── table.props.tsx │ │ │ ├── table.tsx │ │ │ ├── tabs.css │ │ │ ├── tabs.props.tsx │ │ │ ├── tabs.tsx │ │ │ ├── text-area.css │ │ │ ├── text-area.props.tsx │ │ │ ├── text-area.tsx │ │ │ ├── text-field.css │ │ │ ├── text-field.props.tsx │ │ │ ├── text-field.tsx │ │ │ ├── text.css │ │ │ ├── text.props.tsx │ │ │ ├── text.tsx │ │ │ ├── theme-panel.css │ │ │ ├── theme-panel.tsx │ │ │ ├── theme.props.tsx │ │ │ ├── theme.tsx │ │ │ ├── tooltip.css │ │ │ ├── tooltip.props.tsx │ │ │ ├── tooltip.tsx │ │ │ └── visually-hidden.tsx │ │ ├── helpers/ │ │ │ ├── component-props.ts │ │ │ ├── extract-margin-props.ts │ │ │ ├── extract-props.ts │ │ │ ├── get-margin-styles.ts │ │ │ ├── get-matching-gray-color.ts │ │ │ ├── get-responsive-styles.ts │ │ │ ├── get-subtree.ts │ │ │ ├── has-own-property.ts │ │ │ ├── index.ts │ │ │ ├── inert.ts │ │ │ ├── input-attributes.ts │ │ │ ├── is-responsive-object.ts │ │ │ ├── map-prop-values.ts │ │ │ ├── merge-styles.ts │ │ │ └── require-react-element.ts │ │ ├── index.ts │ │ ├── props/ │ │ │ ├── as-child.prop.ts │ │ │ ├── color.prop.ts │ │ │ ├── gap.props.ts │ │ │ ├── height.props.ts │ │ │ ├── high-contrast.prop.ts │ │ │ ├── index.ts │ │ │ ├── layout.props.ts │ │ │ ├── leading-trim.prop.ts │ │ │ ├── margin.props.ts │ │ │ ├── padding.props.ts │ │ │ ├── prop-def.ts │ │ │ ├── radius.prop.ts │ │ │ ├── text-align.prop.ts │ │ │ ├── text-wrap.prop.ts │ │ │ ├── truncate.prop.ts │ │ │ ├── weight.prop.ts │ │ │ └── width.props.ts │ │ └── styles/ │ │ ├── breakpoints.css │ │ ├── index.css │ │ ├── layout.css │ │ ├── tokens/ │ │ │ ├── base.css │ │ │ ├── color.css │ │ │ ├── colors/ │ │ │ │ ├── amber.css │ │ │ │ ├── blue.css │ │ │ │ ├── bronze.css │ │ │ │ ├── brown.css │ │ │ │ ├── crimson.css │ │ │ │ ├── cyan.css │ │ │ │ ├── gold.css │ │ │ │ ├── grass.css │ │ │ │ ├── gray.css │ │ │ │ ├── green.css │ │ │ │ ├── indigo.css │ │ │ │ ├── iris.css │ │ │ │ ├── jade.css │ │ │ │ ├── lime.css │ │ │ │ ├── mauve.css │ │ │ │ ├── mint.css │ │ │ │ ├── olive.css │ │ │ │ ├── orange.css │ │ │ │ ├── pink.css │ │ │ │ ├── plum.css │ │ │ │ ├── purple.css │ │ │ │ ├── red.css │ │ │ │ ├── ruby.css │ │ │ │ ├── sage.css │ │ │ │ ├── sand.css │ │ │ │ ├── sky.css │ │ │ │ ├── slate.css │ │ │ │ ├── teal.css │ │ │ │ ├── tomato.css │ │ │ │ ├── violet.css │ │ │ │ └── yellow.css │ │ │ ├── cursor.css │ │ │ ├── index.css │ │ │ ├── layout.css │ │ │ ├── radius.css │ │ │ ├── scaling.css │ │ │ ├── shadow.css │ │ │ ├── space.css │ │ │ └── typography.css │ │ └── utilities/ │ │ ├── align-content.css │ │ ├── align-items.css │ │ ├── align-self.css │ │ ├── display.css │ │ ├── flex-basis.css │ │ ├── flex-direction.css │ │ ├── flex-grow.css │ │ ├── flex-shrink.css │ │ ├── flex-wrap.css │ │ ├── font-weight.css │ │ ├── gap.css │ │ ├── grid-area.css │ │ ├── grid-auto-flow.css │ │ ├── grid-column-end.css │ │ ├── grid-column-start.css │ │ ├── grid-column.css │ │ ├── grid-row-end.css │ │ ├── grid-row-start.css │ │ ├── grid-row.css │ │ ├── grid-template-areas.css │ │ ├── grid-template-columns.css │ │ ├── grid-template-rows.css │ │ ├── height.css │ │ ├── index.css │ │ ├── inset.css │ │ ├── justify-content.css │ │ ├── justify-items.css │ │ ├── justify-self.css │ │ ├── layout.css │ │ ├── leading-trim.css │ │ ├── margin.css │ │ ├── max-height.css │ │ ├── max-width.css │ │ ├── min-height.css │ │ ├── min-width.css │ │ ├── overflow.css │ │ ├── padding.css │ │ ├── position.css │ │ ├── resize.css │ │ ├── table-layout.css │ │ ├── text-align.css │ │ ├── text-wrap.css │ │ ├── truncate.css │ │ ├── vertical-align.css │ │ └── width.css │ └── tsconfig.json ├── pnpm-workspace.yaml ├── release-process.md └── turbo.json
SYMBOL INDEX (577 symbols across 190 files)
FILE: apps/playground/app/(static-theme)/layout.tsx
function Layout (line 3) | function Layout({ children }: LayoutProps<'/'>) {
FILE: apps/playground/app/(static-theme)/theme.tsx
function ThemeImpl (line 8) | function ThemeImpl({
function Themeable (line 31) | function Themeable(props: ThemeProps) {
function Theme (line 48) | function Theme(props: ThemeProps) {
function isAppearance (line 60) | function isAppearance(value: unknown): value is (typeof appearances)[num...
function isAccentColor (line 64) | function isAccentColor(value: unknown): value is (typeof accentColors)[n...
function isRadius (line 68) | function isRadius(value: unknown): value is (typeof radii)[number] {
function isScaling (line 72) | function isScaling(value: unknown): value is (typeof scalings)[number] {
function isString (line 76) | function isString(value: unknown): value is string {
FILE: apps/playground/app/(themeable)/demo/page.tsx
function Demo (line 18) | function Demo() {
FILE: apps/playground/app/(themeable)/demo/users.ts
type User (line 1) | type User = {
function avatar (line 66) | function avatar(id: string, params?: { x?: number; y?: number; zoom?: nu...
FILE: apps/playground/app/(themeable)/ghost-balance/page.tsx
function Ghost (line 20) | function Ghost() {
FILE: apps/playground/app/(themeable)/layout.tsx
function Layout (line 3) | function Layout({ children }: LayoutProps<'/'>) {
FILE: apps/playground/app/(themeable)/sink/_components.tsx
function DropdownMenuContentDemo (line 17) | function DropdownMenuContentDemo(props: React.ComponentProps<typeof Drop...
function ContextMenuContentDemo (line 72) | function ContextMenuContentDemo(props: React.ComponentProps<typeof Conte...
type RightClickAreaProps (line 127) | type RightClickAreaProps = React.ComponentProps<typeof Grid> & {
function RightClickArea (line 130) | function RightClickArea({ size = '2', ...props }: RightClickAreaProps) {
function SelectItemsDemo (line 151) | function SelectItemsDemo() {
function AspectRatioImage (line 174) | function AspectRatioImage() {
function CustomUserIcon (line 184) | function CustomUserIcon() {
function SampleNestedUI (line 201) | function SampleNestedUI({
function PlaygroundForm (line 247) | function PlaygroundForm({
function TableExample (line 291) | function TableExample(
FILE: apps/playground/app/(themeable)/sink/_utils.tsx
function upperFirst (line 1) | function upperFirst(string: string) {
FILE: apps/playground/app/(themeable)/sink/alert-dialog/page.tsx
function AlertDialogPage (line 4) | function AlertDialogPage() {
FILE: apps/playground/app/(themeable)/sink/aspect-ratio/page.tsx
function AspectRatioPage (line 5) | function AspectRatioPage() {
FILE: apps/playground/app/(themeable)/sink/avatar/page.tsx
function AvatarPage (line 8) | function AvatarPage() {
FILE: apps/playground/app/(themeable)/sink/badge/page.tsx
function BadgePage (line 7) | function BadgePage() {
FILE: apps/playground/app/(themeable)/sink/blockquote/page.tsx
function BlockquotePage (line 4) | function BlockquotePage() {
FILE: apps/playground/app/(themeable)/sink/button/page.tsx
function ButtonPage (line 8) | function ButtonPage() {
FILE: apps/playground/app/(themeable)/sink/callout/page.tsx
function CalloutPage (line 8) | function CalloutPage() {
FILE: apps/playground/app/(themeable)/sink/card/page.tsx
function CardPage (line 5) | function CardPage() {
FILE: apps/playground/app/(themeable)/sink/checkbox-cards/page.tsx
function CheckboxCardsPage (line 8) | function CheckboxCardsPage() {
FILE: apps/playground/app/(themeable)/sink/checkbox-group/page.tsx
function CheckboxGroupPage (line 7) | function CheckboxGroupPage() {
FILE: apps/playground/app/(themeable)/sink/checkbox/page.tsx
function CheckboxPage (line 7) | function CheckboxPage() {
FILE: apps/playground/app/(themeable)/sink/code/page.tsx
function CodePage (line 7) | function CodePage() {
FILE: apps/playground/app/(themeable)/sink/container/page.tsx
function ContainerPage (line 4) | function ContainerPage() {
FILE: apps/playground/app/(themeable)/sink/context-menu/page.tsx
function ContextMenuPage (line 6) | function ContextMenuPage() {
FILE: apps/playground/app/(themeable)/sink/cursors/page.tsx
function CursorsPage (line 6) | function CursorsPage() {
FILE: apps/playground/app/(themeable)/sink/data-list/page.tsx
function DataListPage (line 6) | function DataListPage() {
FILE: apps/playground/app/(themeable)/sink/dialog/page.tsx
function DialogPage (line 5) | function DialogPage() {
FILE: apps/playground/app/(themeable)/sink/docs-section.tsx
function DocsSectionHeading (line 3) | function DocsSectionHeading({ children }: { children: React.ReactNode }) {
function DocsSection (line 11) | function DocsSection({ children }: { children: React.ReactNode }) {
function DocsSectionBody (line 19) | function DocsSectionBody({ children }: { children: React.ReactNode }) {
FILE: apps/playground/app/(themeable)/sink/dropdown-menu/page.tsx
function DropdownMenuPage (line 10) | function DropdownMenuPage() {
FILE: apps/playground/app/(themeable)/sink/grid/page.tsx
function GridPage (line 4) | function GridPage() {
FILE: apps/playground/app/(themeable)/sink/heading/page.tsx
function HeadingPage (line 6) | function HeadingPage() {
FILE: apps/playground/app/(themeable)/sink/hide-cursor.tsx
function hideCursor (line 6) | function hideCursor() {
function showCursor (line 9) | function showCursor() {
function HideCursor (line 13) | function HideCursor() {
FILE: apps/playground/app/(themeable)/sink/hover-card/page.tsx
function HoverCardPage (line 4) | function HoverCardPage() {
FILE: apps/playground/app/(themeable)/sink/icon-button/page.tsx
function IconButtonPage (line 8) | function IconButtonPage() {
FILE: apps/playground/app/(themeable)/sink/kbd/page.tsx
function KbdPage (line 5) | function KbdPage() {
FILE: apps/playground/app/(themeable)/sink/layout.tsx
constant NAV_ITEMS (line 19) | const NAV_ITEMS = [
function SinkLayout (line 72) | function SinkLayout({ children }: { children: React.ReactNode }) {
function NavigationMenu (line 160) | function NavigationMenu() {
FILE: apps/playground/app/(themeable)/sink/link/page.tsx
function LinkPage (line 6) | function LinkPage() {
FILE: apps/playground/app/(themeable)/sink/mixed-nested-themes-test/page.tsx
function MixedNestedThemesTest (line 5) | function MixedNestedThemesTest() {
FILE: apps/playground/app/(themeable)/sink/nested-appearances-test/page.tsx
function NestedAppearancesTest (line 5) | function NestedAppearancesTest() {
FILE: apps/playground/app/(themeable)/sink/nested-colors-test/page.tsx
function NestedColorsTest (line 5) | function NestedColorsTest() {
FILE: apps/playground/app/(themeable)/sink/page.tsx
function Sink (line 54) | function Sink() {
FILE: apps/playground/app/(themeable)/sink/playground/page.tsx
function PlaygroundPage (line 6) | function PlaygroundPage() {
FILE: apps/playground/app/(themeable)/sink/pointer-cursors-checkbox.tsx
function PointerCursorsCheckbox (line 5) | function PointerCursorsCheckbox() {
FILE: apps/playground/app/(themeable)/sink/popover/page.tsx
function PopoverPage (line 5) | function PopoverPage() {
FILE: apps/playground/app/(themeable)/sink/progress/page.tsx
function ProgressPage (line 7) | function ProgressPage() {
FILE: apps/playground/app/(themeable)/sink/radio-cards/page.tsx
function RadioCardsPage (line 8) | function RadioCardsPage() {
FILE: apps/playground/app/(themeable)/sink/radio-group/page.tsx
function RadioGroupPage (line 7) | function RadioGroupPage() {
FILE: apps/playground/app/(themeable)/sink/radio/page.tsx
function RadioPage (line 7) | function RadioPage() {
FILE: apps/playground/app/(themeable)/sink/scroll-area/page.tsx
function ScrollAreaPage (line 17) | function ScrollAreaPage() {
FILE: apps/playground/app/(themeable)/sink/segmented-control/page.tsx
function SegmentedControlPage (line 5) | function SegmentedControlPage() {
FILE: apps/playground/app/(themeable)/sink/select/page.tsx
function SelectPage (line 12) | function SelectPage() {
FILE: apps/playground/app/(themeable)/sink/separator/page.tsx
function SeparatorPage (line 5) | function SeparatorPage() {
FILE: apps/playground/app/(themeable)/sink/shadow-tokens/page.tsx
function ShadowTokens (line 4) | function ShadowTokens() {
FILE: apps/playground/app/(themeable)/sink/skeleton/page.tsx
function SkeletonPage (line 30) | function SkeletonPage() {
FILE: apps/playground/app/(themeable)/sink/slider/page.tsx
function SliderPage (line 7) | function SliderPage() {
FILE: apps/playground/app/(themeable)/sink/spinner/page.tsx
function SpinnerPage (line 5) | function SpinnerPage() {
FILE: apps/playground/app/(themeable)/sink/switch/page.tsx
function SwitchPage (line 7) | function SwitchPage() {
FILE: apps/playground/app/(themeable)/sink/tab-nav-demo.tsx
function TabNavDemoImpl (line 7) | function TabNavDemoImpl(props: React.ComponentPropsWithRef<typeof TabNav...
function TabNavDemo (line 42) | function TabNavDemo(props: React.ComponentPropsWithRef<typeof TabNav.Roo...
FILE: apps/playground/app/(themeable)/sink/tab-nav/page.tsx
function TabNavPage (line 7) | function TabNavPage() {
FILE: apps/playground/app/(themeable)/sink/table/page.tsx
function TablePage (line 6) | function TablePage() {
FILE: apps/playground/app/(themeable)/sink/tabs/page.tsx
function TabsPage (line 6) | function TabsPage() {
FILE: apps/playground/app/(themeable)/sink/text-area/page.tsx
function TextAreaPage (line 7) | function TextAreaPage() {
FILE: apps/playground/app/(themeable)/sink/text-field/page.tsx
function TextFieldPage (line 18) | function TextFieldPage() {
FILE: apps/playground/app/(themeable)/sink/text/page.tsx
function TextPage (line 6) | function TextPage() {
FILE: apps/playground/app/(themeable)/sink/tooltip/page.tsx
function TooltipPage (line 4) | function TooltipPage() {
FILE: apps/playground/app/(themeable)/sink/typography/page.tsx
function TypographyPage (line 19) | function TypographyPage() {
FILE: apps/playground/app/(themeable)/snapshot/image-card.tsx
function ImageCard (line 8) | function ImageCard({ id, alt }: { id: string; alt: string }) {
FILE: apps/playground/app/(themeable)/snapshot/page.tsx
function Snapshot (line 18) | function Snapshot() {
function SubmitPhotoDialog (line 231) | function SubmitPhotoDialog({ children }: { children: React.ReactNode }) {
FILE: apps/playground/app/(themeable)/test/appearance/page.tsx
function Test (line 16) | function Test() {
function DocsSection (line 123) | function DocsSection({ title, children }: { title: string; children: Rea...
FILE: apps/playground/app/(themeable)/test/as-child/page.tsx
function Test (line 24) | function Test() {
FILE: apps/playground/app/(themeable)/test/avatar/page.tsx
function Test (line 3) | function Test() {
function CustomUserIcon (line 16) | function CustomUserIcon() {
FILE: apps/playground/app/(themeable)/test/checkbox-card/page.tsx
function Test (line 5) | function Test() {
FILE: apps/playground/app/(themeable)/test/classic-button/page.tsx
function Test (line 6) | function Test() {
FILE: apps/playground/app/(themeable)/test/data-list/page.tsx
function DataListPage (line 20) | function DataListPage() {
FILE: apps/playground/app/(themeable)/test/dialog/page.tsx
function Test (line 4) | function Test() {
FILE: apps/playground/app/(themeable)/test/grid-align-content/page.tsx
function Test (line 4) | function Test() {
FILE: apps/playground/app/(themeable)/test/grid-align-self/page.tsx
function Test (line 3) | function Test() {
FILE: apps/playground/app/(themeable)/test/grid-area/page.tsx
function Test (line 4) | function Test() {
FILE: apps/playground/app/(themeable)/test/grid-justify-items/page.tsx
function Test (line 3) | function Test() {
FILE: apps/playground/app/(themeable)/test/grid-justify-self/page.tsx
function Test (line 3) | function Test() {
FILE: apps/playground/app/(themeable)/test/high-contrast/page.tsx
function Test (line 13) | function Test() {
FILE: apps/playground/app/(themeable)/test/inset/page.tsx
function Test (line 22) | function Test() {
function TableExample (line 237) | function TableExample() {
FILE: apps/playground/app/(themeable)/test/radio-card/page.tsx
function Test (line 6) | function Test() {
FILE: apps/playground/app/(themeable)/test/reset/page.tsx
function Test (line 4) | function Test() {
function ResetChildren (line 190) | function ResetChildren({ children }: { children: React.ReactNode }) {
function RadixLogo (line 194) | function RadixLogo(props: React.ComponentPropsWithoutRef<'svg'>) {
FILE: apps/playground/app/(themeable)/test/responsive/page.tsx
function Test (line 16) | function Test() {
FILE: apps/playground/app/(themeable)/test/skeleton/page.tsx
function Test (line 17) | function Test() {
FILE: apps/playground/app/(themeable)/test/tabnav/(accounts)/page.tsx
function Accounts (line 3) | function Accounts() {
FILE: apps/playground/app/(themeable)/test/tabnav/documents/page.tsx
function Documents (line 3) | function Documents() {
FILE: apps/playground/app/(themeable)/test/tabnav/layout.tsx
function Test (line 5) | function Test({ children }: { children: React.ReactNode }) {
FILE: apps/playground/app/(themeable)/test/tabnav/nav.tsx
function Nav (line 6) | function Nav() {
FILE: apps/playground/app/(themeable)/test/tabnav/settings/page.tsx
function Settings (line 3) | function Settings() {
FILE: apps/playground/app/(themeable)/test/text-wrap/page.tsx
function Test (line 3) | function Test() {
FILE: apps/playground/app/(themeable)/test/textfield/page.tsx
function Test (line 26) | function Test() {
FILE: apps/playground/app/(themeable)/test/webkit-tap-highlight-color/page.tsx
function Test (line 20) | function Test() {
function DropdownMenuContentDemo (line 83) | function DropdownMenuContentDemo(props: React.ComponentProps<typeof Drop...
FILE: apps/playground/app/api/avatar/route.ts
function wait (line 3) | async function wait(ms: number) {
function GET (line 7) | async function GET() {
FILE: apps/playground/app/layout.tsx
function RootLayout (line 11) | function RootLayout({ children }: { children: React.ReactNode }) {
FILE: apps/playground/app/next-theme-provider.tsx
function NextThemeProvider (line 5) | function NextThemeProvider({ children }) {
FILE: apps/playground/components/loading-buttons.tsx
function LoadingButtons (line 9) | function LoadingButtons() {
function mapButtonSizeToIconSize (line 90) | function mapButtonSizeToIconSize(size: (typeof buttonPropDefs.size.value...
function useLoading (line 102) | function useLoading() {
FILE: apps/playground/components/snapshot-logo.tsx
function SnapshotLogo (line 1) | function SnapshotLogo(props: any) {
FILE: apps/playground/css.d.ts
type Properties (line 5) | interface Properties {
FILE: apps/playground/next.config.mjs
method redirects (line 9) | async redirects() {
FILE: packages/radix-ui-themes/postcss-breakpoints.cjs
method Rule (line 24) | Rule(rule) {
function addPrefix (line 76) | function addPrefix(node, prefix) {
FILE: packages/radix-ui-themes/postcss-whitespace.cjs
method Comment (line 4) | Comment(comment) {
method Declaration (line 8) | Declaration(decl) {
method AtRule (line 17) | AtRule(rule) {
method Rule (line 22) | Rule(rule) {
FILE: packages/radix-ui-themes/src/components/_internal/base-button.tsx
type BaseButtonElement (line 19) | type BaseButtonElement = React.ElementRef<'button'>;
type BaseButtonOwnProps (line 20) | type BaseButtonOwnProps = GetPropDefTypes<typeof baseButtonPropDefs>;
type BaseButtonProps (line 21) | interface BaseButtonProps
function renderLoadingButtonContents (line 74) | function renderLoadingButtonContents(children: React.ReactNode, size: Ba...
FILE: packages/radix-ui-themes/src/components/accessible-icon.tsx
type AccessibleIconProps (line 3) | type AccessibleIconProps = AccessibleIconPrimitive.AccessibleIconProps;
FILE: packages/radix-ui-themes/src/components/alert-dialog.tsx
type AlertDialogRootProps (line 19) | interface AlertDialogRootProps extends React.ComponentPropsWithoutRef<
type AlertDialogTriggerElement (line 27) | type AlertDialogTriggerElement = React.ElementRef<typeof AlertDialogPrim...
type AlertDialogTriggerProps (line 28) | interface AlertDialogTriggerProps extends ComponentPropsWithout<
type AlertDialogContentElement (line 41) | type AlertDialogContentElement = React.ElementRef<typeof AlertDialogPrim...
type AlertDialogContentProps (line 42) | interface AlertDialogContentProps
type AlertDialogTitleElement (line 76) | type AlertDialogTitleElement = React.ElementRef<typeof Heading>;
type AlertDialogTitleProps (line 77) | type AlertDialogTitleProps = ComponentPropsWithout<typeof Heading, 'asCh...
type AlertDialogDescriptionElement (line 87) | type AlertDialogDescriptionElement = HTMLParagraphElement;
type AlertDialogDescriptionProps (line 88) | type AlertDialogDescriptionProps = ComponentPropsAs<typeof Text, 'p'>;
type AlertDialogActionElement (line 99) | type AlertDialogActionElement = React.ElementRef<typeof AlertDialogPrimi...
type AlertDialogActionProps (line 100) | interface AlertDialogActionProps extends ComponentPropsWithout<
type AlertDialogCancelElement (line 113) | type AlertDialogCancelElement = React.ElementRef<typeof AlertDialogPrimi...
type AlertDialogCancelProps (line 114) | interface AlertDialogCancelProps extends ComponentPropsWithout<
FILE: packages/radix-ui-themes/src/components/aspect-ratio.tsx
type AspectRatioProps (line 3) | type AspectRatioProps = AspectRatioPrimitive.AspectRatioProps;
FILE: packages/radix-ui-themes/src/components/avatar.tsx
type AvatarProps (line 16) | interface AvatarProps extends MarginProps, AvatarImplProps {}
type AvatarImplElement (line 39) | type AvatarImplElement = React.ElementRef<typeof AvatarPrimitive.Image>;
type AvatarOwnProps (line 40) | type AvatarOwnProps = GetPropDefTypes<typeof avatarPropDefs>;
type AvatarImplProps (line 42) | interface AvatarImplProps
FILE: packages/radix-ui-themes/src/components/badge.tsx
type BadgeElement (line 13) | type BadgeElement = React.ElementRef<'span'>;
type BadgeOwnProps (line 14) | type BadgeOwnProps = GetPropDefTypes<typeof badgePropDefs>;
type BadgeProps (line 15) | interface BadgeProps
FILE: packages/radix-ui-themes/src/components/blockquote.tsx
type BlockquoteElement (line 12) | type BlockquoteElement = React.ElementRef<'blockquote'>;
type BlockQuoteOwnProps (line 13) | type BlockQuoteOwnProps = GetPropDefTypes<typeof blockquotePropDefs>;
type BlockquoteProps (line 14) | interface BlockquoteProps
FILE: packages/radix-ui-themes/src/components/box.props.tsx
type BoxOwnProps (line 41) | type BoxOwnProps = GetPropDefTypes<typeof boxPropDefs & typeof asChildPr...
FILE: packages/radix-ui-themes/src/components/box.tsx
type BoxElement (line 15) | type BoxElement = React.ElementRef<'div'>;
type CommonBoxProps (line 16) | interface CommonBoxProps extends MarginProps, LayoutProps, BoxOwnProps {}
type BoxDivProps (line 17) | type BoxDivProps = { as?: 'div' } & ComponentPropsWithout<'div', Removed...
type BoxSpanProps (line 18) | type BoxSpanProps = { as: 'span' } & ComponentPropsWithout<'span', Remov...
type BoxProps (line 19) | type BoxProps = CommonBoxProps & (BoxSpanProps | BoxDivProps);
FILE: packages/radix-ui-themes/src/components/button.tsx
type ButtonElement (line 6) | type ButtonElement = React.ElementRef<typeof BaseButton>;
type ButtonProps (line 7) | interface ButtonProps extends React.ComponentPropsWithoutRef<typeof Base...
FILE: packages/radix-ui-themes/src/components/callout.tsx
type CalloutRootOwnProps (line 21) | type CalloutRootOwnProps = GetPropDefTypes<typeof calloutRootPropDefs>;
type CalloutContextValue (line 23) | type CalloutContextValue = { size?: CalloutRootOwnProps['size'] };
type CalloutRootElement (line 26) | type CalloutRootElement = React.ElementRef<'div'>;
type CalloutRootProps (line 27) | interface CalloutRootProps
type CalloutIconElement (line 54) | type CalloutIconElement = React.ElementRef<'div'>;
type CalloutIconProps (line 55) | interface CalloutIconProps extends ComponentPropsWithout<'div', RemovedP...
type CalloutTextElement (line 65) | type CalloutTextElement = React.ElementRef<'p'>;
type CalloutTextProps (line 66) | type CalloutTextProps = ComponentPropsAs<typeof Text, 'p'>;
FILE: packages/radix-ui-themes/src/components/card.tsx
type CardElement (line 13) | type CardElement = React.ElementRef<'div'>;
type CardOwnProps (line 14) | type CardOwnProps = GetPropDefTypes<typeof cardPropDefs>;
type CardProps (line 15) | interface CardProps extends ComponentPropsWithout<'div', RemovedProps>, ...
FILE: packages/radix-ui-themes/src/components/checkbox-cards.tsx
constant CHECKBOX_CARD_GROUP_NAME (line 20) | const CHECKBOX_CARD_GROUP_NAME = 'CheckboxCards';
type ScopedProps (line 22) | type ScopedProps<P> = P & { __scopeCheckboxCards?: Context.Scope };
type CheckboxCardsContextValue (line 28) | type CheckboxCardsContextValue = {
type CheckboxCardsRootElement (line 36) | type CheckboxCardsRootElement = React.ElementRef<typeof CheckboxGroupPri...
type CheckboxCardsRootOwnProps (line 37) | type CheckboxCardsRootOwnProps = GetPropDefTypes<typeof checkboxCardsRoo...
type CheckboxCardsRootProps (line 38) | interface CheckboxCardsRootProps
type CheckboxCardsItemElement (line 75) | type CheckboxCardsItemElement = React.ElementRef<typeof CheckboxGroupPri...
type CheckboxCardsItemProps (line 76) | interface CheckboxCardsItemProps
FILE: packages/radix-ui-themes/src/components/checkbox-group.primitive.tsx
constant CHECKBOX_GROUP_NAME (line 18) | const CHECKBOX_GROUP_NAME = 'CheckboxGroup';
type ScopedProps (line 20) | type ScopedProps<P> = P & { __scopeCheckboxGroup?: Context.Scope };
type CheckboxGroupContextValue (line 28) | type CheckboxGroupContextValue = {
type CheckboxGroupElement (line 40) | type CheckboxGroupElement = React.ElementRef<typeof Primitive.div>;
type RovingFocusGroupProps (line 41) | type RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof Rovin...
type PrimitiveDivProps (line 42) | type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive...
type CheckboxGroupProps (line 43) | interface CheckboxGroupProps extends PrimitiveDivProps {
constant ITEM_NAME (line 125) | const ITEM_NAME = 'CheckboxGroupItem';
type CheckboxGroupItemElement (line 127) | type CheckboxGroupItemElement = React.ElementRef<typeof CheckboxPrimitiv...
type CheckboxProps (line 128) | type CheckboxProps = React.ComponentPropsWithoutRef<typeof CheckboxPrimi...
type CheckboxGroupItemProps (line 129) | interface CheckboxGroupItemProps extends Omit<
constant INDICATOR_NAME (line 176) | const INDICATOR_NAME = 'CheckboxGroupIndicator';
type CheckboxGroupIndicatorElement (line 178) | type CheckboxGroupIndicatorElement = React.ElementRef<typeof CheckboxPri...
type CheckboxIndicatorProps (line 179) | type CheckboxIndicatorProps = React.ComponentPropsWithoutRef<typeof Chec...
type CheckboxGroupIndicatorProps (line 180) | interface CheckboxGroupIndicatorProps extends CheckboxIndicatorProps {}
FILE: packages/radix-ui-themes/src/components/checkbox-group.tsx
constant CHECKBOX_GROUP_NAME (line 19) | const CHECKBOX_GROUP_NAME = 'CheckboxGroup';
type ScopedProps (line 21) | type ScopedProps<P> = P & { __scopeCheckboxGroup?: Context.Scope };
type CheckboxGroupRootOwnProps (line 27) | type CheckboxGroupRootOwnProps = GetPropDefTypes<typeof checkboxGroupRoo...
type CheckboxGroupContextValue (line 28) | type CheckboxGroupContextValue = CheckboxGroupRootOwnProps;
type CheckboxGroupRootElement (line 33) | type CheckboxGroupRootElement = React.ElementRef<typeof CheckboxGroupPri...
type CheckboxGroupRootProps (line 34) | interface CheckboxGroupRootProps
type CheckboxGroupItemElement (line 75) | type CheckboxGroupItemElement = React.ElementRef<typeof CheckboxGroupPri...
type CheckboxGroupItemProps (line 76) | interface CheckboxGroupItemProps
type CheckboxGroupItemCheckboxElement (line 116) | type CheckboxGroupItemCheckboxElement = React.ElementRef<typeof Checkbox...
type CheckboxGroupItemCheckboxProps (line 117) | interface CheckboxGroupItemCheckboxProps extends ComponentPropsWithout<
FILE: packages/radix-ui-themes/src/components/checkbox.tsx
type CheckboxElement (line 17) | type CheckboxElement = React.ElementRef<typeof CheckboxPrimitive.Root>;
type CheckboxOwnProps (line 18) | type CheckboxOwnProps = GetPropDefTypes<typeof checkboxPropDefs>;
type CheckboxProps (line 19) | interface CheckboxProps
FILE: packages/radix-ui-themes/src/components/code.tsx
type CodeElement (line 13) | type CodeElement = React.ElementRef<'code'>;
type CodeOwnProps (line 14) | type CodeOwnProps = GetPropDefTypes<typeof codePropDefs>;
type CodeProps (line 15) | interface CodeProps
FILE: packages/radix-ui-themes/src/components/container.props.tsx
function parseDisplayValue (line 72) | function parseDisplayValue(value: string) {
function parseAlignValue (line 76) | function parseAlignValue(value: string) {
type ContainerOwnProps (line 81) | type ContainerOwnProps = GetPropDefTypes<typeof containerPropDefs & type...
FILE: packages/radix-ui-themes/src/components/container.tsx
type ContainerElement (line 18) | type ContainerElement = React.ElementRef<'div'>;
type ContainerProps (line 19) | interface ContainerProps
FILE: packages/radix-ui-themes/src/components/context-menu.tsx
type ContextMenuRootProps (line 22) | interface ContextMenuRootProps extends React.ComponentPropsWithoutRef<
type ContextMenuTriggerElement (line 30) | type ContextMenuTriggerElement = React.ElementRef<typeof ContextMenuPrim...
type ContextMenuTriggerProps (line 31) | interface ContextMenuTriggerProps extends ComponentPropsWithout<
type ContextMenuContentOwnProps (line 44) | type ContextMenuContentOwnProps = GetPropDefTypes<typeof contextMenuCont...
type ContextMenuContentContextValue (line 45) | type ContextMenuContentContextValue = ContextMenuContentOwnProps;
type ContextMenuContentElement (line 47) | type ContextMenuContentElement = React.ElementRef<typeof ContextMenuPrim...
type ContextMenuContentProps (line 48) | interface ContextMenuContentProps
type ContextMenuLabelElement (line 104) | type ContextMenuLabelElement = React.ElementRef<typeof ContextMenuPrimit...
type ContextMenuLabelProps (line 105) | interface ContextMenuLabelProps extends ComponentPropsWithout<
type ContextMenuItemElement (line 121) | type ContextMenuItemElement = React.ElementRef<typeof ContextMenuPrimiti...
type ContextMenuItemOwnProps (line 122) | type ContextMenuItemOwnProps = GetPropDefTypes<typeof contextMenuItemPro...
type ContextMenuItemProps (line 123) | interface ContextMenuItemProps
type ContextMenuGroupElement (line 151) | type ContextMenuGroupElement = React.ElementRef<typeof ContextMenuPrimit...
type ContextMenuGroupProps (line 152) | interface ContextMenuGroupProps extends ComponentPropsWithout<
type ContextMenuRadioGroupElement (line 168) | type ContextMenuRadioGroupElement = React.ElementRef<typeof ContextMenuP...
type ContextMenuRadioGroupProps (line 169) | interface ContextMenuRadioGroupProps extends ComponentPropsWithout<
type ContextMenuRadioItemElement (line 186) | type ContextMenuRadioItemElement = React.ElementRef<typeof ContextMenuPr...
type ContextMenuRadioItemOwnProps (line 187) | type ContextMenuRadioItemOwnProps = GetPropDefTypes<typeof contextMenuRa...
type ContextMenuRadioItemProps (line 188) | interface ContextMenuRadioItemProps
type ContextMenuCheckboxItemElement (line 225) | type ContextMenuCheckboxItemElement = React.ElementRef<typeof ContextMen...
type ContextMenuCheckboxItemOwnProps (line 226) | type ContextMenuCheckboxItemOwnProps = GetPropDefTypes<typeof contextMen...
type ContextMenuCheckboxItemProps (line 227) | interface ContextMenuCheckboxItemProps
type ContextMenuSubProps (line 266) | interface ContextMenuSubProps extends ComponentPropsWithout<
type ContextMenuSubTriggerElement (line 275) | type ContextMenuSubTriggerElement = React.ElementRef<typeof ContextMenuP...
type ContextMenuSubTriggerProps (line 276) | interface ContextMenuSubTriggerProps extends ComponentPropsWithout<
type ContextMenuSubContentElement (line 307) | type ContextMenuSubContentElement = React.ElementRef<typeof ContextMenuP...
type ContextMenuSubContentProps (line 308) | interface ContextMenuSubContentProps extends ComponentPropsWithout<
type ContextMenuSeparatorElement (line 356) | type ContextMenuSeparatorElement = React.ElementRef<typeof ContextMenuPr...
type ContextMenuSeparatorProps (line 357) | interface ContextMenuSeparatorProps extends ComponentPropsWithout<
FILE: packages/radix-ui-themes/src/components/data-list.tsx
type DataListRootElement (line 17) | type DataListRootElement = HTMLDListElement;
type DataListRootOwnProps (line 18) | type DataListRootOwnProps = GetPropDefTypes<typeof dataListRootPropDefs>;
type DataListRootProps (line 19) | interface DataListRootProps
type DataListItemElement (line 41) | type DataListItemElement = HTMLDivElement;
type DataListItemOwnProps (line 42) | type DataListItemOwnProps = GetPropDefTypes<typeof dataListItemPropDefs>;
type DataListItemProps (line 43) | interface DataListItemProps
type DataListLabelElement (line 55) | type DataListLabelElement = React.ElementRef<'dt'>;
type DataListLabelOwnProps (line 56) | type DataListLabelOwnProps = GetPropDefTypes<typeof dataListLabelPropDefs>;
type DataListLabelProps (line 57) | interface DataListLabelProps
type DataListValueElement (line 74) | type DataListValueElement = React.ElementRef<'dd'>;
type DataListValueProps (line 75) | interface DataListValueProps extends ComponentPropsWithout<'dd', Removed...
FILE: packages/radix-ui-themes/src/components/dialog.props.tsx
type DialogContentOwnProps (line 38) | type DialogContentOwnProps = GetPropDefTypes<
FILE: packages/radix-ui-themes/src/components/dialog.tsx
type DialogRootProps (line 19) | interface DialogRootProps extends ComponentPropsWithout<typeof DialogPri...
type DialogTriggerElement (line 23) | type DialogTriggerElement = React.ElementRef<typeof DialogPrimitive.Trig...
type DialogTriggerProps (line 24) | interface DialogTriggerProps extends ComponentPropsWithout<
type DialogContentElement (line 37) | type DialogContentElement = React.ElementRef<typeof DialogPrimitive.Cont...
type DialogContentProps (line 38) | interface DialogContentProps
type DialogTitleElement (line 72) | type DialogTitleElement = React.ElementRef<typeof Heading>;
type DialogTitleProps (line 73) | type DialogTitleProps = ComponentPropsWithout<typeof Heading, 'asChild'>;
type DialogDescriptionElement (line 83) | type DialogDescriptionElement = HTMLParagraphElement;
type DialogDescriptionProps (line 84) | type DialogDescriptionProps = ComponentPropsAs<typeof Text, 'p'>;
type DialogCloseElement (line 94) | type DialogCloseElement = React.ElementRef<typeof DialogPrimitive.Close>;
type DialogCloseProps (line 95) | interface DialogCloseProps extends ComponentPropsWithout<
FILE: packages/radix-ui-themes/src/components/dropdown-menu.tsx
type DropdownMenuRootProps (line 23) | interface DropdownMenuRootProps extends React.ComponentPropsWithoutRef<
type DropdownMenuTriggerElement (line 31) | type DropdownMenuTriggerElement = React.ElementRef<typeof DropdownMenuPr...
type DropdownMenuTriggerProps (line 32) | interface DropdownMenuTriggerProps extends ComponentPropsWithout<
type DropdownMenuContentOwnProps (line 45) | type DropdownMenuContentOwnProps = GetPropDefTypes<typeof dropdownMenuCo...
type DropdownMenuContentContextValue (line 46) | type DropdownMenuContentContextValue = DropdownMenuContentOwnProps;
type DropdownMenuContentElement (line 48) | type DropdownMenuContentElement = React.ElementRef<typeof DropdownMenuPr...
type DropdownMenuContentProps (line 49) | interface DropdownMenuContentProps
type DropdownMenuLabelElement (line 106) | type DropdownMenuLabelElement = React.ElementRef<typeof DropdownMenuPrim...
type DropdownMenuLabelProps (line 107) | interface DropdownMenuLabelProps extends ComponentPropsWithout<
type DropdownMenuItemElement (line 123) | type DropdownMenuItemElement = React.ElementRef<typeof DropdownMenuPrimi...
type DropdownMenuItemOwnProps (line 124) | type DropdownMenuItemOwnProps = GetPropDefTypes<typeof dropdownMenuItemP...
type DropdownMenuItemProps (line 125) | interface DropdownMenuItemProps
type DropdownMenuGroupElement (line 153) | type DropdownMenuGroupElement = React.ElementRef<typeof DropdownMenuPrim...
type DropdownMenuGroupProps (line 154) | interface DropdownMenuGroupProps extends ComponentPropsWithout<
type DropdownMenuRadioGroupElement (line 170) | type DropdownMenuRadioGroupElement = React.ElementRef<typeof DropdownMen...
type DropdownMenuRadioGroupProps (line 171) | interface DropdownMenuRadioGroupProps extends ComponentPropsWithout<
type DropdownMenuRadioItemElement (line 188) | type DropdownMenuRadioItemElement = React.ElementRef<typeof DropdownMenu...
type DropdownMenuRadioItemOwnProps (line 189) | type DropdownMenuRadioItemOwnProps = GetPropDefTypes<typeof dropdownMenu...
type DropdownMenuRadioItemProps (line 190) | interface DropdownMenuRadioItemProps
type DropdownMenuCheckboxItemElement (line 227) | type DropdownMenuCheckboxItemElement = React.ElementRef<typeof DropdownM...
type DropdownMenuCheckboxItemOwnProps (line 228) | type DropdownMenuCheckboxItemOwnProps = GetPropDefTypes<typeof dropdownM...
type DropdownMenuCheckboxItemProps (line 229) | interface DropdownMenuCheckboxItemProps
type DropdownMenuSubProps (line 268) | interface DropdownMenuSubProps extends React.ComponentPropsWithoutRef<
type DropdownMenuSubTriggerElement (line 276) | type DropdownMenuSubTriggerElement = React.ElementRef<typeof DropdownMen...
type DropdownMenuSubTriggerProps (line 277) | interface DropdownMenuSubTriggerProps extends ComponentPropsWithout<
type DropdownMenuSubContentElement (line 308) | type DropdownMenuSubContentElement = React.ElementRef<typeof DropdownMen...
type DropdownMenuSubContentProps (line 309) | interface DropdownMenuSubContentProps extends ComponentPropsWithout<
type DropdownMenuSeparatorElement (line 357) | type DropdownMenuSeparatorElement = React.ElementRef<typeof DropdownMenu...
type DropdownMenuSeparatorProps (line 358) | interface DropdownMenuSeparatorProps extends ComponentPropsWithout<
FILE: packages/radix-ui-themes/src/components/em.tsx
type EmElement (line 11) | type EmElement = React.ElementRef<'em'>;
type EmOwnProps (line 12) | type EmOwnProps = GetPropDefTypes<typeof emPropDefs>;
type EmProps (line 13) | interface EmProps extends ComponentPropsWithout<'em', RemovedProps>, EmO...
FILE: packages/radix-ui-themes/src/components/flex.props.tsx
function parseJustifyValue (line 119) | function parseJustifyValue(value: string) {
type FlexOwnProps (line 124) | type FlexOwnProps = GetPropDefTypes<
FILE: packages/radix-ui-themes/src/components/flex.tsx
type FlexElement (line 15) | type FlexElement = React.ElementRef<'div'>;
type CommonFlexProps (line 16) | interface CommonFlexProps extends MarginProps, LayoutProps, FlexOwnProps {}
type FlexDivProps (line 17) | type FlexDivProps = { as?: 'div' } & ComponentPropsWithout<'div', Remove...
type FlexSpanProps (line 18) | type FlexSpanProps = { as: 'span' } & ComponentPropsWithout<'span', Remo...
type FlexProps (line 19) | type FlexProps = CommonFlexProps & (FlexSpanProps | FlexDivProps);
FILE: packages/radix-ui-themes/src/components/grid.props.tsx
function parseGridValue (line 213) | function parseGridValue(value: string): string {
function parseJustifyValue (line 221) | function parseJustifyValue(value: string) {
function parseAlignContentValue (line 225) | function parseAlignContentValue(value: string) {
type GridOwnProps (line 239) | type GridOwnProps = GetPropDefTypes<typeof gridPropDefs & typeof asChild...
FILE: packages/radix-ui-themes/src/components/grid.tsx
type GridElement (line 15) | type GridElement = React.ElementRef<'div'>;
type CommonGridProps (line 16) | interface CommonGridProps extends MarginProps, LayoutProps, GridOwnProps {}
type GridDivProps (line 17) | type GridDivProps = { as?: 'div' } & ComponentPropsWithout<'div', Remove...
type GridSpanProps (line 18) | type GridSpanProps = { as: 'span' } & ComponentPropsWithout<'span', Remo...
type GridProps (line 19) | type GridProps = CommonGridProps & (GridSpanProps | GridDivProps);
FILE: packages/radix-ui-themes/src/components/heading.tsx
type HeadingElement (line 13) | type HeadingElement = React.ElementRef<'h1'>;
type HeadingOwnProps (line 14) | type HeadingOwnProps = GetPropDefTypes<typeof headingPropDefs>;
type HeadingProps (line 15) | interface HeadingProps
FILE: packages/radix-ui-themes/src/components/hover-card.props.tsx
type HoverCardContentOwnProps (line 29) | type HoverCardContentOwnProps = GetPropDefTypes<
FILE: packages/radix-ui-themes/src/components/hover-card.tsx
type HoverCardRootProps (line 13) | interface HoverCardRootProps extends React.ComponentPropsWithoutRef<
type HoverCardTriggerElement (line 21) | type HoverCardTriggerElement = React.ElementRef<typeof HoverCardPrimitiv...
type HoverCardTriggerProps (line 22) | interface HoverCardTriggerProps extends ComponentPropsWithout<
type HoverCardContentElement (line 40) | type HoverCardContentElement = React.ElementRef<typeof HoverCardPrimitiv...
type HoverCardContentProps (line 41) | interface HoverCardContentProps
FILE: packages/radix-ui-themes/src/components/icon-button.tsx
type IconButtonElement (line 6) | type IconButtonElement = React.ElementRef<typeof BaseButton>;
type IconButtonProps (line 7) | interface IconButtonProps extends React.ComponentPropsWithoutRef<typeof ...
FILE: packages/radix-ui-themes/src/components/icons.tsx
type IconElement (line 5) | type IconElement = React.ElementRef<'svg'>;
type IconProps (line 6) | interface IconProps extends ComponentPropsWithout<'svg', RemovedProps | ...
FILE: packages/radix-ui-themes/src/components/inset.props.tsx
function parsePaddingValue (line 86) | function parsePaddingValue(value: string) {
FILE: packages/radix-ui-themes/src/components/inset.tsx
type InsetElement (line 13) | type InsetElement = React.ElementRef<'div'>;
type InsetOwnProps (line 14) | type InsetOwnProps = GetPropDefTypes<typeof insetPropDefs>;
type InsetProps (line 15) | interface InsetProps
FILE: packages/radix-ui-themes/src/components/kbd.tsx
type KbdElement (line 13) | type KbdElement = React.ElementRef<'kbd'>;
type KbdOwnProps (line 14) | type KbdOwnProps = GetPropDefTypes<typeof kbdPropDefs>;
type KbdProps (line 15) | interface KbdProps extends ComponentPropsWithout<'kbd', RemovedProps>, M...
FILE: packages/radix-ui-themes/src/components/link.tsx
type LinkElement (line 12) | type LinkElement = React.ElementRef<'a'>;
type LinkOwnProps (line 13) | type LinkOwnProps = GetPropDefTypes<typeof linkPropDefs>;
type LinkProps (line 14) | interface LinkProps extends ComponentPropsWithout<'a', RemovedProps>, Ma...
FILE: packages/radix-ui-themes/src/components/popover.props.tsx
type PopoverContentOwnProps (line 29) | type PopoverContentOwnProps = GetPropDefTypes<
FILE: packages/radix-ui-themes/src/components/popover.tsx
type PopoverRootProps (line 13) | interface PopoverRootProps extends React.ComponentPropsWithoutRef<typeof...
type PopoverTriggerElement (line 19) | type PopoverTriggerElement = React.ElementRef<typeof PopoverPrimitive.Tr...
type PopoverTriggerProps (line 20) | interface PopoverTriggerProps extends ComponentPropsWithout<
type PopoverContentElement (line 33) | type PopoverContentElement = React.ElementRef<typeof PopoverPrimitive.Co...
type PopoverContentProps (line 34) | interface PopoverContentProps
type PopoverCloseElement (line 64) | type PopoverCloseElement = React.ElementRef<typeof PopoverPrimitive.Close>;
type PopoverCloseProps (line 65) | interface PopoverCloseProps extends ComponentPropsWithout<
type PopoverAnchorElement (line 78) | type PopoverAnchorElement = React.ElementRef<typeof PopoverPrimitive.Anc...
type PopoverAnchorProps (line 79) | interface PopoverAnchorProps extends React.ComponentPropsWithoutRef<
FILE: packages/radix-ui-themes/src/components/portal.tsx
type PortalProps (line 4) | type PortalProps = PortalPrimitive.PortalProps;
FILE: packages/radix-ui-themes/src/components/progress.tsx
type ProgressElement (line 14) | type ProgressElement = React.ElementRef<typeof ProgressPrimitive.Root>;
type ProgressOwnProps (line 15) | type ProgressOwnProps = GetPropDefTypes<typeof progressPropDefs>;
type ProgressProps (line 16) | interface ProgressProps
FILE: packages/radix-ui-themes/src/components/quote.tsx
type QuoteElement (line 11) | type QuoteElement = React.ElementRef<'q'>;
type QuoteOwnProps (line 12) | type QuoteOwnProps = GetPropDefTypes<typeof quotePropDefs>;
type QuoteProps (line 13) | interface QuoteProps extends ComponentPropsWithout<'q', RemovedProps>, Q...
FILE: packages/radix-ui-themes/src/components/radio-cards.tsx
type RadioCardsRootElement (line 14) | type RadioCardsRootElement = React.ElementRef<typeof RadioGroupPrimitive...
type RadioCardsRootOwnProps (line 15) | type RadioCardsRootOwnProps = GetPropDefTypes<typeof radioCardsRootPropD...
type RadioCardsRootProps (line 16) | interface RadioCardsRootProps
type RadioCardsItemElement (line 42) | type RadioCardsItemElement = React.ElementRef<typeof RadioGroupPrimitive...
type RadioCardsItemProps (line 43) | interface RadioCardsItemProps
FILE: packages/radix-ui-themes/src/components/radio-group.tsx
constant RADIO_GROUP_NAME (line 17) | const RADIO_GROUP_NAME = 'RadioGroup';
type ScopedProps (line 19) | type ScopedProps<P> = P & { __scopeRadioGroup?: Context.Scope };
type RadioGroupRootOwnProps (line 25) | type RadioGroupRootOwnProps = GetPropDefTypes<typeof radioGroupRootPropD...
type RadioGroupContextValue (line 26) | type RadioGroupContextValue = RadioGroupRootOwnProps;
type RadioGroupRootElement (line 31) | type RadioGroupRootElement = React.ElementRef<typeof RadioGroupPrimitive...
type RadioGroupRootProps (line 32) | interface RadioGroupRootProps
type RadioGroupItemElement (line 70) | type RadioGroupItemElement = React.ElementRef<typeof RadioGroupItemRadio>;
type RadioGroupItemProps (line 71) | interface RadioGroupItemProps
type RadioGroupItemRadioElement (line 111) | type RadioGroupItemRadioElement = React.ElementRef<typeof RadioGroupPrim...
type RadioGroupItemRadioProps (line 112) | interface RadioGroupItemRadioProps extends React.ComponentPropsWithoutRef<
FILE: packages/radix-ui-themes/src/components/radio.tsx
type RadioElement (line 16) | type RadioElement = React.ElementRef<'input'>;
type RadioOwnProps (line 17) | type RadioOwnProps = GetPropDefTypes<typeof radioPropDefs> & {
type RadioInputProps (line 21) | type RadioInputProps = ComponentPropsWithout<
type RadioProps (line 25) | interface RadioProps extends RadioInputProps, MarginProps, RadioOwnProps {}
FILE: packages/radix-ui-themes/src/components/reset.tsx
type ResetProps (line 9) | interface ResetProps extends ComponentPropsWithout<typeof Slot.Root, Rem...
FILE: packages/radix-ui-themes/src/components/scroll-area.tsx
type ScrollAreaElement (line 16) | type ScrollAreaElement = React.ElementRef<typeof ScrollAreaPrimitive.Vie...
type ScrollAreaOwnProps (line 17) | type ScrollAreaOwnProps = GetPropDefTypes<typeof scrollAreaPropDefs>;
type ScrollAreaProps (line 18) | interface ScrollAreaProps
FILE: packages/radix-ui-themes/src/components/section.props.tsx
function parseDisplayValue (line 55) | function parseDisplayValue(value: string) {
type SectionOwnProps (line 60) | type SectionOwnProps = GetPropDefTypes<typeof sectionPropDefs & typeof a...
FILE: packages/radix-ui-themes/src/components/section.tsx
type SectionElement (line 15) | type SectionElement = React.ElementRef<'div'>;
type SectionProps (line 16) | interface SectionProps
FILE: packages/radix-ui-themes/src/components/segmented-control.tsx
type SegmentedControlRootOwnProps (line 16) | type SegmentedControlRootOwnProps = GetPropDefTypes<typeof segmentedCont...
type SegmentedControlRootProps (line 18) | interface SegmentedControlRootProps
type SegmentedControlItemOwnProps (line 72) | interface SegmentedControlItemOwnProps {
type SegmentedControlItemProps (line 76) | interface SegmentedControlItemProps
FILE: packages/radix-ui-themes/src/components/select.tsx
type SelectRootOwnProps (line 21) | type SelectRootOwnProps = GetPropDefTypes<typeof selectRootPropDefs>;
type SelectContextValue (line 23) | type SelectContextValue = SelectRootOwnProps;
type SelectRootProps (line 26) | interface SelectRootProps extends SelectPrimitive.SelectProps, SelectCon...
type SelectTriggerElement (line 39) | type SelectTriggerElement = React.ElementRef<typeof SelectPrimitive.Trig...
type SelectTriggerOwnProps (line 40) | type SelectTriggerOwnProps = GetPropDefTypes<typeof selectTriggerPropDefs>;
type SelectTriggerProps (line 41) | interface SelectTriggerProps
type SelectContentElement (line 79) | type SelectContentElement = React.ElementRef<typeof SelectPrimitive.Cont...
type SelectContentOwnProps (line 80) | type SelectContentOwnProps = GetPropDefTypes<typeof selectContentPropDefs>;
type SelectContentProps (line 81) | interface SelectContentProps
type SelectItemElement (line 138) | type SelectItemElement = React.ElementRef<typeof SelectPrimitive.Item>;
type SelectItemProps (line 139) | interface SelectItemProps extends ComponentPropsWithout<
type SelectGroupElement (line 161) | type SelectGroupElement = React.ElementRef<typeof SelectPrimitive.Group>;
type SelectGroupProps (line 162) | interface SelectGroupProps extends ComponentPropsWithout<
type SelectLabelElement (line 178) | type SelectLabelElement = React.ElementRef<typeof SelectPrimitive.Label>;
type SelectLabelProps (line 179) | interface SelectLabelProps extends ComponentPropsWithout<
type SelectSeparatorElement (line 195) | type SelectSeparatorElement = React.ElementRef<typeof SelectPrimitive.Se...
type SelectSeparatorProps (line 196) | interface SelectSeparatorProps extends ComponentPropsWithout<
FILE: packages/radix-ui-themes/src/components/separator.tsx
type SeparatorElement (line 12) | type SeparatorElement = React.ElementRef<'span'>;
type SeparatorOwnProps (line 13) | type SeparatorOwnProps = GetPropDefTypes<typeof separatorPropDefs>;
type SeparatorProps (line 14) | interface SeparatorProps
FILE: packages/radix-ui-themes/src/components/skeleton.tsx
type SkeletonElement (line 14) | type SkeletonElement = React.ElementRef<'span'>;
type SkeletonOwnProps (line 15) | type SkeletonOwnProps = GetPropDefTypes<typeof skeletonPropDefs>;
type SkeletonProps (line 16) | interface SkeletonProps
FILE: packages/radix-ui-themes/src/components/slider.tsx
type SliderElement (line 13) | type SliderElement = React.ElementRef<typeof SliderPrimitive.Root>;
type SliderOwnProps (line 14) | type SliderOwnProps = GetPropDefTypes<typeof sliderPropDefs>;
type SliderProps (line 15) | interface SliderProps
FILE: packages/radix-ui-themes/src/components/spinner.tsx
type SpinnerElement (line 13) | type SpinnerElement = React.ElementRef<'span'>;
type SpinnerOwnProps (line 14) | type SpinnerOwnProps = GetPropDefTypes<typeof spinnerPropDefs>;
type SpinnerProps (line 15) | interface SpinnerProps
FILE: packages/radix-ui-themes/src/components/strong.tsx
type StrongElement (line 11) | type StrongElement = React.ElementRef<'strong'>;
type StrongOwnProps (line 12) | type StrongOwnProps = GetPropDefTypes<typeof strongPropDefs>;
type StrongProps (line 13) | interface StrongProps extends ComponentPropsWithout<'strong', RemovedPro...
FILE: packages/radix-ui-themes/src/components/switch.tsx
type SwitchElement (line 13) | type SwitchElement = React.ElementRef<typeof SwitchPrimitive.Root>;
type SwitchOwnProps (line 14) | type SwitchOwnProps = GetPropDefTypes<typeof switchPropDefs>;
type SwitchProps (line 15) | interface SwitchProps
FILE: packages/radix-ui-themes/src/components/tab-nav.tsx
type TabNavRootElement (line 15) | type TabNavRootElement = React.ElementRef<typeof NavigationMenu.Root>;
type TabNavRootElementProps (line 16) | type TabNavRootElementProps = ComponentPropsWithout<'nav', RemovedProps>;
type TabNavOwnProps (line 17) | type TabNavOwnProps = GetPropDefTypes<typeof tabNavRootPropDefs>;
type TabNavRootProps (line 18) | interface TabNavRootProps
type TabNavLinkElement (line 47) | type TabNavLinkElement = React.ElementRef<typeof NavigationMenu.Link>;
type TabNavLinkOwnProps (line 48) | type TabNavLinkOwnProps = GetPropDefTypes<typeof tabNavLinkPropDefs>;
type TabNavLinkProps (line 49) | interface TabNavLinkProps
FILE: packages/radix-ui-themes/src/components/table.props.tsx
function parseAlignValue (line 50) | function parseAlignValue(value: string) {
function parseJustifyValue (line 75) | function parseJustifyValue(value: string) {
FILE: packages/radix-ui-themes/src/components/table.tsx
type TableRootElement (line 14) | type TableRootElement = React.ElementRef<'div'>;
type TableRootOwnProps (line 15) | type TableRootOwnProps = GetPropDefTypes<typeof tableRootPropDefs>;
type TableRootProps (line 16) | interface TableRootProps
type TableHeaderElement (line 40) | type TableHeaderElement = React.ElementRef<'thead'>;
type TableHeaderProps (line 41) | interface TableHeaderProps extends ComponentPropsWithout<'thead', Remove...
type TableBodyElement (line 49) | type TableBodyElement = React.ElementRef<'tbody'>;
type TableBodyProps (line 50) | interface TableBodyProps extends ComponentPropsWithout<'tbody', RemovedP...
type TableRowElement (line 58) | type TableRowElement = React.ElementRef<'tr'>;
type TableRowOwnProps (line 59) | type TableRowOwnProps = GetPropDefTypes<typeof tableRowPropDefs>;
type TableRowProps (line 60) | interface TableRowProps extends ComponentPropsWithout<'tr', RemovedProps...
type TableCellElement (line 67) | type TableCellElement = React.ElementRef<'td'>;
type TableCellOwnProps (line 68) | type TableCellOwnProps = GetPropDefTypes<typeof tableCellPropDefs>;
type TableCellProps (line 69) | interface TableCellProps
type TableColumnHeaderCellElement (line 77) | type TableColumnHeaderCellElement = React.ElementRef<'th'>;
type TableColumnHeaderCellProps (line 78) | interface TableColumnHeaderCellProps
type TableRowHeaderCellElement (line 96) | type TableRowHeaderCellElement = React.ElementRef<'th'>;
type TableRowHeaderCellProps (line 97) | interface TableRowHeaderCellProps
FILE: packages/radix-ui-themes/src/components/tabs.tsx
type TabsRootElement (line 14) | type TabsRootElement = React.ElementRef<typeof TabsPrimitive.Root>;
type TabsRootOwnProps (line 15) | type TabsRootOwnProps = GetPropDefTypes<typeof tabsRootPropDefs>;
type TabsRootProps (line 16) | interface TabsRootProps
type TabsListElement (line 33) | type TabsListElement = React.ElementRef<typeof TabsPrimitive.List>;
type TabsListOwnProps (line 34) | type TabsListOwnProps = GetPropDefTypes<typeof tabsListPropDefs>;
type TabsListProps (line 35) | interface TabsListProps
type TabsTriggerElement (line 54) | type TabsTriggerElement = React.ElementRef<typeof TabsPrimitive.Trigger>;
type TabsTriggerProps (line 55) | interface TabsTriggerProps extends ComponentPropsWithout<
type TabsContentElement (line 79) | type TabsContentElement = React.ElementRef<typeof TabsPrimitive.Content>;
type TabsContentOwnProps (line 80) | type TabsContentOwnProps = GetPropDefTypes<typeof tabsContentPropDefs>;
type TabsContentProps (line 81) | interface TabsContentProps
FILE: packages/radix-ui-themes/src/components/text-area.tsx
type TextAreaElement (line 12) | type TextAreaElement = React.ElementRef<'textarea'>;
type TextAreaOwnProps (line 13) | type TextAreaOwnProps = GetPropDefTypes<typeof textAreaPropDefs> & {
type TextAreaProps (line 17) | interface TextAreaProps
FILE: packages/radix-ui-themes/src/components/text-field.tsx
type TextFieldRootElement (line 16) | type TextFieldRootElement = React.ElementRef<'input'>;
type TextFieldRootOwnProps (line 17) | type TextFieldRootOwnProps = GetPropDefTypes<typeof textFieldRootPropDef...
type TextFieldInputProps (line 35) | type TextFieldInputProps = ComponentPropsWithout<
type TextFieldRootProps (line 39) | interface TextFieldRootProps extends TextFieldInputProps, MarginProps, T...
type TextFieldSlotElement (line 92) | type TextFieldSlotElement = React.ElementRef<'div'>;
type TextFieldSlotOwnProps (line 93) | type TextFieldSlotOwnProps = GetPropDefTypes<typeof textFieldSlotPropDefs>;
type TextFieldSlotProps (line 94) | interface TextFieldSlotProps
FILE: packages/radix-ui-themes/src/components/text.tsx
type TextElement (line 13) | type TextElement = React.ElementRef<'span'>;
type TextOwnProps (line 14) | type TextOwnProps = GetPropDefTypes<typeof textPropDefs>;
type CommonTextProps (line 15) | interface CommonTextProps extends MarginProps, TextOwnProps {}
type TextSpanProps (line 16) | type TextSpanProps = { as?: 'span' } & ComponentPropsWithout<'span', Rem...
type TextDivProps (line 17) | type TextDivProps = { as: 'div' } & ComponentPropsWithout<'div', Removed...
type TextLabelProps (line 18) | type TextLabelProps = { as: 'label' } & ComponentPropsWithout<'label', R...
type TextPProps (line 19) | type TextPProps = { as: 'p' } & ComponentPropsWithout<'p', RemovedProps>;
type TextProps (line 20) | type TextProps = CommonTextProps & (TextSpanProps | TextDivProps | TextL...
FILE: packages/radix-ui-themes/src/components/theme-panel.tsx
type ThemePanelProps (line 27) | interface ThemePanelProps extends Omit<ThemePanelImplProps, keyof ThemeP...
function handleKeydown (line 50) | function handleKeydown(event: KeyboardEvent) {
type ThemePanelImplElement (line 100) | type ThemePanelImplElement = React.ElementRef<'div'>;
type ThemePanelImplPrivateProps (line 101) | interface ThemePanelImplPrivateProps {
type ThemePanelImplProps (line 106) | interface ThemePanelImplProps
type ThemePanelContentElement (line 166) | type ThemePanelContentElement = React.ElementRef<typeof Flex>;
type ThemePanelContentProps (line 167) | interface ThemePanelContentProps extends ComponentPropsWithout<
function handleCopyThemeConfig (line 229) | async function handleCopyThemeConfig() {
function update (line 257) | function update() {
function ThemePanelSection (line 689) | function ThemePanelSection(
function ThemePanelHeading (line 699) | function ThemePanelHeading(props: React.ComponentPropsWithoutRef<typeof ...
function disableAnimation (line 704) | function disableAnimation() {
function upperFirst (line 724) | function upperFirst(string: string) {
function updateRootAppearanceClass (line 728) | function updateRootAppearanceClass(appearance: 'light' | 'dark') {
FILE: packages/radix-ui-themes/src/components/theme.props.tsx
type ThemeOwnProps (line 73) | type ThemeOwnProps = GetPropDefTypes<typeof themePropDefs & typeof asChi...
FILE: packages/radix-ui-themes/src/components/theme.tsx
type ThemeAppearance (line 15) | type ThemeAppearance = (typeof themePropDefs.appearance.values)[number];
type ThemeAccentColor (line 16) | type ThemeAccentColor = (typeof themePropDefs.accentColor.values)[number];
type ThemeGrayColor (line 17) | type ThemeGrayColor = (typeof themePropDefs.grayColor.values)[number];
type ThemePanelBackground (line 18) | type ThemePanelBackground = (typeof themePropDefs.panelBackground.values...
type ThemeRadius (line 19) | type ThemeRadius = (typeof themePropDefs.radius.values)[number];
type ThemeScaling (line 20) | type ThemeScaling = (typeof themePropDefs.scaling.values)[number];
type ThemeChangeHandlers (line 22) | interface ThemeChangeHandlers {
type ThemeContextValue (line 31) | interface ThemeContextValue extends ThemeChangeHandlers {
function useThemeContext (line 42) | function useThemeContext() {
type ThemeProps (line 50) | interface ThemeProps extends ThemeImplPublicProps {}
type ThemeImplElement (line 123) | type ThemeImplElement = React.ElementRef<'div'>;
type ThemeImplProps (line 124) | interface ThemeImplProps extends ThemeImplPublicProps, ThemeImplPrivateP...
type ThemeImplPublicProps (line 125) | interface ThemeImplPublicProps
type ThemeImplPrivateProps (line 127) | interface ThemeImplPrivateProps extends Partial<ThemeChangeHandlers> {
FILE: packages/radix-ui-themes/src/components/tooltip.props.tsx
type TooltipOwnProps (line 17) | type TooltipOwnProps = GetPropDefTypes<typeof tooltipPropDefs & typeof w...
FILE: packages/radix-ui-themes/src/components/tooltip.tsx
type TooltipElement (line 13) | type TooltipElement = React.ElementRef<typeof TooltipPrimitive.Content>;
type TooltipOwnProps (line 14) | type TooltipOwnProps = GetPropDefTypes<typeof tooltipPropDefs>;
type TooltipProps (line 15) | interface TooltipProps
FILE: packages/radix-ui-themes/src/components/visually-hidden.tsx
type VisuallyHiddenProps (line 4) | type VisuallyHiddenProps = VisuallyHiddenPrimitive.VisuallyHiddenProps;
FILE: packages/radix-ui-themes/src/helpers/component-props.ts
type ComponentPropsAs (line 3) | type ComponentPropsAs<
type ComponentPropsWithout (line 10) | type ComponentPropsWithout<
type RemovedProps (line 17) | type RemovedProps = 'asChild' | 'defaultChecked' | 'defaultValue' | 'col...
FILE: packages/radix-ui-themes/src/helpers/extract-margin-props.ts
function extractMarginProps (line 3) | function extractMarginProps<T extends MarginProps>(props: T) {
FILE: packages/radix-ui-themes/src/helpers/extract-props.ts
type PropDefsWithClassName (line 10) | type PropDefsWithClassName<T> =
function mergePropDefs (line 15) | function mergePropDefs<T extends Record<string, PropDef>[]>(...args: T):...
function extractProps (line 25) | function extractProps<
FILE: packages/radix-ui-themes/src/helpers/get-margin-styles.ts
function getMarginStyles (line 11) | function getMarginStyles(props: MarginProps) {
FILE: packages/radix-ui-themes/src/helpers/get-matching-gray-color.ts
type ThemeAccentColor (line 3) | type ThemeAccentColor = (typeof accentColors)[number];
function getMatchingGrayColor (line 5) | function getMatchingGrayColor(accentColor: ThemeAccentColor) {
FILE: packages/radix-ui-themes/src/helpers/get-responsive-styles.ts
type GetResponsiveStylesOptions (line 7) | interface GetResponsiveStylesOptions {
function getResponsiveStyles (line 15) | function getResponsiveStyles({ className, customProperties, ...args }: G...
type GetResponsiveClassNamesOptions (line 26) | interface GetResponsiveClassNamesOptions {
function getResponsiveClassNames (line 34) | function getResponsiveClassNames({
function getBaseClassName (line 82) | function getBaseClassName(
type GetResponsiveCustomPropertiesOptions (line 95) | interface GetResponsiveCustomPropertiesOptions {
function getResponsiveCustomProperties (line 102) | function getResponsiveCustomProperties({
FILE: packages/radix-ui-themes/src/helpers/get-subtree.ts
function getSubtree (line 10) | function getSubtree(
FILE: packages/radix-ui-themes/src/helpers/has-own-property.ts
function hasOwnProperty (line 2) | function hasOwnProperty<K extends string | number | symbol>(
FILE: packages/radix-ui-themes/src/helpers/input-attributes.ts
type InputAttributes (line 3) | type InputAttributes =
type InputTextualAttributes (line 41) | type InputTextualAttributes =
type InputRadioAttributes (line 63) | type InputRadioAttributes =
type NotInputRadioAttributes (line 73) | type NotInputRadioAttributes = Exclude<InputAttributes, InputRadioAttrib...
type NotInputTextualAttributes (line 74) | type NotInputTextualAttributes = Exclude<InputAttributes, InputTextualAt...
FILE: packages/radix-ui-themes/src/helpers/is-responsive-object.ts
function isResponsiveObject (line 5) | function isResponsiveObject<Value extends string>(
FILE: packages/radix-ui-themes/src/helpers/map-prop-values.ts
function mapResponsiveProp (line 7) | function mapResponsiveProp<Input extends string, Output>(
function mapCalloutSizeToTextSize (line 20) | function mapCalloutSizeToTextSize(
function mapButtonSizeToSpinnerSize (line 26) | function mapButtonSizeToSpinnerSize(
FILE: packages/radix-ui-themes/src/helpers/merge-styles.ts
type InlineStyle (line 1) | type InlineStyle =
function mergeStyles (line 7) | function mergeStyles(...styles: Array<InlineStyle>): InlineStyle {
FILE: packages/radix-ui-themes/src/props/height.props.ts
type HeightProps (line 61) | type HeightProps = GetPropDefTypes<typeof heightPropDefs>;
FILE: packages/radix-ui-themes/src/props/layout.props.ts
type LayoutProps (line 422) | type LayoutProps = GetPropDefTypes<
FILE: packages/radix-ui-themes/src/props/margin.props.ts
type MarginProps (line 152) | type MarginProps = GetPropDefTypes<typeof marginPropDefs>;
FILE: packages/radix-ui-themes/src/props/padding.props.ts
type PaddingProps (line 151) | type PaddingProps = GetPropDefTypes<typeof paddingPropDefs>;
FILE: packages/radix-ui-themes/src/props/prop-def.ts
type Union (line 5) | type Union<S = string, T extends string | number = string> = T | Omit<S,...
type Breakpoint (line 9) | type Breakpoint = typeof breakpoints extends Set<infer B> ? B : never;
type Responsive (line 10) | type Responsive<T> = T | Partial<Record<Breakpoint, T>>;
type BooleanPropDef (line 12) | type BooleanPropDef = {
type StringPropDef (line 18) | type StringPropDef = {
type ReactNodePropDef (line 23) | type ReactNodePropDef = {
type EnumPropDef (line 28) | type EnumPropDef<T> = {
type EnumOrStringPropDef (line 34) | type EnumOrStringPropDef<T> = {
type NonStylingPropDef (line 41) | type NonStylingPropDef = {
type StylingPropDef (line 47) | type StylingPropDef = {
type ArbitraryStylingPropDef (line 52) | type ArbitraryStylingPropDef = {
type RegularPropDef (line 58) | type RegularPropDef<T> =
type ResponsivePropDef (line 67) | type ResponsivePropDef<T = any> = RegularPropDef<T> & { responsive: true };
type PropDef (line 68) | type PropDef<T = any> = RegularPropDef<T> | ResponsivePropDef<T>;
type GetPropDefType (line 71) | type GetPropDefType<Def> =
type GetPropDefTypes (line 80) | type GetPropDefTypes<P> = {
FILE: packages/radix-ui-themes/src/props/width.props.ts
type WidthProps (line 61) | type WidthProps = GetPropDefTypes<typeof widthPropDefs>;
Condensed preview — 444 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (1,342K chars).
[
{
"path": ".github/CONTRIBUTING.md",
"chars": 4718,
"preview": "# Contributing to Radix Themes\n\n## Code of Conduct\n\nRadix has adopted the [Contributor Covenant](https://www.contributor"
},
{
"path": ".github/PULL_REQUEST_TEMPLATE.md",
"chars": 600,
"preview": "<!--\n\nThank you for contributing! Please follow the steps below to help us process your PR quickly.\n\n- 📝 Use a meaningfu"
},
{
"path": ".github/actions/ci-setup/action.yml",
"chars": 366,
"preview": "name: Setup CI\n\nruns:\n using: composite\n steps:\n - name: Setup pnpm\n uses: pnpm/action-setup@v4\n with:\n "
},
{
"path": ".github/workflows/ci.yml",
"chars": 1988,
"preview": "name: CI\n\non:\n pull_request:\n push:\n branches:\n - main\n\npermissions:\n contents: read\n\njobs:\n build:\n name"
},
{
"path": ".github/workflows/publish.yml",
"chars": 917,
"preview": "name: Publish Package\n\non:\n release:\n types: [created]\n\nenv:\n GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n\nconcurrenc"
},
{
"path": ".gitignore",
"chars": 195,
"preview": ".DS_Store\nnode_modules\n.turbo\n*.log\n.next\ndist\ndist-ssr\n*.local\n.env\n.cache\nserver/dist\npublic/dist\npackages/radix-ui-th"
},
{
"path": ".npmrc",
"chars": 18,
"preview": "use-beta-cli=true\n"
},
{
"path": ".nvmrc",
"chars": 3,
"preview": "24\n"
},
{
"path": ".prettierignore",
"chars": 374,
"preview": "pnpm-lock.yaml\nnode_modules\n.turbo\n.next\nnext-env.d.ts\ndist\npackages/radix-ui-themes/tokens\npackages/radix-ui-themes/lay"
},
{
"path": ".prettierrc",
"chars": 158,
"preview": "{\n \"printWidth\": 100,\n \"singleQuote\": true,\n \"overrides\": [\n {\n \"files\": \"*.css\",\n \"options\": {\n "
},
{
"path": ".vscode/extensions.json",
"chars": 56,
"preview": "{\n \"recommendations\": [\"stylelint.vscode-stylelint\"]\n}\n"
},
{
"path": ".vscode/settings.json",
"chars": 31,
"preview": "{\n \"stylelint.enable\": true\n}\n"
},
{
"path": "AGENTS.md",
"chars": 8822,
"preview": "# AGENTS.md — Radix Themes\n\n> Context file for AI agents working in this repository.\n\n## Project Overview\n\n**Radix Theme"
},
{
"path": "CLAUDE.md",
"chars": 8822,
"preview": "# AGENTS.md — Radix Themes\n\n> Context file for AI agents working in this repository.\n\n## Project Overview\n\n**Radix Theme"
},
{
"path": "CODE_OF_CONDUCT.md",
"chars": 3350,
"preview": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, w"
},
{
"path": "LICENSE",
"chars": 1063,
"preview": "MIT License\n\nCopyright (c) 2023 WorkOS\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof "
},
{
"path": "README.md",
"chars": 1397,
"preview": "[](https://radix-ui.com/themes)\n\n# Radix Themes\n\n**An open-s"
},
{
"path": "apps/playground/.gitignore",
"chars": 477,
"preview": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pn"
},
{
"path": "apps/playground/app/(static-theme)/layout.tsx",
"chars": 137,
"preview": "import { Theme } from './theme';\n\nexport default function Layout({ children }: LayoutProps<'/'>) {\n return <Theme>{chil"
},
{
"path": "apps/playground/app/(static-theme)/theme.tsx",
"chars": 2345,
"preview": "'use client';\n\nimport * as React from 'react';\nimport { Theme as RadixTheme, ThemeProps } from '@radix-ui/themes';\nimpor"
},
{
"path": "apps/playground/app/(themeable)/demo/page.tsx",
"chars": 3817,
"preview": "import * as React from 'react';\nimport {\n Avatar,\n Flex,\n Separator,\n Text,\n Button,\n IconButton,\n Dialog,\n Text"
},
{
"path": "apps/playground/app/(themeable)/demo/users.ts",
"chars": 1645,
"preview": "type User = {\n id: string;\n image?: string;\n name: string;\n handle: string;\n role: 'admin' | 'maintainer' | 'contri"
},
{
"path": "apps/playground/app/(themeable)/ghost-balance/page.tsx",
"chars": 5142,
"preview": "import * as React from 'react';\nimport {\n Section,\n Flex,\n Grid,\n Button,\n IconButton,\n Link,\n Popover,\n Contain"
},
{
"path": "apps/playground/app/(themeable)/layout.tsx",
"chars": 260,
"preview": "import { Theme, ThemePanel } from '@radix-ui/themes';\n\nexport default function Layout({ children }: LayoutProps<'/'>) {\n"
},
{
"path": "apps/playground/app/(themeable)/sink/_components.tsx",
"chars": 9923,
"preview": "import type * as React from 'react';\nimport {\n ContextMenu,\n DropdownMenu,\n Flex,\n Grid,\n Select,\n Switch,\n Table"
},
{
"path": "apps/playground/app/(themeable)/sink/_utils.tsx",
"chars": 708,
"preview": "export function upperFirst(string: string) {\n return string.charAt(0).toUpperCase() + string.slice(1);\n}\n\nexport const "
},
{
"path": "apps/playground/app/(themeable)/sink/alert-dialog/page.tsx",
"chars": 1396,
"preview": "import { AlertDialog, Button, Flex } from '@radix-ui/themes';\nimport { DocsSection, DocsSectionBody, DocsSectionHeading "
},
{
"path": "apps/playground/app/(themeable)/sink/aspect-ratio/page.tsx",
"chars": 1354,
"preview": "import { AspectRatio, Grid, Text } from '@radix-ui/themes';\nimport { DocsSection, DocsSectionBody, DocsSectionHeading } "
},
{
"path": "apps/playground/app/(themeable)/sink/avatar/page.tsx",
"chars": 6030,
"preview": "import { Fragment } from 'react';\nimport { Avatar, Box, Code, Flex, Table, Text } from '@radix-ui/themes';\nimport { avat"
},
{
"path": "apps/playground/app/(themeable)/sink/badge/page.tsx",
"chars": 4864,
"preview": "import { Fragment } from 'react';\nimport { Badge, Box, Code, Flex, Text, Table } from '@radix-ui/themes';\nimport { badge"
},
{
"path": "apps/playground/app/(themeable)/sink/blockquote/page.tsx",
"chars": 1591,
"preview": "import { Blockquote, Flex, Text } from '@radix-ui/themes';\nimport { DocsSection, DocsSectionBody, DocsSectionHeading } f"
},
{
"path": "apps/playground/app/(themeable)/sink/button/page.tsx",
"chars": 5755,
"preview": "import { Fragment } from 'react';\nimport { ArrowRightIcon, Pencil2Icon } from '@radix-ui/react-icons';\nimport { Button, "
},
{
"path": "apps/playground/app/(themeable)/sink/callout/page.tsx",
"chars": 9258,
"preview": "import { Fragment } from 'react';\nimport { InfoCircledIcon, Cross1Icon } from '@radix-ui/react-icons';\nimport { Callout,"
},
{
"path": "apps/playground/app/(themeable)/sink/card/page.tsx",
"chars": 5440,
"preview": "import { Avatar, Card, Flex, Grid, Heading, Text, Table } from '@radix-ui/themes';\nimport { cardPropDefs } from '@radix-"
},
{
"path": "apps/playground/app/(themeable)/sink/checkbox/page.tsx",
"chars": 7606,
"preview": "import { Fragment } from 'react';\nimport { DocsSection, DocsSectionBody, DocsSectionHeading } from '../docs-section';\nim"
},
{
"path": "apps/playground/app/(themeable)/sink/checkbox-cards/page.tsx",
"chars": 5549,
"preview": "import { Fragment } from 'react';\nimport { CheckboxCards, Box, Text, Code, Flex, Table } from '@radix-ui/themes';\nimport"
},
{
"path": "apps/playground/app/(themeable)/sink/checkbox-group/page.tsx",
"chars": 11042,
"preview": "import { Fragment } from 'react';\nimport { CheckboxGroup, Grid, Box, Text, Code, Flex, Separator, Table } from '@radix-u"
},
{
"path": "apps/playground/app/(themeable)/sink/code/page.tsx",
"chars": 5229,
"preview": "import { Fragment } from 'react';\nimport { Code, Text, Grid, Flex, Strong, Em, Kbd, Quote, Link, Table } from '@radix-ui"
},
{
"path": "apps/playground/app/(themeable)/sink/container/page.tsx",
"chars": 1224,
"preview": "import { Container, Box, Text, Code } from '@radix-ui/themes';\nimport { DocsSection, DocsSectionBody, DocsSectionHeading"
},
{
"path": "apps/playground/app/(themeable)/sink/context-menu/page.tsx",
"chars": 1480,
"preview": "import { ContextMenu, Table } from '@radix-ui/themes';\nimport { contextMenuContentPropDefs } from '@radix-ui/themes/prop"
},
{
"path": "apps/playground/app/(themeable)/sink/cursors/page.tsx",
"chars": 1764,
"preview": "import { Button, Card, DropdownMenu, Flex, Link, Text } from '@radix-ui/themes';\nimport { DocsSection, DocsSectionBody, "
},
{
"path": "apps/playground/app/(themeable)/sink/data-list/page.tsx",
"chars": 8554,
"preview": "import { Box, Button, Code, DataList, Flex, Link, Table, Tabs, Text } from '@radix-ui/themes';\nimport { dataListLabelPro"
},
{
"path": "apps/playground/app/(themeable)/sink/dialog/page.tsx",
"chars": 1540,
"preview": "import { Button, Dialog, Flex } from '@radix-ui/themes';\nimport { DocsSection, DocsSectionBody, DocsSectionHeading } fro"
},
{
"path": "apps/playground/app/(themeable)/sink/docs-section.tsx",
"chars": 521,
"preview": "import { Box, Flex, Heading } from '@radix-ui/themes';\n\nexport function DocsSectionHeading({ children }: { children: Rea"
},
{
"path": "apps/playground/app/(themeable)/sink/dropdown-menu/page.tsx",
"chars": 5834,
"preview": "'use client';\nimport { Fragment } from 'react';\nimport { DropdownMenu, Button, IconButton, Text, Code, Table } from '@ra"
},
{
"path": "apps/playground/app/(themeable)/sink/grid/page.tsx",
"chars": 2691,
"preview": "import { Box, Grid } from '@radix-ui/themes';\nimport { DocsSection, DocsSectionBody, DocsSectionHeading } from '../docs-"
},
{
"path": "apps/playground/app/(themeable)/sink/heading/page.tsx",
"chars": 2836,
"preview": "import { Flex, Heading, Text } from '@radix-ui/themes';\nimport { headingPropDefs } from '@radix-ui/themes/props';\nimport"
},
{
"path": "apps/playground/app/(themeable)/sink/hide-cursor.tsx",
"chars": 434,
"preview": "'use client';\n\nimport * as React from 'react';\nimport { useIdle } from 'react-use';\n\nfunction hideCursor() {\n document."
},
{
"path": "apps/playground/app/(themeable)/sink/hover-card/page.tsx",
"chars": 814,
"preview": "import { HoverCard, Link, Text } from '@radix-ui/themes';\nimport { DocsSection, DocsSectionBody, DocsSectionHeading } fr"
},
{
"path": "apps/playground/app/(themeable)/sink/icon-button/page.tsx",
"chars": 5728,
"preview": "import { Fragment } from 'react';\nimport { Share2Icon } from '@radix-ui/react-icons';\nimport { IconButton, Box, Text, Co"
},
{
"path": "apps/playground/app/(themeable)/sink/kbd/page.tsx",
"chars": 1968,
"preview": "import { Kbd, Flex, Table } from '@radix-ui/themes';\nimport { kbdPropDefs } from '@radix-ui/themes/props';\nimport { Docs"
},
{
"path": "apps/playground/app/(themeable)/sink/layout.tsx",
"chars": 6741,
"preview": "import NextLink from 'next/link';\nimport { Collapsible } from 'radix-ui';\nimport {\n Box,\n Container,\n Flex,\n Grid,\n "
},
{
"path": "apps/playground/app/(themeable)/sink/link/page.tsx",
"chars": 7907,
"preview": "import { ArrowTopRightIcon } from '@radix-ui/react-icons';\nimport { Flex, Link, Separator, Text } from '@radix-ui/themes"
},
{
"path": "apps/playground/app/(themeable)/sink/mixed-nested-themes-test/page.tsx",
"chars": 1235,
"preview": "import { Theme } from '@radix-ui/themes';\nimport { DocsSection, DocsSectionBody, DocsSectionHeading } from '../docs-sect"
},
{
"path": "apps/playground/app/(themeable)/sink/nested-appearances-test/page.tsx",
"chars": 918,
"preview": "import { Theme } from '@radix-ui/themes';\nimport { DocsSection, DocsSectionBody, DocsSectionHeading } from '../docs-sect"
},
{
"path": "apps/playground/app/(themeable)/sink/nested-colors-test/page.tsx",
"chars": 910,
"preview": "import { Theme } from '@radix-ui/themes';\nimport { DocsSection, DocsSectionBody, DocsSectionHeading } from '../docs-sect"
},
{
"path": "apps/playground/app/(themeable)/sink/page.module.css",
"chars": 735,
"preview": ".root {\n margin-bottom: 400px;\n}\n\n.root :global(summary) {\n cursor: pointer;\n}\n.root :global(summary:focus-visible) {\n"
},
{
"path": "apps/playground/app/(themeable)/sink/page.tsx",
"chars": 6579,
"preview": "'use client';\nimport { Flex, Separator } from '@radix-ui/themes';\nimport AlertDialogPage from './alert-dialog/page';\nimp"
},
{
"path": "apps/playground/app/(themeable)/sink/playground/page.tsx",
"chars": 953,
"preview": "import { Card, Flex, Text } from '@radix-ui/themes';\nimport { textFieldRootPropDefs } from '@radix-ui/themes/props';\nimp"
},
{
"path": "apps/playground/app/(themeable)/sink/pointer-cursors-checkbox.tsx",
"chars": 941,
"preview": "'use client';\nimport { Box, Checkbox, Flex, Text } from '@radix-ui/themes';\nimport React from 'react';\n\nexport function "
},
{
"path": "apps/playground/app/(themeable)/sink/popover/page.tsx",
"chars": 975,
"preview": "import { Button, Popover, Text } from '@radix-ui/themes';\nimport { DocsSection, DocsSectionBody, DocsSectionHeading } fr"
},
{
"path": "apps/playground/app/(themeable)/sink/progress/page.tsx",
"chars": 6487,
"preview": "import { Fragment } from 'react';\nimport { Progress, Grid, Text, Code, Box, Flex, Table } from '@radix-ui/themes';\nimpor"
},
{
"path": "apps/playground/app/(themeable)/sink/radio/page.tsx",
"chars": 10685,
"preview": "import { Fragment } from 'react';\nimport { Radio, Grid, Flex, Text, Code, Box, Separator, Table } from '@radix-ui/themes"
},
{
"path": "apps/playground/app/(themeable)/sink/radio-cards/page.tsx",
"chars": 5417,
"preview": "import { Fragment } from 'react';\nimport { RadioCards, Flex, Text, Code, Box, Table } from '@radix-ui/themes';\nimport { "
},
{
"path": "apps/playground/app/(themeable)/sink/radio-group/page.tsx",
"chars": 10765,
"preview": "import { Fragment } from 'react';\nimport { RadioGroup, Grid, Flex, Text, Code, Box, Separator, Table } from '@radix-ui/t"
},
{
"path": "apps/playground/app/(themeable)/sink/radix-logo.tsx",
"chars": 559,
"preview": "import React from 'react';\n\nexport const RadixLogo = (props: React.ComponentProps<'svg'>) => (\n <svg\n xmlns=\"http://"
},
{
"path": "apps/playground/app/(themeable)/sink/scroll-area/page.tsx",
"chars": 4656,
"preview": "import {\n AspectRatio,\n Box,\n Code,\n Em,\n Kbd,\n Quote,\n ScrollArea,\n Strong,\n Text,\n Table,\n} from '@radix-ui/"
},
{
"path": "apps/playground/app/(themeable)/sink/segmented-control/page.tsx",
"chars": 8944,
"preview": "import { SegmentedControl, Code, Flex, Text, Box, Separator, Table } from '@radix-ui/themes';\nimport { segmentedControlR"
},
{
"path": "apps/playground/app/(themeable)/sink/select/page.tsx",
"chars": 9051,
"preview": "import { Fragment } from 'react';\nimport { Select, Text, Code, Box, Table } from '@radix-ui/themes';\nimport {\n selectRo"
},
{
"path": "apps/playground/app/(themeable)/sink/separator/page.tsx",
"chars": 810,
"preview": "import { Flex, Separator } from '@radix-ui/themes';\nimport { accentColors } from '@radix-ui/themes/props';\nimport { Docs"
},
{
"path": "apps/playground/app/(themeable)/sink/shadow-tokens/page.tsx",
"chars": 1552,
"preview": "import { Flex, Box, Text } from '@radix-ui/themes';\nimport { DocsSection, DocsSectionBody, DocsSectionHeading } from '.."
},
{
"path": "apps/playground/app/(themeable)/sink/skeleton/page.tsx",
"chars": 7802,
"preview": "import { ArrowRightIcon, InfoCircledIcon, StarIcon } from '@radix-ui/react-icons';\nimport {\n Avatar,\n Badge,\n Blockqu"
},
{
"path": "apps/playground/app/(themeable)/sink/slider/page.tsx",
"chars": 7467,
"preview": "import { Fragment } from 'react';\nimport { Slider, Grid, Text, Flex, Code, Box, Table } from '@radix-ui/themes';\nimport "
},
{
"path": "apps/playground/app/(themeable)/sink/spinner/page.tsx",
"chars": 1456,
"preview": "import { Spinner, Flex, Button, TextField, Grid } from '@radix-ui/themes';\nimport { DocsSection, DocsSectionBody, DocsSe"
},
{
"path": "apps/playground/app/(themeable)/sink/switch/page.tsx",
"chars": 8346,
"preview": "import { Fragment } from 'react';\nimport { Switch, Grid, Text, Flex, Separator, Code, Box, Table } from '@radix-ui/theme"
},
{
"path": "apps/playground/app/(themeable)/sink/tab-nav/page.tsx",
"chars": 1631,
"preview": "import { Fragment } from 'react';\nimport { Text, Code, Grid, Flex, Table } from '@radix-ui/themes';\nimport { tabsListPro"
},
{
"path": "apps/playground/app/(themeable)/sink/tab-nav-demo.tsx",
"chars": 1623,
"preview": "'use client';\nimport * as React from 'react';\nimport NextLink from 'next/link';\nimport { useSearchParams } from 'next/na"
},
{
"path": "apps/playground/app/(themeable)/sink/table/page.tsx",
"chars": 1217,
"preview": "import { Flex, Grid, Text } from '@radix-ui/themes';\nimport { tableRootPropDefs } from '@radix-ui/themes/props';\nimport "
},
{
"path": "apps/playground/app/(themeable)/sink/tabs/page.tsx",
"chars": 5266,
"preview": "import { Fragment } from 'react';\nimport { Text, Code, Grid, Flex, Box, Tabs, Table } from '@radix-ui/themes';\nimport { "
},
{
"path": "apps/playground/app/(themeable)/sink/text/page.tsx",
"chars": 1568,
"preview": "import { Flex, Text } from '@radix-ui/themes';\nimport { textPropDefs } from '@radix-ui/themes/props';\nimport { DocsSecti"
},
{
"path": "apps/playground/app/(themeable)/sink/text-area/page.tsx",
"chars": 6646,
"preview": "import { Fragment } from 'react';\nimport { TextArea, Box, Flex, Text, Code, Table } from '@radix-ui/themes';\nimport { te"
},
{
"path": "apps/playground/app/(themeable)/sink/text-field/page.tsx",
"chars": 12119,
"preview": "import { Fragment } from 'react';\nimport { InfoCircledIcon, Share2Icon, StarIcon } from '@radix-ui/react-icons';\nimport "
},
{
"path": "apps/playground/app/(themeable)/sink/tooltip/page.tsx",
"chars": 852,
"preview": "import { Button, Flex, Tooltip } from '@radix-ui/themes';\nimport { DocsSection, DocsSectionBody, DocsSectionHeading } fr"
},
{
"path": "apps/playground/app/(themeable)/sink/typography/page.tsx",
"chars": 13082,
"preview": "import {\n Blockquote,\n Box,\n Button,\n Code,\n Em,\n Flex,\n Grid,\n Heading,\n Kbd,\n Link,\n Quote,\n Separator,\n "
},
{
"path": "apps/playground/app/(themeable)/snapshot/image-card.tsx",
"chars": 3356,
"preview": "'use client';\n\nimport * as React from 'react';\nimport { Tooltip, IconButton, Popover, Text, Button } from '@radix-ui/the"
},
{
"path": "apps/playground/app/(themeable)/snapshot/page.module.css",
"chars": 973,
"preview": ".search {\n flex: 1;\n display: flex;\n align-items: center;\n height: var(--space-7);\n border-radius: max(var(--radius"
},
{
"path": "apps/playground/app/(themeable)/snapshot/page.tsx",
"chars": 10482,
"preview": "import * as React from 'react';\nimport { HamburgerMenuIcon, UploadIcon } from '@radix-ui/react-icons';\nimport {\n Button"
},
{
"path": "apps/playground/app/(themeable)/test/appearance/page.tsx",
"chars": 3952,
"preview": "import * as React from 'react';\nimport {\n Theme,\n Flex,\n Heading,\n Grid,\n Text,\n TextArea,\n Switch,\n Button,\n C"
},
{
"path": "apps/playground/app/(themeable)/test/as-child/page.tsx",
"chars": 6491,
"preview": "import { StarIcon } from '@radix-ui/react-icons';\nimport {\n AspectRatio,\n Avatar,\n Badge,\n Box,\n Button,\n Card,\n "
},
{
"path": "apps/playground/app/(themeable)/test/avatar/page.tsx",
"chars": 849,
"preview": "import { Avatar, Flex, Container } from '@radix-ui/themes';\n\nexport default function Test() {\n return (\n <Container "
},
{
"path": "apps/playground/app/(themeable)/test/checkbox-card/page.tsx",
"chars": 2743,
"preview": "'use client';\nimport * as React from 'react';\nimport { Button, CheckboxCards, Code, Container, Grid, Heading, Section } "
},
{
"path": "apps/playground/app/(themeable)/test/classic-button/page.tsx",
"chars": 1357,
"preview": "import * as React from 'react';\nimport { Container, Section, Flex, Button } from '@radix-ui/themes';\nimport { accentColo"
},
{
"path": "apps/playground/app/(themeable)/test/data-list/page.tsx",
"chars": 15906,
"preview": "'use client';\nimport Link from 'next/link';\nimport {\n Badge,\n Box,\n Button,\n Container,\n DataList,\n Flex,\n Headin"
},
{
"path": "apps/playground/app/(themeable)/test/dialog/page.tsx",
"chars": 7814,
"preview": "import { Flex, Button, Container, Dialog, Text } from '@radix-ui/themes';\nimport { Share2Icon } from '@radix-ui/react-ic"
},
{
"path": "apps/playground/app/(themeable)/test/grid-align-content/page.tsx",
"chars": 2274,
"preview": "import * as React from 'react';\nimport { Grid, Text, Box, BoxProps, Code, Container } from '@radix-ui/themes';\n\nexport d"
},
{
"path": "apps/playground/app/(themeable)/test/grid-align-self/page.tsx",
"chars": 723,
"preview": "import { Grid, Text, Box, BoxProps, Code, Container } from '@radix-ui/themes';\n\nexport default function Test() {\n retur"
},
{
"path": "apps/playground/app/(themeable)/test/grid-area/page.tsx",
"chars": 2661,
"preview": "import { Grid, Text, Container, Section, Card, Box, Heading } from '@radix-ui/themes';\nimport { GridIcon } from '@radix-"
},
{
"path": "apps/playground/app/(themeable)/test/grid-justify-items/page.tsx",
"chars": 1634,
"preview": "import { Grid, Text, Box, BoxProps, Code, Container } from '@radix-ui/themes';\n\nexport default function Test() {\n retur"
},
{
"path": "apps/playground/app/(themeable)/test/grid-justify-self/page.tsx",
"chars": 732,
"preview": "import { Grid, Text, Box, type BoxProps, Code, Container } from '@radix-ui/themes';\n\nexport default function Test() {\n "
},
{
"path": "apps/playground/app/(themeable)/test/high-contrast/page.tsx",
"chars": 32336,
"preview": "import {\n Text,\n Container,\n Section,\n Flex,\n Heading,\n Callout,\n Link,\n Code,\n Blockquote,\n} from '@radix-ui/t"
},
{
"path": "apps/playground/app/(themeable)/test/inset/page.tsx",
"chars": 9268,
"preview": "import {\n Container,\n Section,\n Grid,\n Card,\n Text,\n AspectRatio,\n Box,\n Inset,\n Popover,\n Button,\n Flex,\n H"
},
{
"path": "apps/playground/app/(themeable)/test/radio-card/page.tsx",
"chars": 1975,
"preview": "import { Fragment } from 'react';\nimport { Text, Container, Section, RadioCards, Heading, Box, Separator } from '@radix-"
},
{
"path": "apps/playground/app/(themeable)/test/reset/page.tsx",
"chars": 9777,
"preview": "import * as React from 'react';\nimport { Container, Section, Reset } from '@radix-ui/themes';\n\nexport default function T"
},
{
"path": "apps/playground/app/(themeable)/test/responsive/page.tsx",
"chars": 2676,
"preview": "import {\n Flex,\n Grid,\n TextField,\n Text,\n Select,\n TextArea,\n Button,\n Container,\n Section,\n Card,\n IconButt"
},
{
"path": "apps/playground/app/(themeable)/test/skeleton/page.tsx",
"chars": 2839,
"preview": "'use client';\nimport * as React from 'react';\nimport {\n Container,\n Section,\n Card,\n Text,\n Box,\n Button,\n Flex,\n"
},
{
"path": "apps/playground/app/(themeable)/test/tabnav/(accounts)/page.tsx",
"chars": 122,
"preview": "import { Heading } from '@radix-ui/themes';\n\nexport default function Accounts() {\n return <Heading>Accounts</Heading>;\n"
},
{
"path": "apps/playground/app/(themeable)/test/tabnav/documents/page.tsx",
"chars": 124,
"preview": "import { Heading } from '@radix-ui/themes';\n\nexport default function Documents() {\n return <Heading>Documents</Heading>"
},
{
"path": "apps/playground/app/(themeable)/test/tabnav/layout.tsx",
"chars": 335,
"preview": "import * as React from 'react';\nimport { Container, Section, Box } from '@radix-ui/themes';\nimport { Nav } from './nav';"
},
{
"path": "apps/playground/app/(themeable)/test/tabnav/nav.tsx",
"chars": 1545,
"preview": "'use client';\nimport NextLink from 'next/link';\nimport { usePathname } from 'next/navigation';\nimport { TabNav, Heading,"
},
{
"path": "apps/playground/app/(themeable)/test/tabnav/settings/page.tsx",
"chars": 122,
"preview": "import { Heading } from '@radix-ui/themes';\n\nexport default function Settings() {\n return <Heading>Settings</Heading>;\n"
},
{
"path": "apps/playground/app/(themeable)/test/text-wrap/page.tsx",
"chars": 2693,
"preview": "import { Grid, Text, Container, Section, Card, Heading, Code, ScrollArea } from '@radix-ui/themes';\n\nexport default func"
},
{
"path": "apps/playground/app/(themeable)/test/textfield/page.tsx",
"chars": 22558,
"preview": "import {\n Container,\n Section,\n Grid,\n Flex,\n TextField,\n Heading,\n IconButton,\n Button,\n Text,\n Tooltip,\n Sp"
},
{
"path": "apps/playground/app/(themeable)/test/webkit-tap-highlight-color/page.tsx",
"chars": 4744,
"preview": "'use client';\nimport type * as React from 'react';\nimport {\n Container,\n Section,\n Card,\n Text,\n Box,\n Button,\n F"
},
{
"path": "apps/playground/app/api/avatar/route.ts",
"chars": 323,
"preview": "import { NextResponse } from 'next/server';\n\nasync function wait(ms: number) {\n return new Promise((resolve) => setTime"
},
{
"path": "apps/playground/app/globals.css",
"chars": 130,
"preview": "body {\n margin: 0;\n}\n\nhtml,\nbody {\n height: 100%;\n}\n\n.radix-themes:where([data-is-root-theme='true']) {\n min-height: "
},
{
"path": "apps/playground/app/layout.tsx",
"chars": 430,
"preview": "import * as React from 'react';\nimport './globals.css';\nimport '@radix-ui/themes/styles.css';\nimport type { Metadata } f"
},
{
"path": "apps/playground/app/next-theme-provider.tsx",
"chars": 183,
"preview": "'use client';\n\nimport { ThemeProvider } from 'next-themes';\n\nexport function NextThemeProvider({ children }) {\n return "
},
{
"path": "apps/playground/components/loading-buttons.tsx",
"chars": 3635,
"preview": "'use client';\n\nimport * as React from 'react';\nimport { ArrowRightIcon, StarIcon } from '@radix-ui/react-icons';\nimport "
},
{
"path": "apps/playground/components/snapshot-logo.tsx",
"chars": 9299,
"preview": "export function SnapshotLogo(props: any) {\n return (\n <svg\n width=\"559\"\n height=\"191\"\n viewBox=\"0 0 5"
},
{
"path": "apps/playground/css.d.ts",
"chars": 462,
"preview": "// My css.d.ts file\nimport type * as CSS from 'csstype';\n\ndeclare module 'csstype' {\n interface Properties {\n // Web"
},
{
"path": "apps/playground/eslint.config.mjs",
"chars": 683,
"preview": "import nextCoreWebVitals from 'eslint-config-next/core-web-vitals';\nimport nextTypescript from 'eslint-config-next/types"
},
{
"path": "apps/playground/next.config.mjs",
"chars": 415,
"preview": "// @ts-check\nimport path from 'node:path';\n\n/** @type {import('next').NextConfig} */\nconst nextConfig = {\n reactStrictM"
},
{
"path": "apps/playground/package.json",
"chars": 912,
"preview": "{\n \"name\": \"playground\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"next dev\",\n \"build\": \"n"
},
{
"path": "apps/playground/playwright.config.ts",
"chars": 1286,
"preview": "import { defineConfig, devices } from '@playwright/test';\n\nexport default defineConfig({\n testDir: './tests',\n outputD"
},
{
"path": "apps/playground/postcss.config.mjs",
"chars": 82,
"preview": "// eslint-disable-next-line import/no-anonymous-default-export\nexport default {};\n"
},
{
"path": "apps/playground/tests/visual-regression.spec.ts",
"chars": 19707,
"preview": "import { test, expect } from '@playwright/test';\n\ntest.describe.configure({ mode: 'parallel' });\n\ntest.describe('visual "
},
{
"path": "apps/playground/tsconfig.json",
"chars": 946,
"preview": "{\n \"$schema\": \"https://json.schemastore.org/tsconfig\",\n \"display\": \"Next.js\",\n \"compilerOptions\": {\n \"composite\": "
},
{
"path": "context7.json",
"chars": 96,
"preview": "{\n \"url\": \"https://context7.com/radix-ui/themes\",\n \"public_key\": \"pk_q7NnKuFFXMWA7WnmjMHQU\"\n}\n"
},
{
"path": "package.json",
"chars": 690,
"preview": "{\n \"name\": \"monorepo\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.0.0\",\n \"scripts\": {\n \"build\": \"turbo run bui"
},
{
"path": "packages/radix-ui-themes/.browserslistrc",
"chars": 30,
"preview": "last 2 years, last 2 versions\n"
},
{
"path": "packages/radix-ui-themes/.stylelintrc.cjs",
"chars": 506,
"preview": "module.exports = {\n rules: {\n // Disallow element type selector.\n 'selector-max-type': 0,\n // Allow 0,1,1 spec"
},
{
"path": "packages/radix-ui-themes/CHANGELOG.md",
"chars": 60619,
"preview": "# Changelog\n\n## 3.4.0\n\n- Expand the prop type for `Select`'s `placeholder` prop to accept any `ReactNode` ([#693](https:"
},
{
"path": "packages/radix-ui-themes/README.md",
"chars": 1401,
"preview": "[](https://radix-ui.com/themes)\n\n# Radix Themes\n\n**An open-s"
},
{
"path": "packages/radix-ui-themes/eslint.config.mjs",
"chars": 1816,
"preview": "// @ts-check\nimport globals from 'globals';\nimport eslint from '@eslint/js';\nimport tseslint from 'typescript-eslint';\ni"
},
{
"path": "packages/radix-ui-themes/package.json",
"chars": 5511,
"preview": "{\n \"name\": \"@radix-ui/themes\",\n \"version\": \"3.3.0\",\n \"type\": \"commonjs\",\n \"main\": \"./dist/cjs/index.js\",\n \"types\": "
},
{
"path": "packages/radix-ui-themes/postcss-breakpoints.cjs",
"chars": 3385,
"preview": "const fs = require('fs');\nconst path = require('path');\nconst postcss = require('postcss');\n\n// Build a list of breakpoi"
},
{
"path": "packages/radix-ui-themes/postcss-whitespace.cjs",
"chars": 739,
"preview": "// Clean up the whitespace mess left behind by other plugins\nmodule.exports = () => ({\n postcssPlugin: 'postcss-whitesp"
},
{
"path": "packages/radix-ui-themes/postcss.config.cjs",
"chars": 434,
"preview": "const path = require('path');\n\nmodule.exports = {\n plugins: [\n require('postcss-import')({\n path: [path.relativ"
},
{
"path": "packages/radix-ui-themes/scripts/esbuild-cjs.js",
"chars": 535,
"preview": "import esbuild from 'esbuild';\n\nconst dir = 'dist/cjs';\n\n/** @type {import('esbuild').BuildOptions} */\nconst options = {"
},
{
"path": "packages/radix-ui-themes/scripts/esbuild-esm.js",
"chars": 944,
"preview": "import esbuild from 'esbuild';\nimport fs from 'fs';\nimport path from 'path';\nimport pkg from '../package.json' with { ty"
},
{
"path": "packages/radix-ui-themes/scripts/package.json",
"chars": 23,
"preview": "{\n \"type\": \"module\"\n}\n"
},
{
"path": "packages/radix-ui-themes/src/components/_internal/base-button.css",
"chars": 13592,
"preview": ".rt-BaseButton {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n user-sele"
},
{
"path": "packages/radix-ui-themes/src/components/_internal/base-button.props.ts",
"chars": 1031,
"preview": "import { asChildPropDef } from '../../props/as-child.prop.js';\nimport { accentColorPropDef } from '../../props/color.pro"
},
{
"path": "packages/radix-ui-themes/src/components/_internal/base-button.tsx",
"chars": 3675,
"preview": "'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { Slot } from 'radix-ui';\n\nim"
},
{
"path": "packages/radix-ui-themes/src/components/_internal/base-card.css",
"chars": 8023,
"preview": ".rt-BaseCard {\n display: block;\n position: relative;\n overflow: hidden;\n border-radius: var(--base-card-border-radiu"
},
{
"path": "packages/radix-ui-themes/src/components/_internal/base-checkbox.css",
"chars": 5200,
"preview": ".rt-BaseCheckboxRoot {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n "
},
{
"path": "packages/radix-ui-themes/src/components/_internal/base-checkbox.props.ts",
"chars": 692,
"preview": "import { colorPropDef } from '../../props/color.prop.js';\nimport { highContrastPropDef } from '../../props/high-contrast"
},
{
"path": "packages/radix-ui-themes/src/components/_internal/base-dialog.css",
"chars": 3532,
"preview": ".rt-BaseDialogOverlay {\n position: fixed;\n inset: 0;\n\n &::before {\n position: fixed;\n content: '';\n inset: 0"
},
{
"path": "packages/radix-ui-themes/src/components/_internal/base-menu.css",
"chars": 7372,
"preview": ".rt-BaseMenuContent {\n --scrollarea-scrollbar-vertical-margin-top: var(--base-menu-content-padding);\n --scrollarea-scr"
},
{
"path": "packages/radix-ui-themes/src/components/_internal/base-menu.props.ts",
"chars": 1259,
"preview": "import { asChildPropDef } from '../../props/as-child.prop.js';\nimport { colorPropDef } from '../../props/color.prop.js';"
},
{
"path": "packages/radix-ui-themes/src/components/_internal/base-radio.css",
"chars": 4971,
"preview": ".rt-BaseRadioRoot {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n ve"
},
{
"path": "packages/radix-ui-themes/src/components/_internal/base-radio.props.ts",
"chars": 686,
"preview": "import { colorPropDef } from '../../props/color.prop.js';\nimport { highContrastPropDef } from '../../props/high-contrast"
},
{
"path": "packages/radix-ui-themes/src/components/_internal/base-tab-list.css",
"chars": 4478,
"preview": ".rt-BaseTabList {\n display: flex;\n justify-content: flex-start;\n overflow-x: auto;\n white-space: nowrap;\n\n font-fam"
},
{
"path": "packages/radix-ui-themes/src/components/_internal/base-tab-list.props.ts",
"chars": 925,
"preview": "import { colorPropDef } from '../../props/color.prop.js';\nimport { highContrastPropDef } from '../../props/high-contrast"
},
{
"path": "packages/radix-ui-themes/src/components/accessible-icon.tsx",
"chars": 209,
"preview": "import { AccessibleIcon as AccessibleIconPrimitive } from 'radix-ui';\nexport const AccessibleIcon = AccessibleIconPrimit"
},
{
"path": "packages/radix-ui-themes/src/components/alert-dialog.css",
"chars": 39,
"preview": "@import './_internal/base-dialog.css';\n"
},
{
"path": "packages/radix-ui-themes/src/components/alert-dialog.props.tsx",
"chars": 183,
"preview": "export { dialogContentPropDefs as alertDialogContentPropDefs } from './dialog.props.js';\nexport type { DialogContentOwnP"
},
{
"path": "packages/radix-ui-themes/src/components/alert-dialog.tsx",
"chars": 5755,
"preview": "import * as React from 'react';\nimport classNames from 'classnames';\nimport { AlertDialog as AlertDialogPrimitive } from"
},
{
"path": "packages/radix-ui-themes/src/components/animations.css",
"chars": 2400,
"preview": "@keyframes rt-fade-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes rt-fade-out {\n from {\n "
},
{
"path": "packages/radix-ui-themes/src/components/aspect-ratio.tsx",
"chars": 188,
"preview": "import { AspectRatio as AspectRatioPrimitive } from 'radix-ui';\nexport const AspectRatio = AspectRatioPrimitive.Root;\nex"
},
{
"path": "packages/radix-ui-themes/src/components/avatar.css",
"chars": 4975,
"preview": ".rt-AvatarRoot {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n u"
},
{
"path": "packages/radix-ui-themes/src/components/avatar.props.tsx",
"chars": 944,
"preview": "import { asChildPropDef } from '../props/as-child.prop.js';\nimport { accentColorPropDef } from '../props/color.prop.js';"
},
{
"path": "packages/radix-ui-themes/src/components/avatar.tsx",
"chars": 2894,
"preview": "'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { Avatar as AvatarPrimitive }"
},
{
"path": "packages/radix-ui-themes/src/components/badge.css",
"chars": 3450,
"preview": ".rt-Badge {\n display: inline-flex;\n align-items: center;\n white-space: nowrap;\n font-family: var(--default-font-fami"
},
{
"path": "packages/radix-ui-themes/src/components/badge.props.tsx",
"chars": 845,
"preview": "import { asChildPropDef } from '../props/as-child.prop.js';\nimport { accentColorPropDef } from '../props/color.prop.js';"
},
{
"path": "packages/radix-ui-themes/src/components/badge.tsx",
"chars": 1242,
"preview": "import * as React from 'react';\nimport classNames from 'classnames';\nimport { Slot } from 'radix-ui';\n\nimport { badgePro"
},
{
"path": "packages/radix-ui-themes/src/components/blockquote.css",
"chars": 177,
"preview": ".rt-Blockquote {\n box-sizing: border-box;\n border-left: max(var(--space-1), 0.25em) solid var(--accent-a6);\n padding-"
},
{
"path": "packages/radix-ui-themes/src/components/blockquote.props.tsx",
"chars": 842,
"preview": "import { asChildPropDef } from '../props/as-child.prop.js';\nimport { colorPropDef } from '../props/color.prop.js';\nimpor"
},
{
"path": "packages/radix-ui-themes/src/components/blockquote.tsx",
"chars": 1182,
"preview": "import * as React from 'react';\nimport classNames from 'classnames';\nimport { Slot } from 'radix-ui';\n\nimport { Text } f"
},
{
"path": "packages/radix-ui-themes/src/components/box.css",
"chars": 56,
"preview": ".rt-Box {\n box-sizing: border-box;\n display: block;\n}\n"
},
{
"path": "packages/radix-ui-themes/src/components/box.props.tsx",
"chars": 1184,
"preview": "import { asChildPropDef } from '../props/as-child.prop.js';\n\nimport type { PropDef, GetPropDefTypes } from '../props/pro"
},
{
"path": "packages/radix-ui-themes/src/components/box.tsx",
"chars": 1366,
"preview": "import * as React from 'react';\nimport classNames from 'classnames';\n\nimport { Slot } from './slot.js';\nimport { boxProp"
},
{
"path": "packages/radix-ui-themes/src/components/button.css",
"chars": 4493,
"preview": "@import './_internal/base-button.css';\n\n.rt-Button {\n &:where(:not(.rt-variant-ghost)) {\n /* stylelint-disable-next-"
},
{
"path": "packages/radix-ui-themes/src/components/button.props.tsx",
"chars": 89,
"preview": "export { baseButtonPropDefs as buttonPropDefs } from './_internal/base-button.props.js';\n"
},
{
"path": "packages/radix-ui-themes/src/components/button.tsx",
"chars": 561,
"preview": "import * as React from 'react';\nimport classNames from 'classnames';\n\nimport { BaseButton } from './_internal/base-butto"
},
{
"path": "packages/radix-ui-themes/src/components/callout.css",
"chars": 2568,
"preview": ".rt-CalloutRoot {\n box-sizing: border-box;\n display: grid;\n align-items: flex-start;\n justify-content: flex-start;\n "
},
{
"path": "packages/radix-ui-themes/src/components/callout.props.tsx",
"chars": 771,
"preview": "import { asChildPropDef } from '../props/as-child.prop.js';\nimport { accentColorPropDef } from '../props/color.prop.js';"
},
{
"path": "packages/radix-ui-themes/src/components/callout.tsx",
"chars": 2990,
"preview": "'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { Slot } from 'radix-ui';\n\nim"
},
{
"path": "packages/radix-ui-themes/src/components/card.css",
"chars": 6279,
"preview": "@import './_internal/base-card.css';\n\n/* stylelint-disable selector-max-type */\n/* Disable selector-max-type rule to tar"
},
{
"path": "packages/radix-ui-themes/src/components/card.props.tsx",
"chars": 589,
"preview": "import { asChildPropDef } from '../props/as-child.prop.js';\n\nimport type { PropDef } from '../props/prop-def.js';\n\nconst"
},
{
"path": "packages/radix-ui-themes/src/components/card.tsx",
"chars": 1143,
"preview": "import * as React from 'react';\nimport classNames from 'classnames';\nimport { Slot } from 'radix-ui';\n\nimport { cardProp"
},
{
"path": "packages/radix-ui-themes/src/components/checkbox-cards.css",
"chars": 6112,
"preview": "@import './_internal/base-card.css';\n@import './_internal/base-checkbox.css';\n\n.rt-CheckboxCardsRoot {\n line-height: va"
},
{
"path": "packages/radix-ui-themes/src/components/checkbox-cards.props.tsx",
"chars": 1073,
"preview": "import { asChildPropDef } from '../props/as-child.prop.js';\nimport { colorPropDef } from '../props/color.prop.js';\nimpor"
},
{
"path": "packages/radix-ui-themes/src/components/checkbox-cards.tsx",
"chars": 4569,
"preview": "'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { Context } from 'radix-ui/in"
},
{
"path": "packages/radix-ui-themes/src/components/checkbox-group.css",
"chars": 627,
"preview": ".rt-CheckboxGroupRoot {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n}\n\n.rt-CheckboxGroupItem {\n d"
},
{
"path": "packages/radix-ui-themes/src/components/checkbox-group.primitive.tsx",
"chars": 7238,
"preview": "'use client';\n\nimport * as React from 'react';\nimport { Checkbox as CheckboxPrimitive, Direction } from 'radix-ui';\nimpo"
},
{
"path": "packages/radix-ui-themes/src/components/checkbox-group.props.tsx",
"chars": 262,
"preview": "import { asChildPropDef } from '../props/as-child.prop.js';\nimport { baseCheckboxPropDefs } from './_internal/base-check"
},
{
"path": "packages/radix-ui-themes/src/components/checkbox-group.tsx",
"chars": 5678,
"preview": "'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { Context } from 'radix-ui/in"
},
{
"path": "packages/radix-ui-themes/src/components/checkbox.css",
"chars": 312,
"preview": "@import './_internal/base-checkbox.css';\n\n.rt-CheckboxRoot {\n &:where(:focus-visible) {\n &::before {\n outline: "
},
{
"path": "packages/radix-ui-themes/src/components/checkbox.props.tsx",
"chars": 95,
"preview": "export { baseCheckboxPropDefs as checkboxPropDefs } from './_internal/base-checkbox.props.js';\n"
},
{
"path": "packages/radix-ui-themes/src/components/checkbox.tsx",
"chars": 2166,
"preview": "'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { Checkbox as CheckboxPrimiti"
},
{
"path": "packages/radix-ui-themes/src/components/code.css",
"chars": 5979,
"preview": "/* stylelint-disable selector-max-type */\n/* Disable selector-max-type rule to target individual element types. */\n\n.rt-"
},
{
"path": "packages/radix-ui-themes/src/components/code.props.tsx",
"chars": 1043,
"preview": "import { asChildPropDef } from '../props/as-child.prop.js';\nimport { accentColorPropDef } from '../props/color.prop.js';"
},
{
"path": "packages/radix-ui-themes/src/components/code.tsx",
"chars": 1341,
"preview": "import * as React from 'react';\nimport classNames from 'classnames';\nimport { Slot } from 'radix-ui';\n\nimport { codeProp"
},
{
"path": "packages/radix-ui-themes/src/components/container.css",
"chars": 1199,
"preview": ".radix-themes {\n --container-1: 448px;\n --container-2: 688px;\n --container-3: 880px;\n --container-4: 1136px;\n}\n\n.rt-"
},
{
"path": "packages/radix-ui-themes/src/components/container.props.tsx",
"chars": 2252,
"preview": "import { asChildPropDef } from '../props/as-child.prop.js';\n\nimport type { PropDef, GetPropDefTypes } from '../props/pro"
},
{
"path": "packages/radix-ui-themes/src/components/container.tsx",
"chars": 2007,
"preview": "import * as React from 'react';\nimport classNames from 'classnames';\nimport { Slot } from 'radix-ui';\n\nimport { containe"
},
{
"path": "packages/radix-ui-themes/src/components/context-menu.css",
"chars": 203,
"preview": "@import './_internal/base-menu.css';\n\n.rt-ContextMenuContent {\n max-height: var(--radix-context-menu-content-available-"
},
{
"path": "packages/radix-ui-themes/src/components/context-menu.props.tsx",
"chars": 286,
"preview": "export {\n baseMenuContentPropDefs as contextMenuContentPropDefs,\n baseMenuItemPropDefs as contextMenuItemPropDefs,\n b"
},
{
"path": "packages/radix-ui-themes/src/components/context-menu.tsx",
"chars": 14577,
"preview": "'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { ContextMenu as ContextMenuP"
}
]
// ... and 244 more files (download for full content)
About this extraction
This page contains the full source code of the radix-ui/themes GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 444 files (1.2 MB), approximately 332.9k tokens, and a symbol index with 577 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.