A design system in a box.
hip-ui.tngl.io/docs/introduction
1import{t as e}from"./jsx-runtime-D-oznMWL.js";import{t}from"./button-B3FtKFjE.js";import{t as n}from"./PropDocs-CM9cNaM3.js";import{r}from"./typography-DYed328x.js";import{t as i}from"./flex-oubf-_sd.js";import{t as a}from"./text-B77JGejP.js";import{t as o}from"./Example-DfDcphuv.js";import{t as s}from"./footer-C84s9ktq.js";import{t as c}from"./header-layout-BHV5EqAr.js";import{c as l,i as u,o as d,s as f}from"./navbar-slF73zu5.js";var p=e();function m(){return(0,p.jsx)(`svg`,{width:`32`,height:`32`,viewBox:`0 0 120 120`,fill:`currentColor`,xmlns:`http://www.w3.org/2000/svg`,children:(0,p.jsx)(`circle`,{cx:`60`,cy:`60`,r:`50`,stroke:`currentColor`,strokeWidth:`2`})})}function h(){return(0,p.jsxs)(c.Root,{children:[(0,p.jsx)(c.Header,{children:(0,p.jsxs)(u,{children:[(0,p.jsx)(f,{children:(0,p.jsx)(m,{})}),(0,p.jsxs)(l,{justify:`right`,children:[(0,p.jsx)(d,{href:`/`,children:`Dashboard`}),(0,p.jsx)(d,{href:`/doc-examples/projects`,children:`Projects`}),(0,p.jsx)(d,{href:`/doc-examples/settings`,children:`Settings`})]})]})}),(0,p.jsxs)(c.Page,{children:[(0,p.jsx)(`h1`,{children:`Page Content`}),(0,p.jsx)(`p`,{children:`This is the main page content area.`})]})]})}h.slug=`/examples/header-layout/basic`;function g(){return(0,p.jsx)(`svg`,{width:`32`,height:`32`,viewBox:`0 0 120 120`,fill:`currentColor`,xmlns:`http://www.w3.org/2000/svg`,children:(0,p.jsx)(`circle`,{cx:`60`,cy:`60`,r:`50`,stroke:`currentColor`,strokeWidth:`2`})})}function _(){return(0,p.jsxs)(c.Root,{children:[(0,p.jsx)(c.Header,{children:(0,p.jsxs)(u,{children:[(0,p.jsx)(f,{children:(0,p.jsx)(g,{})}),(0,p.jsxs)(l,{justify:`right`,children:[(0,p.jsx)(d,{href:`/doc-examples/dashboard`,children:`Dashboard`}),(0,p.jsx)(d,{href:`/doc-examples/projects`,children:`Projects`}),(0,p.jsx)(d,{href:`/doc-examples/settings`,children:`Settings`})]})]})}),(0,p.jsxs)(c.Page,{children:[(0,p.jsx)(`h1`,{children:`Page Content`}),(0,p.jsx)(`p`,{children:`This is the main page content area.`})]}),(0,p.jsx)(c.Footer,{children:(0,p.jsx)(s.Root,{children:(0,p.jsx)(s.Section,{children:(0,p.jsx)(s.Copyright,{children:`© 2025 Company Name. All rights reserved.`})})})})]})}_.slug=`/examples/header-layout/with-footer`;var v={heroTitle:{kogj98:`x1ghz6dp`,$$css:!0}};function y(){return(0,p.jsx)(`svg`,{width:`32`,height:`32`,viewBox:`0 0 120 120`,fill:`currentColor`,xmlns:`http://www.w3.org/2000/svg`,children:(0,p.jsx)(`circle`,{cx:`60`,cy:`60`,r:`50`,stroke:`currentColor`,strokeWidth:`2`})})}function b(){return(0,p.jsxs)(c.Root,{children:[(0,p.jsx)(c.Header,{children:(0,p.jsxs)(u,{children:[(0,p.jsx)(f,{children:(0,p.jsx)(y,{})}),(0,p.jsxs)(l,{justify:`right`,children:[(0,p.jsx)(d,{href:`/doc-examples/dashboard`,children:`Dashboard`}),(0,p.jsx)(d,{href:`/doc-examples/projects`,children:`Projects`}),(0,p.jsx)(d,{href:`/doc-examples/settings`,children:`Settings`})]})]})}),(0,p.jsx)(c.Hero,{children:(0,p.jsxs)(i,{direction:`column`,gap:`7xl`,align:`start`,children:[(0,p.jsxs)(i,{direction:`column`,children:[(0,p.jsx)(r,{style:v.heroTitle,children:`Welcome to Our Platform`}),(0,p.jsx)(a,{children:`This is a hero section with a primary color background.`})]}),(0,p.jsx)(t,{children:`Get Started`})]})}),(0,p.jsxs)(c.Page,{children:[(0,p.jsx)(`h2`,{children:`Page Content`}),(0,p.jsx)(`p`,{children:`This is the main page content area.`})]})]})}b.slug=`/examples/header-layout/with-hero`;function x(){return(0,p.jsx)(`svg`,{width:`32`,height:`32`,viewBox:`0 0 120 120`,fill:`currentColor`,xmlns:`http://www.w3.org/2000/svg`,children:(0,p.jsx)(`circle`,{cx:`60`,cy:`60`,r:`50`,stroke:`currentColor`,strokeWidth:`2`})})}function S(){return(0,p.jsxs)(c.Root,{children:[(0,p.jsx)(c.Header,{children:(0,p.jsxs)(u,{children:[(0,p.jsx)(f,{children:(0,p.jsx)(x,{})}),(0,p.jsxs)(l,{justify:`right`,children:[(0,p.jsx)(d,{href:`/`,children:`Dashboard`}),(0,p.jsx)(d,{href:`/doc-examples/projects`,children:`Projects`}),(0,p.jsx)(d,{href:`/doc-examples/settings`,children:`Settings`})]})]})}),(0,p.jsxs)(c.Page,{children:[(0,p.jsx)(`h1`,{children:`Page Content`}),(0,p.jsx)(`p`,{children:`This is the main page content area with default styling applied.`}),(0,p.jsx)(`p`,{children:`The HeaderLayout component provides styled slots that work out of the box, but you can override styles as needed.`})]}),(0,p.jsx)(c.Footer,{children:(0,p.jsx)(s.Root,{isCentered:!0,children:(0,p.jsx)(s.Section,{children:(0,p.jsx)(s.Copyright,{children:`© 2025 Company Name. All rights reserved.`})})})})]})}S.slug=`/examples/header-layout/styled`;var C=[{depth:2,value:`Installation`,id:`installation`},{depth:2,value:`Features`,id:`features`,children:[{depth:3,value:`Basic`,id:`basic`},{depth:3,value:`With Footer`,id:`with-footer`},{depth:3,value:`With Hero`,id:`with-hero`}]},{depth:2,value:`Props`,id:`props`},{depth:2,value:`Related Components`,id:`related-components`}];function w(e){let t={a:`a`,code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,span:`span`,ul:`ul`,...e.components};return(0,p.jsxs)(p.Fragment,{children:[(0,p.jsx)(o,{src:S,noPadding:!0}),`
2`,(0,p.jsx)(t.h2,{id:`installation`,children:`Installation`}),`
3`,(0,p.jsx)(t.p,{children:`Run the following command to add the header layout component to your project.`}),`
4`,(0,p.jsx)(p.Fragment,{children:(0,p.jsx)(t.pre,{className:`shiki shiki-themes github-light github-dark`,style:{backgroundColor:`light-dark(#fff, #24292e)`,"--shiki-light-bg":`#fff`,"--shiki-dark-bg":`#24292e`,color:`light-dark(#24292e, #e1e4e8)`,"--shiki-light":`#24292e`,"--shiki-dark":`#e1e4e8`},tabIndex:`0`,children:(0,p.jsx)(t.code,{className:`language-bash`,children:(0,p.jsxs)(t.span,{className:`line`,children:[(0,p.jsx)(t.span,{style:{color:`light-dark(#6F42C1, #B392F0)`,"--shiki-light":`#6F42C1`,"--shiki-dark":`#B392F0`},children:`pnpm`}),(0,p.jsx)(t.span,{style:{color:`light-dark(#032F62, #9ECBFF)`,"--shiki-light":`#032F62`,"--shiki-dark":`#9ECBFF`},children:` hip`}),(0,p.jsx)(t.span,{style:{color:`light-dark(#032F62, #9ECBFF)`,"--shiki-light":`#032F62`,"--shiki-dark":`#9ECBFF`},children:` install`}),(0,p.jsx)(t.span,{style:{color:`light-dark(#032F62, #9ECBFF)`,"--shiki-light":`#032F62`,"--shiki-dark":`#9ECBFF`},children:` header-layout`})]})})})}),`
5`,(0,p.jsx)(t.h2,{id:`features`,children:`Features`}),`
6`,(0,p.jsx)(t.h3,{id:`basic`,children:`Basic`}),`
7`,(0,p.jsx)(t.p,{children:`A simple page layout with header and page content slots.`}),`
8`,(0,p.jsx)(o,{src:h,noPadding:!0}),`
9`,(0,p.jsx)(t.h3,{id:`with-footer`,children:`With Footer`}),`
10`,(0,p.jsx)(t.p,{children:`Add a footer slot to your page layout.`}),`
11`,(0,p.jsx)(o,{src:_,noPadding:!0}),`
12`,(0,p.jsx)(t.h3,{id:`with-hero`,children:`With Hero`}),`
13`,(0,p.jsx)(t.p,{children:`Add a hero section with primary color background.`}),`
14`,(0,p.jsx)(o,{src:b,noPadding:!0}),`
15`,(0,p.jsx)(t.h2,{id:`props`,children:`Props`}),`
16`,(0,p.jsx)(t.p,{children:`This is a custom component built for page layouts with header, content, and footer slots.`}),`
17`,(0,p.jsx)(n,{components:[`HeaderLayoutRoot`,`HeaderLayoutHeader`,`HeaderLayoutPage`,`HeaderLayoutFooter`,`HeaderLayoutHero`]}),`
18`,(0,p.jsx)(t.h2,{id:`related-components`,children:`Related Components`}),`
19`,(0,p.jsxs)(t.ul,{children:[`
20`,(0,p.jsxs)(t.li,{children:[(0,p.jsx)(t.a,{href:`/docs/components/layout/flex`,children:`Flex`}),` - For flexible layouts within slots`]}),`
21`,(0,p.jsxs)(t.li,{children:[(0,p.jsx)(t.a,{href:`/docs/components/layout/grid`,children:`Grid`}),` - For two-dimensional layouts within slots`]}),`
22`,(0,p.jsxs)(t.li,{children:[(0,p.jsx)(t.a,{href:`/docs/components/navigation/navbar`,children:`Navbar`}),` - For navigation in the header slot`]}),`
23`,(0,p.jsxs)(t.li,{children:[(0,p.jsx)(t.a,{href:`/docs/components/navigation/footer`,children:`Footer`}),` - For footer content in the footer slot`]}),`
24`]})]})}function T(e={}){let{wrapper:t}=e.components||{};return t?(0,p.jsx)(t,{...e,children:(0,p.jsx)(w,{...e})}):w(e)}export{T as default,C as toc};