# radix-ui/themes

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/radix-ui-themes).**

8,490 stars · 328 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/radix-ui/themes
- Homepage: https://radix-ui.com/themes
- awesome-repositories: https://awesome-repositories.com/repository/radix-ui-themes.md

## Topics

`accessibility` `colors` `component-library` `design-systems` `radix-ui` `react` `theme-development` `themes` `ui` `ui-components` `ui-kit`

## Description

This project is an accessible UI component library and themed design system. It provides a collection of pre-made user interface components designed to meet accessibility standards and maintain a consistent visual identity across web applications.

The system includes an interactive theme previewer, which allows for the adjustment and testing of visual settings in real time within a running application.

It covers global theme management and design system implementation through root configurations and a token-driven approach. The library supports rapid frontend prototyping by offering a set of optimized components to reduce manual styling.

## Tags

### User Interface & Experience

- [Accessible UI Components](https://awesome-repositories.com/f/user-interface-experience/accessible-ui-components.md) — Provides a comprehensive library of interactive UI components built with ARIA and keyboard support to ensure universal usability. ([source](https://radix-ui.com/themes))
- [Accessible Component Libraries](https://awesome-repositories.com/f/user-interface-experience/accessible-component-libraries.md) — Ships a collection of UI components specifically optimized for compliance with modern accessibility standards.
- [Accessible UI Frameworks](https://awesome-repositories.com/f/user-interface-experience/accessible-ui-frameworks.md) — Offers a framework for building web interfaces that adhere to accessibility standards through pre-made components.
- [Component Composition Primitives](https://awesome-repositories.com/f/user-interface-experience/component-architectures/component-composition/component-composition-primitives.md) — Combines small, accessible primitives with design tokens to build complex and consistent user interface elements.
- [CSS Variable Theming](https://awesome-repositories.com/f/user-interface-experience/css-variable-theming.md) — Uses native CSS custom properties to propagate design tokens and visual configurations from a root provider to nested components.
- [Design Token Systems](https://awesome-repositories.com/f/user-interface-experience/design-token-systems.md) — Implements a design token system that maps semantic labels to specific values for consistent visual identity.
- [Theme Configuration Systems](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/design-systems/theme-architecture-frameworks/theme-configuration-systems.md) — Provides a system for managing visual consistency through centralized theme configurations and root wrappers.
- [Theme Customization Previews](https://awesome-repositories.com/f/user-interface-experience/interactive-design-previews/theme-customization-previews.md) — Features an interactive real-time panel for testing and adjusting visual settings and themes during development.
- [Real-Time Component Previews](https://awesome-repositories.com/f/user-interface-experience/real-time-component-previews.md) — Includes an interactive panel for adjusting and rendering live visual representations of UI components and themes in real time. ([source](https://radix-ui.com/themes/docs))
- [Global Theme Instances](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/css-utility-libraries/css-utilities/global-css-stylings/global-theme-instances.md) — Utilizes centralized configuration objects to maintain a consistent visual style across all application components.
- [Visual Theme Configurations](https://awesome-repositories.com/f/user-interface-experience/visual-theme-configurations.md) — Provides a root wrapper for applying standardized global styles, palettes, and spacing across the entire application. ([source](https://radix-ui.com/themes/docs))

### Software Engineering & Architecture

- [Design System Implementations](https://awesome-repositories.com/f/software-engineering-architecture/design-system-implementations.md) — Implements a full design system framework to scale a consistent visual language across an entire project.
- [Theme and Locale Propagation](https://awesome-repositories.com/f/software-engineering-architecture/object-oriented-models/widget-tree-hierarchies/theme-and-locale-propagation.md) — Distributes visual styles and design settings throughout the component tree using a provider and consumer pattern.

### Web Development

- [Accessibility-First Patterns](https://awesome-repositories.com/f/web-development/component-architecture-patterns/accessibility-first-patterns.md) — Implements core component structures based on WAI-ARIA patterns to ensure full keyboard and screen reader compatibility.

### Development Tools & Productivity

- [Frontend Layout Prototyping](https://awesome-repositories.com/f/development-tools-productivity/rapid-software-prototyping/frontend-layout-prototyping.md) — Accelerates frontend development by providing optimized components that reduce manual styling and layout effort.