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]() /ˌ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//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 ================================================ ## Description ## Testing steps ## Relates issues / PRs ================================================ 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 ` 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 ` 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 ================================================ [![Radix Themes Logo](https://radix-ui.com/social/themes.png)](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 {children}; } ================================================ 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 ( ); } 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 ( ); } export function Theme(props: ThemeProps) { return ( } > ); } 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 ( {users.map((user) => { return ( {user.name} {user.handle} {user.name} Edit and save details below. Name Role Viewer Maintainer Contributor Admin ); })} ); } ================================================ 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 ( {(['row', 'column'] as const).map((direction) => (
Docs
))} ); } ================================================ FILE: apps/playground/app/(themeable)/layout.tsx ================================================ import { Theme, ThemePanel } from '@radix-ui/themes'; export default function Layout({ children }: LayoutProps<'/'>) { return ( {children} ); } ================================================ 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) { return ( New Tab New Window New Private Window More Tools Save Page As… Create Shortcut… Name Window… Developer Tools Other Print Logout {props.variant === 'solid' && ( <> Show Bookmarks Show Full URLs People Pedro Duarte Colm Tuite Delete )} ); } export function ContextMenuContentDemo(props: React.ComponentProps) { return ( New Tab New Window New Private Window More Tools Save Page As… Create Shortcut… Name Window… Developer Tools Other Print Logout {props.variant === 'solid' && ( <> Show Bookmarks Show Full URLs People Pedro Duarte Colm Tuite Delete )} ); } type RightClickAreaProps = React.ComponentProps & { size: '1' | '2'; }; export function RightClickArea({ size = '2', ...props }: RightClickAreaProps) { return ( Right-click here ); } export function SelectItemsDemo() { return ( <> Fruits Orange Apple Grape Vegetables Carrot Potato ); } export function AspectRatioImage() { return ( A house in a forest ); } export function CustomUserIcon() { return ( ); } export function SampleNestedUI({ children, title, ...props }: React.ComponentPropsWithRef) { return (
{title} Feedback