Something went wrong. Try again.
A design system in a box. hip-ui.tngl.io/docs/introduction
Something went wrong. Try again.
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364import * as stylex from "@stylexjs/stylex";
import { Sidebar, SidebarGroup, SidebarHeader, SidebarItem, SidebarSection,} from "@/components/sidebar";
import { uiColor } from "../../components/theme/color.stylex";
const styles = stylex.create({ wrapper: { backgroundColor: uiColor.bg, boxSizing: "border-box", height: 400, width: "100%", }, sidebar: { overflow: "auto", backgroundColor: uiColor.bgSubtle, boxSizing: "border-box", borderRightColor: uiColor.border2, borderRightStyle: "solid", borderRightWidth: 1, height: "100%", },});
export function Basic() { return ( <div {...stylex.props(styles.wrapper)}> <Sidebar style={styles.sidebar}> <SidebarHeader>My App</SidebarHeader> <SidebarSection> <SidebarItem isActive>Dashboard</SidebarItem> <SidebarItem>Projects </SidebarItem> <SidebarItem>Settings </SidebarItem> </SidebarSection>
<SidebarSection title="Settings"> <SidebarItem>General</SidebarItem> <SidebarItem>Team</SidebarItem> <SidebarItem>Billing</SidebarItem> </SidebarSection>
<SidebarGroup title="Reports"> <SidebarSection title="Analytics"> <SidebarItem>Overview</SidebarItem> <SidebarItem>Sales</SidebarItem> <SidebarItem>Customers</SidebarItem> </SidebarSection> <SidebarSection title="Teams"> <SidebarItem>Team 1</SidebarItem> <SidebarItem>Team 2</SidebarItem> <SidebarItem>Team 3</SidebarItem> </SidebarSection> </SidebarGroup> </Sidebar> </div> );}