Introduction to RedixUI
RedixUi library for improving coding process through the provision of ready to use components such as buttons, Boxes, Typographs, Container, Grides and much more, it also support theme changing. all this simplify the styling process and make development faster with its clean UIs.
Getting Started with Radix Themes
Installation
Getting up and running with Radix Themes is quick and easy. Follow these steps:
- Install Radix Themes:
- Import the CSS file: >
- Add the Theme component:
- Start building:
npm install @radix-ui/themesimport '@radix-ui/themes/styles.css';
import { Theme } from '@radix-ui/themes';
export default function () {
return (
<html>
<body>
<Theme>
<MyApp />
</Theme>
</body>
</html>
);
}
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>
);
}
Customizing Your Theme
Configuration is managed and applied via the Theme component. Customize the appearance with basic configuration:
<Theme accentColor="crimson" grayColor="sand" radius="large" scaling="95%">
<MyApp />
</Theme>
Using the Theme Panel
ThemePanel is a drop-in component that allows you to preview the theme configuration in real-time. Add it to your app:
import { Theme, ThemePanel } from '@radix-ui/themes';
export default function () {
return (
<Theme>
<MyApp />
<ThemePanel />
</Theme>
);
}
0 Comments