A design system in a box.
hip-ui.tngl.io/docs/introduction
add headerlayout
+529
-64
+113
apps/docs/src/components/header-layout/index.tsx
+113
apps/docs/src/components/header-layout/index.tsx
···
1
+
"use client";
2
+
3
+
import * as stylex from "@stylexjs/stylex";
4
+
5
+
import { spacing } from "../theme/spacing.stylex";
6
+
import { StyleXComponentProps } from "../theme/types";
7
+
import { uiColor } from "../theme/color.stylex";
8
+
import { containerBreakpoints } from "../theme/media-queries.stylex";
9
+
10
+
const styles = stylex.create({
11
+
root: {
12
+
"--page-content-max-width": "1280px",
13
+
minHeight: "100vh",
14
+
display: "flex",
15
+
flexDirection: "column",
16
+
backgroundColor: uiColor.bg,
17
+
containerType: "inline-size",
18
+
width: "100cqw",
19
+
},
20
+
header: {
21
+
flexShrink: 0,
22
+
},
23
+
page: {
24
+
flexGrow: 1,
25
+
minHeight: 0,
26
+
paddingTop: {
27
+
default: spacing["2"],
28
+
[containerBreakpoints.sm]: spacing["6"],
29
+
},
30
+
paddingBottom: {
31
+
default: spacing["10"],
32
+
[containerBreakpoints.sm]: spacing["12"],
33
+
},
34
+
paddingLeft: {
35
+
default: spacing["4"],
36
+
[containerBreakpoints.sm]: spacing["8"],
37
+
},
38
+
paddingRight: {
39
+
default: spacing["4"],
40
+
[containerBreakpoints.sm]: spacing["8"],
41
+
},
42
+
maxWidth: "var(--page-content-max-width)",
43
+
width: "100%",
44
+
marginLeft: "auto",
45
+
marginRight: "auto",
46
+
boxSizing: "border-box",
47
+
},
48
+
footer: {
49
+
flexShrink: 0,
50
+
},
51
+
});
52
+
53
+
/**
54
+
* Header layout root component. Main container for the page layout.
55
+
*/
56
+
export interface HeaderLayoutRootProps
57
+
extends StyleXComponentProps<React.ComponentProps<"div">> {}
58
+
59
+
export const HeaderLayoutRoot = ({
60
+
style,
61
+
...props
62
+
}: HeaderLayoutRootProps) => {
63
+
return <div {...props} {...stylex.props(styles.root, style)} />;
64
+
};
65
+
66
+
/**
67
+
* Header layout header component. Slot for header content.
68
+
*/
69
+
export interface HeaderLayoutHeaderProps
70
+
extends StyleXComponentProps<React.ComponentProps<"header">> {}
71
+
72
+
export const HeaderLayoutHeader = ({
73
+
style,
74
+
...props
75
+
}: HeaderLayoutHeaderProps) => {
76
+
return <header {...props} {...stylex.props(styles.header, style)} />;
77
+
};
78
+
79
+
/**
80
+
* Header layout page component. Slot for main page content.
81
+
*/
82
+
export interface HeaderLayoutPageProps
83
+
extends StyleXComponentProps<React.ComponentProps<"main">> {}
84
+
85
+
export const HeaderLayoutPage = ({
86
+
style,
87
+
...props
88
+
}: HeaderLayoutPageProps) => {
89
+
return <main {...props} {...stylex.props(styles.page, style)} />;
90
+
};
91
+
92
+
/**
93
+
* Header layout footer component. Slot for footer content.
94
+
*/
95
+
export interface HeaderLayoutFooterProps
96
+
extends StyleXComponentProps<React.ComponentProps<"footer">> {}
97
+
98
+
export const HeaderLayoutFooter = ({
99
+
style,
100
+
...props
101
+
}: HeaderLayoutFooterProps) => {
102
+
return <footer {...props} {...stylex.props(styles.footer, style)} />;
103
+
};
104
+
105
+
/**
106
+
* Header layout component with subcomponents.
107
+
*/
108
+
export const HeaderLayout = {
109
+
Root: HeaderLayoutRoot,
110
+
Header: HeaderLayoutHeader,
111
+
Page: HeaderLayoutPage,
112
+
Footer: HeaderLayoutFooter,
113
+
};
+39
apps/docs/src/examples/header-layout/basic.tsx
+39
apps/docs/src/examples/header-layout/basic.tsx
···
1
+
import { HeaderLayout } from "@/components/header-layout";
2
+
import { Navbar, NavbarLogo, NavbarNavigation, NavbarLink } from "@/components/navbar";
3
+
4
+
function Logo() {
5
+
return (
6
+
<svg
7
+
width="32"
8
+
height="32"
9
+
viewBox="0 0 120 120"
10
+
fill="currentColor"
11
+
xmlns="http://www.w3.org/2000/svg"
12
+
>
13
+
<circle cx="60" cy="60" r="50" stroke="currentColor" strokeWidth="2" />
14
+
</svg>
15
+
);
16
+
}
17
+
18
+
export function Basic() {
19
+
return (
20
+
<HeaderLayout.Root>
21
+
<HeaderLayout.Header>
22
+
<Navbar>
23
+
<NavbarLogo>
24
+
<Logo />
25
+
</NavbarLogo>
26
+
<NavbarNavigation justify="right">
27
+
<NavbarLink href="/dashboard">Dashboard</NavbarLink>
28
+
<NavbarLink href="/projects">Projects</NavbarLink>
29
+
<NavbarLink href="/settings">Settings</NavbarLink>
30
+
</NavbarNavigation>
31
+
</Navbar>
32
+
</HeaderLayout.Header>
33
+
<HeaderLayout.Page>
34
+
<h1>Page Content</h1>
35
+
<p>This is the main page content area.</p>
36
+
</HeaderLayout.Page>
37
+
</HeaderLayout.Root>
38
+
);
39
+
}
+58
apps/docs/src/examples/header-layout/styled.tsx
+58
apps/docs/src/examples/header-layout/styled.tsx
···
1
+
import { HeaderLayout } from "@/components/header-layout";
2
+
import {
3
+
Navbar,
4
+
NavbarLogo,
5
+
NavbarNavigation,
6
+
NavbarLink,
7
+
} from "@/components/navbar";
8
+
import { Footer } from "@/components/footer";
9
+
10
+
function Logo() {
11
+
return (
12
+
<svg
13
+
width="32"
14
+
height="32"
15
+
viewBox="0 0 120 120"
16
+
fill="currentColor"
17
+
xmlns="http://www.w3.org/2000/svg"
18
+
>
19
+
<circle cx="60" cy="60" r="50" stroke="currentColor" strokeWidth="2" />
20
+
</svg>
21
+
);
22
+
}
23
+
24
+
export function Styled() {
25
+
return (
26
+
<HeaderLayout.Root>
27
+
<HeaderLayout.Header>
28
+
<Navbar>
29
+
<NavbarLogo>
30
+
<Logo />
31
+
</NavbarLogo>
32
+
<NavbarNavigation justify="right">
33
+
<NavbarLink href="/dashboard">Dashboard</NavbarLink>
34
+
<NavbarLink href="/projects">Projects</NavbarLink>
35
+
<NavbarLink href="/settings">Settings</NavbarLink>
36
+
</NavbarNavigation>
37
+
</Navbar>
38
+
</HeaderLayout.Header>
39
+
<HeaderLayout.Page>
40
+
<h1>Page Content</h1>
41
+
<p>This is the main page content area with default styling applied.</p>
42
+
<p>
43
+
The HeaderLayout component provides styled slots that work out of the
44
+
box, but you can override styles as needed.
45
+
</p>
46
+
</HeaderLayout.Page>
47
+
<HeaderLayout.Footer>
48
+
<Footer.Root isCentered>
49
+
<Footer.Section>
50
+
<Footer.Copyright>
51
+
© 2025 Company Name. All rights reserved.
52
+
</Footer.Copyright>
53
+
</Footer.Section>
54
+
</Footer.Root>
55
+
</HeaderLayout.Footer>
56
+
</HeaderLayout.Root>
57
+
);
58
+
}
+2
packages/hip-ui/src/cli/install.tsx
+2
packages/hip-ui/src/cli/install.tsx
···
43
43
import { footerConfig } from "../components/footer/footer-config.js";
44
44
import { formConfig } from "../components/form/form-config.js";
45
45
import { gridConfig } from "../components/grid/grid-config.js";
46
+
import { headerLayoutConfig } from "../components/header-layout/header-layout-config.js";
46
47
import { hoverCardConfig } from "../components/hover-card/hover-card-config.js";
47
48
import { iconButtonConfig } from "../components/icon-button/icon-button-config.js";
48
49
import { kbdConfig } from "../components/kbd/kbd-config.js";
···
138
139
fileDropZoneConfig,
139
140
footerConfig,
140
141
formConfig,
142
+
headerLayoutConfig,
141
143
tableConfig,
142
144
sliderConfig,
143
145
tagGroupConfig,
+13
packages/hip-ui/src/components/header-layout/header-layout-config.ts
+13
packages/hip-ui/src/components/header-layout/header-layout-config.ts
···
1
+
import { ComponentConfig } from "../../types";
2
+
3
+
export const headerLayoutConfig: ComponentConfig = {
4
+
name: "header-layout",
5
+
filepath: "./index.tsx",
6
+
hipDependencies: [
7
+
"../theme/spacing.stylex.tsx",
8
+
"../theme/color.stylex.tsx",
9
+
"../theme/types.ts",
10
+
],
11
+
dependencies: {},
12
+
};
13
+
+113
packages/hip-ui/src/components/header-layout/index.tsx
+113
packages/hip-ui/src/components/header-layout/index.tsx
···
1
+
"use client";
2
+
3
+
import * as stylex from "@stylexjs/stylex";
4
+
5
+
import { spacing } from "../theme/spacing.stylex";
6
+
import { StyleXComponentProps } from "../theme/types";
7
+
import { uiColor } from "../theme/color.stylex";
8
+
import { containerBreakpoints } from "../theme/media-queries.stylex";
9
+
10
+
const styles = stylex.create({
11
+
root: {
12
+
"--page-content-max-width": "1280px",
13
+
minHeight: "100vh",
14
+
display: "flex",
15
+
flexDirection: "column",
16
+
backgroundColor: uiColor.bg,
17
+
containerType: "inline-size",
18
+
width: "100cqw",
19
+
},
20
+
header: {
21
+
flexShrink: 0,
22
+
},
23
+
page: {
24
+
flexGrow: 1,
25
+
minHeight: 0,
26
+
paddingTop: {
27
+
default: spacing["2"],
28
+
[containerBreakpoints.sm]: spacing["6"],
29
+
},
30
+
paddingBottom: {
31
+
default: spacing["10"],
32
+
[containerBreakpoints.sm]: spacing["12"],
33
+
},
34
+
paddingLeft: {
35
+
default: spacing["4"],
36
+
[containerBreakpoints.sm]: spacing["8"],
37
+
},
38
+
paddingRight: {
39
+
default: spacing["4"],
40
+
[containerBreakpoints.sm]: spacing["8"],
41
+
},
42
+
maxWidth: "var(--page-content-max-width)",
43
+
width: "100%",
44
+
marginLeft: "auto",
45
+
marginRight: "auto",
46
+
boxSizing: "border-box",
47
+
},
48
+
footer: {
49
+
flexShrink: 0,
50
+
},
51
+
});
52
+
53
+
/**
54
+
* Header layout root component. Main container for the page layout.
55
+
*/
56
+
export interface HeaderLayoutRootProps
57
+
extends StyleXComponentProps<React.ComponentProps<"div">> {}
58
+
59
+
export const HeaderLayoutRoot = ({
60
+
style,
61
+
...props
62
+
}: HeaderLayoutRootProps) => {
63
+
return <div {...props} {...stylex.props(styles.root, style)} />;
64
+
};
65
+
66
+
/**
67
+
* Header layout header component. Slot for header content.
68
+
*/
69
+
export interface HeaderLayoutHeaderProps
70
+
extends StyleXComponentProps<React.ComponentProps<"header">> {}
71
+
72
+
export const HeaderLayoutHeader = ({
73
+
style,
74
+
...props
75
+
}: HeaderLayoutHeaderProps) => {
76
+
return <header {...props} {...stylex.props(styles.header, style)} />;
77
+
};
78
+
79
+
/**
80
+
* Header layout page component. Slot for main page content.
81
+
*/
82
+
export interface HeaderLayoutPageProps
83
+
extends StyleXComponentProps<React.ComponentProps<"main">> {}
84
+
85
+
export const HeaderLayoutPage = ({
86
+
style,
87
+
...props
88
+
}: HeaderLayoutPageProps) => {
89
+
return <main {...props} {...stylex.props(styles.page, style)} />;
90
+
};
91
+
92
+
/**
93
+
* Header layout footer component. Slot for footer content.
94
+
*/
95
+
export interface HeaderLayoutFooterProps
96
+
extends StyleXComponentProps<React.ComponentProps<"footer">> {}
97
+
98
+
export const HeaderLayoutFooter = ({
99
+
style,
100
+
...props
101
+
}: HeaderLayoutFooterProps) => {
102
+
return <footer {...props} {...stylex.props(styles.footer, style)} />;
103
+
};
104
+
105
+
/**
106
+
* Header layout component with subcomponents.
107
+
*/
108
+
export const HeaderLayout = {
109
+
Root: HeaderLayoutRoot,
110
+
Header: HeaderLayoutHeader,
111
+
Page: HeaderLayoutPage,
112
+
Footer: HeaderLayoutFooter,
113
+
};