开始使用

安装 Radix Themes，几分钟内即可开始构建。

Radix Themes 是一个预置样式的组件库，旨在开箱即用，只需最少的配置。如果您正在寻找无样式的组件，请访问Radix Primitives。

安装

快速且轻松地启动和运行。

1. 安装 Radix Themes

从命令行安装软件包。

npm install @radix-ui/themes

2. 导入 CSS 文件

在应用程序的根目录导入全局 CSS 文件。

import "@radix-ui/themes/styles.css";

3. 添加 Theme 组件

将 Theme 添加到您的应用程序，将根组件包裹在 body 中。

import { Theme } from "@radix-ui/themes";

export default function () {
	return (
		<html>
			<body>
				<Theme>
					<MyApp />
				</Theme>
			</body>
		</html>
	);
}

4. 开始构建

您现在可以开始使用 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>
	);
}

自定义您的主题

配置通过 Theme 组件进行管理和应用。

基本配置

将配置传递给 Theme 以自定义外观。

<Theme accentColor="crimson" grayColor="sand" radius="large" scaling="95%">
	<MyApp />
</Theme>

使用主题面板

ThemePanel 是一个即插即用组件，允许您实时预览主题。访问组件 Playground 以查看实际效果。

要将 ThemePanel 添加到您的应用程序，请从包中导入它，并将其放入根 Theme 中。

import { Theme, ThemePanel } from "@radix-ui/themes";

export default function () {
	return (
		<Theme>
			<MyApp />
			<ThemePanel />
		</Theme>
	);
}