Chalk UI

An open-source UI component library.

Home

Docs

Source

) } `,__src__:"src/demo/separator-demo.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" { Separator } "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"@/components/ui/separator"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#EBC88D"},children:"*"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"as"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" React "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"react"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"function"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#EEEEEE",fontWeight:"bold"},children:"SeparatorDemo"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"w-full border rounded-[--radius]"'}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"space-y-1 p-4"'}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"h4"}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"text-sm font-medium leading-none"'}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:">Chalk UI"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"p"}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"text-sm text-[--muted]"'}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:">"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" An open-source UI component library."})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"Separator"}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"/>"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"flex h-8 items-center text-sm"'}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"px-4"'}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:">Home"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"Separator"}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" orientation"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"vertical"'}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"/>"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"px-4"'}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:">Docs"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"Separator"}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" orientation"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"vertical"'}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"/>"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"px-4"'}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:">Source"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" )"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"}"})})]})})})}),` `,(0,l.jsxs)(e.h2,{id:"installation",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx @rahimstack@latest add separator `,children:(0,l.jsx)(e.code,{"data-language":"bash","data-theme":"default",children:(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"npx "}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:"@rahimstack@latest"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:"add"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:"separator"})]})})})}),` `,(0,l.jsxs)(e.h2,{id:"api-reference",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#api-reference",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"API Reference"]}),` `,(0,l.jsxs)(s,{name:"separator",children:[(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:"No styles",__src__:"src/workshop/separator/separator.tsx",children:(0,l.jsx)(e.code,{"data-language":"tsx","data-theme":"default",children:(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"No styles"})})})})}),(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:"type SeparatorProps = React.ComponentPropsWithoutRef",__src__:"src/workshop/separator/separator.tsx",children:(0,l.jsx)(e.code,{"data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"type"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"SeparatorProps"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" = "}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"React"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"ComponentPropsWithoutRef"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:""})]})})})})]})]})}function v(n={}){let{wrapper:e}=n.components||{};return e?(0,l.jsx)(e,Object.assign({},n,{children:(0,l.jsx)(d,n)})):d(n)}var _=v;function p(n,e){throw new Error("Expected "+(e?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return f(g);})(); ;return Component;

Separator

Chalk UI

Installation

API Reference

Types

Anatomy