hipstersmoothie.com
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"./PropDocs-CM9cNaM3.js";import{t as n}from"./Example-DfDcphuv.js";import{n as r,t as i}from"./grid-Bb7ZbwQJ.js";var a=e();function o(){return(0,a.jsxs)(i,{columns:`repeat(3, 1fr)`,gap:`2xl`,children:[(0,a.jsx)(r,{children:`Item 1`}),(0,a.jsx)(r,{children:`Item 2`}),(0,a.jsx)(r,{children:`Item 3`}),(0,a.jsx)(r,{children:`Item 4`}),(0,a.jsx)(r,{children:`Item 5`}),(0,a.jsx)(r,{children:`Item 6`})]})}o.slug=`/examples/grid/basic`;function s(){return(0,a.jsxs)(i,{columns:`repeat(4, 1fr)`,columnGap:`2xl`,children:[(0,a.jsx)(r,{columnStart:1,columnEnd:3,children:`Spans 2 columns`}),(0,a.jsx)(r,{columnStart:3,columnEnd:5,children:`Spans 2 columns`}),(0,a.jsx)(r,{columnStart:1,columnEnd:2,children:`Single column`}),(0,a.jsx)(r,{columnStart:2,columnEnd:4,children:`Spans 2 columns`}),(0,a.jsx)(r,{columnStart:4,columnEnd:5,children:`Single column`})]})}s.slug=`/examples/grid/spans`;var c=[{depth:2,value:`Installation`,id:`installation`},{depth:2,value:`Features`,id:`features`,children:[{depth:3,value:`Grid Spans`,id:`grid-spans`}]},{depth:2,value:`Props`,id:`props`},{depth:2,value:`Related Components`,id:`related-components`}];function l(e){let r={a:`a`,code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,span:`span`,ul:`ul`,...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n,{src:o}),`
2`,(0,a.jsx)(r.h2,{id:`installation`,children:`Installation`}),`
3`,(0,a.jsx)(r.p,{children:`Run the following command to add the grid component to your project.`}),`
4`,(0,a.jsx)(a.Fragment,{children:(0,a.jsx)(r.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,a.jsx)(r.code,{className:`language-bash`,children:(0,a.jsxs)(r.span,{className:`line`,children:[(0,a.jsx)(r.span,{style:{color:`light-dark(#6F42C1, #B392F0)`,"--shiki-light":`#6F42C1`,"--shiki-dark":`#B392F0`},children:`pnpm`}),(0,a.jsx)(r.span,{style:{color:`light-dark(#032F62, #9ECBFF)`,"--shiki-light":`#032F62`,"--shiki-dark":`#9ECBFF`},children:` hip`}),(0,a.jsx)(r.span,{style:{color:`light-dark(#032F62, #9ECBFF)`,"--shiki-light":`#032F62`,"--shiki-dark":`#9ECBFF`},children:` install`}),(0,a.jsx)(r.span,{style:{color:`light-dark(#032F62, #9ECBFF)`,"--shiki-light":`#032F62`,"--shiki-dark":`#9ECBFF`},children:` grid`})]})})})}),`
5`,(0,a.jsx)(r.h2,{id:`features`,children:`Features`}),`
6`,(0,a.jsx)(r.h3,{id:`grid-spans`,children:`Grid Spans`}),`
7`,(0,a.jsx)(r.p,{children:`Grid items can span multiple columns and rows.`}),`
8`,(0,a.jsx)(n,{src:s}),`
9`,(0,a.jsx)(r.h2,{id:`props`,children:`Props`}),`
10`,(0,a.jsx)(r.p,{children:`This is a custom component built for grid layouts.`}),`
11`,(0,a.jsx)(t,{components:[`Grid`,`GridItem`]}),`
12`,(0,a.jsx)(r.h2,{id:`related-components`,children:`Related Components`}),`
13`,(0,a.jsxs)(r.ul,{children:[`
14`,(0,a.jsxs)(r.li,{children:[(0,a.jsx)(r.a,{href:`/docs/components/layout/flex`,children:`Flex`}),` - For one-dimensional flexible layouts`]}),`
15`,(0,a.jsxs)(r.li,{children:[(0,a.jsx)(r.a,{href:`/docs/components/content/card`,children:`Card`}),` - For grouping content in grid layouts`]}),`
16`,(0,a.jsxs)(r.li,{children:[(0,a.jsx)(r.a,{href:`/docs/components/content/aspect-ratio`,children:`AspectRatio`}),` - For maintaining aspect ratios in grid items`]}),`
17`,(0,a.jsxs)(r.li,{children:[(0,a.jsx)(r.a,{href:`/docs/components/collections/table`,children:`Table`}),` - For structured data in grid layouts`]}),`
18`]})]})}function u(e={}){let{wrapper:t}=e.components||{};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(l,{...e})}):l(e)}export{u as default,c as toc};