Install Radix Themes and start building in minutes.
安装 Radix 主题并在几分钟内开始构建。
Radix Themes is a pre-styled component library that is designed to work out of the box with minimal configuration. If you are looking for the unstyled components, go to Radix Primitives.
Radix 主题是一个预设样式的组件库，旨在通过最少的配置即可开箱即用。如果您正在寻找未设置样式的组件，请查看 Radix Primitives。
Getting up and running is quick and easy.
快速上手简单易行。
Install the package from your command line.
从命令行安装软件包。
npm install @radix-ui/themesImport the global CSS file at the root of your application.
在应用程序的根目录导入全局 CSS 文件。
import '@radix-ui/themes/styles.css';
Add Theme to your application, wrapping the root component inside of body.
将 Theme 添加到您的应用程序中，将根组件包裹在 body 内。
import { Theme } from '@radix-ui/themes';
export default function () {
return (
<html>
<body>
<Theme>
<MyApp />
</Theme>
</body>
</html>
);
}
You are now ready to use Radix Themes components.
您现在可以使用 Radix Themes 组件了。
import { Flex, Text, Button } from '@radix-ui/themes';
export default function MyApp() {
return (
<Flex direction="column" gap="2">
<Text>Hello from Radix Themes :)</Text>
<Button>Let's go</Button>
</Flex>
);
}
Configuration is managed and applied via the Theme component.
配置通过主题组件进行管理和应用。
Pass configuration to the Theme to customize appearance.
将配置传递给 Theme 以自定义外观。
<Theme accentColor="crimson" grayColor="sand" radius="large" scaling="95%">
<MyApp />
</Theme>
ThemePanel is a drop-in component that allows you to preview the theme in real time. Visit the component playground to see it in action.
ThemePanel 是一个即插即用的组件，允许您实时预览主题。访问组件游乐场以查看其运行情况。
To add ThemePanel to your app, import it from the package and drop it inside your root Theme.
要将 ThemePanel 添加到您的应用程序中，请从包中导入它，并将其放入您的根 Theme 中。
import { Theme, ThemePanel } from '@radix-ui/themes';
export default function () {
return (
<Theme>
<MyApp />
<ThemePanel />
</Theme>
);
}
Get the most out of Radix Themes by exploring more concepts and features.
探索更多概念和功能，充分利用 Radix Themes。
Learn how to approach styling and overrides with Radix Themes.
了解如何使用 Radix Themes 处理样式和覆盖。
Get to know the layout primitives and their available properties.
了解布局原语及其可用属性。
Anatomy of a theme and how to create the perfect style for your app.
主题的结构以及如何为您的应用创建完美风格。
Understand the color system and its application in your theme.
了解色彩系统及其在你的主题中的应用。
Integrate a great looking dark mode into your app using appearances.
使用外观功能将漂亮的深色模式集成到您的应用程序中。
Add custom typefaces and fine tune typographic details.
添加自定义字体并微调排版细节。
Getting started – Radix Themes