hipstersmoothie.com
A design system in a box.
hip-ui.tngl.io/docs/introduction
1import { Flex } from "@/components/flex";
2import { Switch } from "@/components/switch";
3
4export function SwitchWithDescription() {
5 return (
6 <Flex direction="column" gap="2xl">
7 <div>
8 <Switch>Enable notifications</Switch>
9 <div
10 style={{ fontSize: "0.875rem", color: "#666", marginTop: "0.25rem" }}
11 >
12 Receive email notifications about important updates
13 </div>
14 </div>
15 <div>
16 <Switch>Dark mode</Switch>
17 <div
18 style={{ fontSize: "0.875rem", color: "#666", marginTop: "0.25rem" }}
19 >
20 Switch to dark theme for better viewing in low light
21 </div>
22 </div>
23 </Flex>
24 );
25}