hipstersmoothie.com
A design system in a box.
hip-ui.tngl.io/docs/introduction
1import { HeaderLayout } from "@/components/header-layout";
2import {
3 Navbar,
4 NavbarLink,
5 NavbarLogo,
6 NavbarNavigation,
7} from "@/components/navbar";
8
9function Logo() {
10 return (
11 <svg
12 width="32"
13 height="32"
14 viewBox="0 0 120 120"
15 fill="currentColor"
16 xmlns="http://www.w3.org/2000/svg"
17 >
18 <circle cx="60" cy="60" r="50" stroke="currentColor" strokeWidth="2" />
19 </svg>
20 );
21}
22
23export function Basic() {
24 return (
25 <HeaderLayout.Root>
26 <HeaderLayout.Header>
27 <Navbar>
28 <NavbarLogo>
29 <Logo />
30 </NavbarLogo>
31 <NavbarNavigation justify="right">
32 <NavbarLink href="/">Dashboard</NavbarLink>
33 <NavbarLink href="/doc-examples/projects">Projects</NavbarLink>
34 <NavbarLink href="/doc-examples/settings">Settings</NavbarLink>
35 </NavbarNavigation>
36 </Navbar>
37 </HeaderLayout.Header>
38 <HeaderLayout.Page>
39 <h1>Page Content</h1>
40 <p>This is the main page content area.</p>
41 </HeaderLayout.Page>
42 </HeaderLayout.Root>
43 );
44}