开始使用

安装 Radix 主题并在几分钟内开始构建。

Radix 主题是一个预样式组件库，旨在开箱即用，配置简单。如果您正在寻找未样式的组件，请访问 Radix Primitives。

安装

快速轻松地启动和运行。

1. 安装 Radix 主题

从命令行安装该包。

npm install @radix-ui/themes

2. 导入 CSS 文件

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

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

3. 添加主题组件

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

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

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

4. 开始构建

您现在可以使用 Radix 主题组件。

import { Flex, Text, Button } from "@radix-ui/themes";

export default function MyApp() {
	return (
		<Flex direction="column" gap="2">
			<Text>来自 Radix 主题的问候 :)</Text>
			<Button>让我们开始</Button>
		</Flex>
	);
}

自定义您的主题

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

基本配置

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

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

使用主题面板

ThemePanel 是一个可即插即用的组件，允许您实时预览主题。访问组件游乐场来查看其实际效果。

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

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

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