扫一扫分享
Radix UI是一个轻量级的开源组件库,旨在帮助开发者构建高质量的应用程序。它提供了许多实用的组件,如菜单、对话框、气泡等,而且易于使用并且高度可定制。Radix UI 还提供了许多工具和模板,可以帮助开发者快速构建应用程序。
1.安装Radix主题
npm install @radix-ui/themes
2.导入css文件
import '@radix-ui/themes/styles.css';
3.添加主题组件
添加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>
);
}
手机预览