const{Fragment:e,jsx:l,jsxs:n}=arguments[0];function _createMdxContent(r){const a={a:"a",code:"code",div:"div",h2:"h2",pre:"pre",span:"span",...r.components},{ComponentPreview:s,ComponentSource:c,Step:o,Steps:i,Tabs:t,TabsContent:d,TabsList:p,TabsTrigger:h}=a;return s||_missingMdxReference("ComponentPreview",!0),c||_missingMdxReference("ComponentSource",!0),o||_missingMdxReference("Step",!0),i||_missingMdxReference("Steps",!0),t||_missingMdxReference("Tabs",!0),d||_missingMdxReference("TabsContent",!0),p||_missingMdxReference("TabsList",!0),h||_missingMdxReference("TabsTrigger",!0),n(e,{children:[l(s,{name:"separator-1",description:"A separator component.",children:n(a.div,{"data-rehype-pretty-code-fragment":"",children:[l(a.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:"import { Separator } from '~/components/separator'\n \nexport function SeparatorDemo() {\n return (\n

Radix Primitives

\n An open-source UI component library.\n

\n \n

Blog

\n \n

Docs

\n \n

Source

\n )\n}",children:n(a.code,{"data-language":"tsx","data-theme":"dark",children:[n(a.span,{className:"line",children:[l(a.span,{style:{color:"#CBA6F7"},children:"import"}),l(a.span,{style:{color:"#9399B2"},children:" {"}),l(a.span,{style:{color:"#CDD6F4"},children:" Separator "}),l(a.span,{style:{color:"#9399B2"},children:"}"}),l(a.span,{style:{color:"#CBA6F7"},children:" from"}),l(a.span,{style:{color:"#A6E3A1"},children:" '~/components/separator'"})]}),"\n",l(a.span,{className:"line",children:" "}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#CBA6F7"},children:"export"}),l(a.span,{style:{color:"#CBA6F7"},children:" function"}),l(a.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" SeparatorDemo"}),l(a.span,{style:{color:"#9399B2"},children:"()"}),l(a.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#CBA6F7"},children:" return"}),l(a.span,{style:{color:"#CDD6F4"},children:" ("})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#94E2D5"},children:" <"}),l(a.span,{style:{color:"#89B4FA"},children:"div"}),l(a.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#94E2D5"},children:" <"}),l(a.span,{style:{color:"#89B4FA"},children:"div"}),l(a.span,{style:{color:"#F9E2AF"},children:" className"}),l(a.span,{style:{color:"#94E2D5"},children:"="}),l(a.span,{style:{color:"#A6E3A1"},children:"'space-y-1'"}),l(a.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#94E2D5"},children:" <"}),l(a.span,{style:{color:"#89B4FA"},children:"h4"}),l(a.span,{style:{color:"#F9E2AF"},children:" className"}),l(a.span,{style:{color:"#94E2D5"},children:"="}),l(a.span,{style:{color:"#A6E3A1"},children:"'text-sm font-medium leading-none'"}),l(a.span,{style:{color:"#94E2D5"},children:">"}),l(a.span,{style:{color:"#CDD6F4"},children:"Radix Primitives"}),l(a.span,{style:{color:"#94E2D5"},children:""})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#94E2D5"},children:" <"}),l(a.span,{style:{color:"#89B4FA"},children:"p"}),l(a.span,{style:{color:"#F9E2AF"},children:" className"}),l(a.span,{style:{color:"#94E2D5"},children:"="}),l(a.span,{style:{color:"#A6E3A1"},children:"'text-sm text-muted-foreground'"}),l(a.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",l(a.span,{className:"line",children:l(a.span,{style:{color:"#CDD6F4"},children:" An open-source UI component library."})}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#94E2D5"},children:" <"}),l(a.span,{style:{color:"#F5C2E7"},children:"Separator"}),l(a.span,{style:{color:"#F9E2AF"},children:" className"}),l(a.span,{style:{color:"#94E2D5"},children:"="}),l(a.span,{style:{color:"#A6E3A1"},children:"'my-4'"}),l(a.span,{style:{color:"#94E2D5"},children:" />"})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#94E2D5"},children:" <"}),l(a.span,{style:{color:"#89B4FA"},children:"div"}),l(a.span,{style:{color:"#F9E2AF"},children:" className"}),l(a.span,{style:{color:"#94E2D5"},children:"="}),l(a.span,{style:{color:"#A6E3A1"},children:"'flex h-5 items-center space-x-4 text-sm'"}),l(a.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#94E2D5"},children:" <"}),l(a.span,{style:{color:"#89B4FA"},children:"div"}),l(a.span,{style:{color:"#94E2D5"},children:">"}),l(a.span,{style:{color:"#CDD6F4"},children:"Blog"}),l(a.span,{style:{color:"#94E2D5"},children:""})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#94E2D5"},children:" <"}),l(a.span,{style:{color:"#F5C2E7"},children:"Separator"}),l(a.span,{style:{color:"#F9E2AF"},children:" orientation"}),l(a.span,{style:{color:"#94E2D5"},children:"="}),l(a.span,{style:{color:"#A6E3A1"},children:"'vertical'"}),l(a.span,{style:{color:"#94E2D5"},children:" />"})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#94E2D5"},children:" <"}),l(a.span,{style:{color:"#89B4FA"},children:"div"}),l(a.span,{style:{color:"#94E2D5"},children:">"}),l(a.span,{style:{color:"#CDD6F4"},children:"Docs"}),l(a.span,{style:{color:"#94E2D5"},children:""})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#94E2D5"},children:" <"}),l(a.span,{style:{color:"#F5C2E7"},children:"Separator"}),l(a.span,{style:{color:"#F9E2AF"},children:" orientation"}),l(a.span,{style:{color:"#94E2D5"},children:"="}),l(a.span,{style:{color:"#A6E3A1"},children:"'vertical'"}),l(a.span,{style:{color:"#94E2D5"},children:" />"})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#94E2D5"},children:" <"}),l(a.span,{style:{color:"#89B4FA"},children:"div"}),l(a.span,{style:{color:"#94E2D5"},children:">"}),l(a.span,{style:{color:"#CDD6F4"},children:"Source"}),l(a.span,{style:{color:"#94E2D5"},children:""})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",l(a.span,{className:"line",children:l(a.span,{style:{color:"#CDD6F4"},children:" )"})}),"\n",l(a.span,{className:"line",children:l(a.span,{style:{color:"#9399B2"},children:"}"})})]})}),l(a.pre,{"data-language":"tsx","data-theme":"light",__rawString__:"import { Separator } from '~/components/separator'\n \nexport function SeparatorDemo() {\n return (\n

Radix Primitives

\n An open-source UI component library.\n

\n \n

Blog

\n \n

Docs

\n \n

Source

\n )\n}",children:n(a.code,{"data-language":"tsx","data-theme":"light",children:[n(a.span,{className:"line",children:[l(a.span,{style:{color:"#D73A49"},children:"import"}),l(a.span,{style:{color:"#24292E"},children:" { Separator } "}),l(a.span,{style:{color:"#D73A49"},children:"from"}),l(a.span,{style:{color:"#032F62"},children:" '~/components/separator'"})]}),"\n",l(a.span,{className:"line",children:" "}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#D73A49"},children:"export"}),l(a.span,{style:{color:"#D73A49"},children:" function"}),l(a.span,{style:{color:"#6F42C1"},children:" SeparatorDemo"}),l(a.span,{style:{color:"#24292E"},children:"() {"})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#D73A49"},children:" return"}),l(a.span,{style:{color:"#24292E"},children:" ("})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#24292E"},children:" <"}),l(a.span,{style:{color:"#22863A"},children:"div"}),l(a.span,{style:{color:"#24292E"},children:">"})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#24292E"},children:" <"}),l(a.span,{style:{color:"#22863A"},children:"div"}),l(a.span,{style:{color:"#6F42C1"},children:" className"}),l(a.span,{style:{color:"#D73A49"},children:"="}),l(a.span,{style:{color:"#032F62"},children:"'space-y-1'"}),l(a.span,{style:{color:"#24292E"},children:">"})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#24292E"},children:" <"}),l(a.span,{style:{color:"#22863A"},children:"h4"}),l(a.span,{style:{color:"#6F42C1"},children:" className"}),l(a.span,{style:{color:"#D73A49"},children:"="}),l(a.span,{style:{color:"#032F62"},children:"'text-sm font-medium leading-none'"}),l(a.span,{style:{color:"#24292E"},children:">Radix Primitives"})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#24292E"},children:" <"}),l(a.span,{style:{color:"#22863A"},children:"p"}),l(a.span,{style:{color:"#6F42C1"},children:" className"}),l(a.span,{style:{color:"#D73A49"},children:"="}),l(a.span,{style:{color:"#032F62"},children:"'text-sm text-muted-foreground'"}),l(a.span,{style:{color:"#24292E"},children:">"})]}),"\n",l(a.span,{className:"line",children:l(a.span,{style:{color:"#24292E"},children:" An open-source UI component library."})}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#24292E"},children:" "})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#24292E"},children:" "})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#24292E"},children:" <"}),l(a.span,{style:{color:"#005CC5"},children:"Separator"}),l(a.span,{style:{color:"#6F42C1"},children:" className"}),l(a.span,{style:{color:"#D73A49"},children:"="}),l(a.span,{style:{color:"#032F62"},children:"'my-4'"}),l(a.span,{style:{color:"#24292E"},children:" />"})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#24292E"},children:" <"}),l(a.span,{style:{color:"#22863A"},children:"div"}),l(a.span,{style:{color:"#6F42C1"},children:" className"}),l(a.span,{style:{color:"#D73A49"},children:"="}),l(a.span,{style:{color:"#032F62"},children:"'flex h-5 items-center space-x-4 text-sm'"}),l(a.span,{style:{color:"#24292E"},children:">"})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#24292E"},children:" <"}),l(a.span,{style:{color:"#22863A"},children:"div"}),l(a.span,{style:{color:"#24292E"},children:">Blog"})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#24292E"},children:" <"}),l(a.span,{style:{color:"#005CC5"},children:"Separator"}),l(a.span,{style:{color:"#6F42C1"},children:" orientation"}),l(a.span,{style:{color:"#D73A49"},children:"="}),l(a.span,{style:{color:"#032F62"},children:"'vertical'"}),l(a.span,{style:{color:"#24292E"},children:" />"})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#24292E"},children:" <"}),l(a.span,{style:{color:"#22863A"},children:"div"}),l(a.span,{style:{color:"#24292E"},children:">Docs"})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#24292E"},children:" <"}),l(a.span,{style:{color:"#005CC5"},children:"Separator"}),l(a.span,{style:{color:"#6F42C1"},children:" orientation"}),l(a.span,{style:{color:"#D73A49"},children:"="}),l(a.span,{style:{color:"#032F62"},children:"'vertical'"}),l(a.span,{style:{color:"#24292E"},children:" />"})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#24292E"},children:" <"}),l(a.span,{style:{color:"#22863A"},children:"div"}),l(a.span,{style:{color:"#24292E"},children:">Source"})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#24292E"},children:" "})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#24292E"},children:" "})]}),"\n",l(a.span,{className:"line",children:l(a.span,{style:{color:"#24292E"},children:" )"})}),"\n",l(a.span,{className:"line",children:l(a.span,{style:{color:"#24292E"},children:"}"})})]})})]})}),"\n",n(a.h2,{id:"installation",children:[l(a.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:l(a.span,{className:"icon icon-link"})}),"Installation"]}),"\n",n(t,{children:[n(p,{children:[l(h,{value:"cli",children:"CLI"}),l(h,{value:"manual",children:"Manual"})]}),l(d,{value:"cli",children:n(a.div,{"data-rehype-pretty-code-fragment":"",children:[l(a.pre,{"data-language":"bash","data-theme":"dark",__rawString__:"npx shadcn@latest add separator",__npmCommand__:"npx shadcn@latest add separator",__yarnCommand__:"npx shadcn@latest add separator",__pnpmCommand__:"pnpm dlx shadcn@latest add separator",__bunCommand__:"bunx --bun shadcn@latest add separator",children:l(a.code,{"data-language":"bash","data-theme":"dark",children:n(a.span,{className:"line",children:[l(a.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"npx"}),l(a.span,{style:{color:"#A6E3A1"},children:" shadcn@latest"}),l(a.span,{style:{color:"#A6E3A1"},children:" add"}),l(a.span,{style:{color:"#A6E3A1"},children:" separator"})]})})}),l(a.pre,{"data-language":"bash","data-theme":"light",__rawString__:"npx shadcn@latest add separator",__npmCommand__:"npx shadcn@latest add separator",__yarnCommand__:"npx shadcn@latest add separator",__pnpmCommand__:"pnpm dlx shadcn@latest add separator",__bunCommand__:"bunx --bun shadcn@latest add separator",children:l(a.code,{"data-language":"bash","data-theme":"light",children:n(a.span,{className:"line",children:[l(a.span,{style:{color:"#6F42C1"},children:"npx"}),l(a.span,{style:{color:"#032F62"},children:" shadcn@latest"}),l(a.span,{style:{color:"#032F62"},children:" add"}),l(a.span,{style:{color:"#032F62"},children:" separator"})]})})})]})}),l(d,{value:"manual",children:n(i,{children:[l(o,{children:"Install the following dependencies:"}),n(a.div,{"data-rehype-pretty-code-fragment":"",children:[l(a.pre,{"data-language":"bash","data-theme":"dark",__rawString__:"npm install @radix-ui/react-separator",__npmCommand__:"npm install @radix-ui/react-separator",__yarnCommand__:"yarn add @radix-ui/react-separator",__pnpmCommand__:"pnpm add @radix-ui/react-separator",__bunCommand__:"bun add @radix-ui/react-separator",children:l(a.code,{"data-language":"bash","data-theme":"dark",children:n(a.span,{className:"line",children:[l(a.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"npm"}),l(a.span,{style:{color:"#A6E3A1"},children:" install"}),l(a.span,{style:{color:"#A6E3A1"},children:" @radix-ui/react-separator"})]})})}),l(a.pre,{"data-language":"bash","data-theme":"light",__rawString__:"npm install @radix-ui/react-separator",__npmCommand__:"npm install @radix-ui/react-separator",__yarnCommand__:"yarn add @radix-ui/react-separator",__pnpmCommand__:"pnpm add @radix-ui/react-separator",__bunCommand__:"bun add @radix-ui/react-separator",children:l(a.code,{"data-language":"bash","data-theme":"light",children:n(a.span,{className:"line",children:[l(a.span,{style:{color:"#6F42C1"},children:"npm"}),l(a.span,{style:{color:"#032F62"},children:" install"}),l(a.span,{style:{color:"#032F62"},children:" @radix-ui/react-separator"})]})})})]}),l(o,{children:"Copy and paste the following code into your project."}),n(c,{name:"separator",children:[n(a.div,{"data-rehype-pretty-code-fragment":"",children:[l(a.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:"// index.ts\n \nexport * from './separator'",children:n(a.code,{"data-language":"tsx","data-theme":"dark",children:[l(a.span,{className:"line",children:l(a.span,{style:{color:"#6C7086",fontStyle:"italic"},children:"// index.ts"})}),"\n",l(a.span,{className:"line",children:" "}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#CBA6F7"},children:"export"}),l(a.span,{style:{color:"#F38BA8"},children:" *"}),l(a.span,{style:{color:"#CBA6F7"},children:" from"}),l(a.span,{style:{color:"#A6E3A1"},children:" './separator'"})]})]})}),l(a.pre,{"data-language":"tsx","data-theme":"light",__rawString__:"// index.ts\n \nexport * from './separator'",children:n(a.code,{"data-language":"tsx","data-theme":"light",children:[l(a.span,{className:"line",children:l(a.span,{style:{color:"#6A737D"},children:"// index.ts"})}),"\n",l(a.span,{className:"line",children:" "}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#D73A49"},children:"export"}),l(a.span,{style:{color:"#005CC5"},children:" *"}),l(a.span,{style:{color:"#D73A49"},children:" from"}),l(a.span,{style:{color:"#032F62"},children:" './separator'"})]})]})})]}),n(a.div,{"data-rehype-pretty-code-fragment":"",children:[l(a.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:"// separator.tsx\n \n'use client'\n \nimport * as React from 'react'\nimport * as SeparatorPrimitive from '@radix-ui/react-separator'\n \nimport { cn } from '@gentelduck/libs/cn'\n \nconst Separator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(\n (\n { className, orientation = 'horizontal', decorative = true, ...props },\n ref\n ) => (\n \n )\n)\nSeparator.displayName = SeparatorPrimitive.Root.displayName\n \nexport { Separator }",children:n(a.code,{"data-language":"tsx","data-theme":"dark",children:[l(a.span,{className:"line",children:l(a.span,{style:{color:"#6C7086",fontStyle:"italic"},children:"// separator.tsx"})}),"\n",l(a.span,{className:"line",children:" "}),"\n",l(a.span,{className:"line",children:l(a.span,{style:{color:"#A6E3A1"},children:"'use client'"})}),"\n",l(a.span,{className:"line",children:" "}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#CBA6F7"},children:"import"}),l(a.span,{style:{color:"#F38BA8"},children:" *"}),l(a.span,{style:{color:"#CBA6F7"},children:" as"}),l(a.span,{style:{color:"#CDD6F4"},children:" React "}),l(a.span,{style:{color:"#CBA6F7"},children:"from"}),l(a.span,{style:{color:"#A6E3A1"},children:" 'react'"})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#CBA6F7"},children:"import"}),l(a.span,{style:{color:"#F38BA8"},children:" *"}),l(a.span,{style:{color:"#CBA6F7"},children:" as"}),l(a.span,{style:{color:"#CDD6F4"},children:" SeparatorPrimitive "}),l(a.span,{style:{color:"#CBA6F7"},children:"from"}),l(a.span,{style:{color:"#A6E3A1"},children:" '@radix-ui/react-separator'"})]}),"\n",l(a.span,{className:"line",children:" "}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#CBA6F7"},children:"import"}),l(a.span,{style:{color:"#9399B2"},children:" {"}),l(a.span,{style:{color:"#CDD6F4"},children:" cn "}),l(a.span,{style:{color:"#9399B2"},children:"}"}),l(a.span,{style:{color:"#CBA6F7"},children:" from"}),l(a.span,{style:{color:"#A6E3A1"},children:" '@gentelduck/libs/cn'"})]}),"\n",l(a.span,{className:"line",children:" "}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#CBA6F7"},children:"const"}),l(a.span,{style:{color:"#FAB387"},children:" Separator"}),l(a.span,{style:{color:"#94E2D5"},children:" ="}),l(a.span,{style:{color:"#CDD6F4"},children:" React"}),l(a.span,{style:{color:"#94E2D5"},children:"."}),l(a.span,{style:{color:"#CDD6F4"},children:"forwardRef"}),l(a.span,{style:{color:"#94E2D5"},children:"<"})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#CDD6F4"},children:" React"}),l(a.span,{style:{color:"#94E2D5"},children:"."}),l(a.span,{style:{color:"#CDD6F4"},children:"ElementRef"}),l(a.span,{style:{color:"#94E2D5"},children:""}),l(a.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#CDD6F4"},children:" React"}),l(a.span,{style:{color:"#94E2D5"},children:"."}),l(a.span,{style:{color:"#CDD6F4"},children:"ComponentPropsWithoutRef"}),l(a.span,{style:{color:"#94E2D5"},children:""})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#94E2D5"},children:">"}),l(a.span,{style:{color:"#CDD6F4"},children:"("})]}),"\n",l(a.span,{className:"line",children:l(a.span,{style:{color:"#CDD6F4"},children:" ("})}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#9399B2"},children:" {"}),l(a.span,{style:{color:"#CDD6F4"},children:" className"}),l(a.span,{style:{color:"#9399B2"},children:","}),l(a.span,{style:{color:"#CDD6F4"},children:" orientation "}),l(a.span,{style:{color:"#94E2D5"},children:"="}),l(a.span,{style:{color:"#A6E3A1"},children:" 'horizontal'"}),l(a.span,{style:{color:"#9399B2"},children:","}),l(a.span,{style:{color:"#CDD6F4"},children:" decorative "}),l(a.span,{style:{color:"#94E2D5"},children:"="}),l(a.span,{style:{color:"#FAB387"},children:" true"}),l(a.span,{style:{color:"#9399B2"},children:","}),l(a.span,{style:{color:"#94E2D5"},children:" ..."}),l(a.span,{style:{color:"#CDD6F4"},children:"props "}),l(a.span,{style:{color:"#9399B2"},children:"},"})]}),"\n",l(a.span,{className:"line",children:l(a.span,{style:{color:"#CDD6F4"},children:" ref"})}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#CDD6F4"},children:" ) "}),l(a.span,{style:{color:"#CBA6F7"},children:"=>"}),l(a.span,{style:{color:"#CDD6F4"},children:" ("})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#94E2D5"},children:" <"}),l(a.span,{style:{color:"#F5C2E7"},children:"SeparatorPrimitive.Root"})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#F9E2AF"},children:" ref"}),l(a.span,{style:{color:"#94E2D5"},children:"="}),l(a.span,{style:{color:"#9399B2"},children:"{"}),l(a.span,{style:{color:"#CDD6F4"},children:"ref"}),l(a.span,{style:{color:"#9399B2"},children:"}"})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#F9E2AF"},children:" decorative"}),l(a.span,{style:{color:"#94E2D5"},children:"="}),l(a.span,{style:{color:"#9399B2"},children:"{"}),l(a.span,{style:{color:"#CDD6F4"},children:"decorative"}),l(a.span,{style:{color:"#9399B2"},children:"}"})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#F9E2AF"},children:" orientation"}),l(a.span,{style:{color:"#94E2D5"},children:"="}),l(a.span,{style:{color:"#9399B2"},children:"{"}),l(a.span,{style:{color:"#CDD6F4"},children:"orientation"}),l(a.span,{style:{color:"#9399B2"},children:"}"})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#F9E2AF"},children:" className"}),l(a.span,{style:{color:"#94E2D5"},children:"="}),l(a.span,{style:{color:"#9399B2"},children:"{"}),l(a.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"cn"}),l(a.span,{style:{color:"#CDD6F4"},children:"("})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#A6E3A1"},children:" 'shrink-0 bg-border'"}),l(a.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#CDD6F4"},children:" orientation "}),l(a.span,{style:{color:"#94E2D5"},children:"==="}),l(a.span,{style:{color:"#A6E3A1"},children:" 'horizontal'"}),l(a.span,{style:{color:"#94E2D5"},children:" ?"}),l(a.span,{style:{color:"#A6E3A1"},children:" 'h-[1px] w-full'"}),l(a.span,{style:{color:"#94E2D5"},children:" :"}),l(a.span,{style:{color:"#A6E3A1"},children:" 'h-full w-[1px]'"}),l(a.span,{style:{color:"#9399B2"},children:","})]}),"\n",l(a.span,{className:"line",children:l(a.span,{style:{color:"#CDD6F4"},children:" className"})}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#CDD6F4"},children:" )"}),l(a.span,{style:{color:"#9399B2"},children:"}"})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#9399B2"},children:" {"}),l(a.span,{style:{color:"#94E2D5"},children:"..."}),l(a.span,{style:{color:"#CDD6F4"},children:"props"}),l(a.span,{style:{color:"#9399B2"},children:"}"})]}),"\n",l(a.span,{className:"line",children:l(a.span,{style:{color:"#94E2D5"},children:" />"})}),"\n",l(a.span,{className:"line",children:l(a.span,{style:{color:"#CDD6F4"},children:" )"})}),"\n",l(a.span,{className:"line",children:l(a.span,{style:{color:"#CDD6F4"},children:")"})}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#CDD6F4"},children:"Separator"}),l(a.span,{style:{color:"#94E2D5"},children:"."}),l(a.span,{style:{color:"#CDD6F4"},children:"displayName "}),l(a.span,{style:{color:"#94E2D5"},children:"="}),l(a.span,{style:{color:"#CDD6F4"},children:" SeparatorPrimitive"}),l(a.span,{style:{color:"#94E2D5"},children:"."}),l(a.span,{style:{color:"#CDD6F4"},children:"Root"}),l(a.span,{style:{color:"#94E2D5"},children:"."}),l(a.span,{style:{color:"#CDD6F4"},children:"displayName"})]}),"\n",l(a.span,{className:"line",children:" "}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#CBA6F7"},children:"export"}),l(a.span,{style:{color:"#9399B2"},children:" {"}),l(a.span,{style:{color:"#CDD6F4"},children:" Separator "}),l(a.span,{style:{color:"#9399B2"},children:"}"})]})]})}),l(a.pre,{"data-language":"tsx","data-theme":"light",__rawString__:"// separator.tsx\n \n'use client'\n \nimport * as React from 'react'\nimport * as SeparatorPrimitive from '@radix-ui/react-separator'\n \nimport { cn } from '@gentelduck/libs/cn'\n \nconst Separator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(\n (\n { className, orientation = 'horizontal', decorative = true, ...props },\n ref\n ) => (\n \n )\n)\nSeparator.displayName = SeparatorPrimitive.Root.displayName\n \nexport { Separator }",children:n(a.code,{"data-language":"tsx","data-theme":"light",children:[l(a.span,{className:"line",children:l(a.span,{style:{color:"#6A737D"},children:"// separator.tsx"})}),"\n",l(a.span,{className:"line",children:" "}),"\n",l(a.span,{className:"line",children:l(a.span,{style:{color:"#032F62"},children:"'use client'"})}),"\n",l(a.span,{className:"line",children:" "}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#D73A49"},children:"import"}),l(a.span,{style:{color:"#005CC5"},children:" *"}),l(a.span,{style:{color:"#D73A49"},children:" as"}),l(a.span,{style:{color:"#24292E"},children:" React "}),l(a.span,{style:{color:"#D73A49"},children:"from"}),l(a.span,{style:{color:"#032F62"},children:" 'react'"})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#D73A49"},children:"import"}),l(a.span,{style:{color:"#005CC5"},children:" *"}),l(a.span,{style:{color:"#D73A49"},children:" as"}),l(a.span,{style:{color:"#24292E"},children:" SeparatorPrimitive "}),l(a.span,{style:{color:"#D73A49"},children:"from"}),l(a.span,{style:{color:"#032F62"},children:" '@radix-ui/react-separator'"})]}),"\n",l(a.span,{className:"line",children:" "}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#D73A49"},children:"import"}),l(a.span,{style:{color:"#24292E"},children:" { cn } "}),l(a.span,{style:{color:"#D73A49"},children:"from"}),l(a.span,{style:{color:"#032F62"},children:" '@gentelduck/libs/cn'"})]}),"\n",l(a.span,{className:"line",children:" "}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#D73A49"},children:"const"}),l(a.span,{style:{color:"#005CC5"},children:" Separator"}),l(a.span,{style:{color:"#D73A49"},children:" ="}),l(a.span,{style:{color:"#24292E"},children:" React.forwardRef"}),l(a.span,{style:{color:"#D73A49"},children:"<"})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#24292E"},children:" React.ElementRef"}),l(a.span,{style:{color:"#D73A49"},children:""}),l(a.span,{style:{color:"#24292E"},children:","})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#24292E"},children:" React.ComponentPropsWithoutRef"}),l(a.span,{style:{color:"#D73A49"},children:""})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#D73A49"},children:">"}),l(a.span,{style:{color:"#24292E"},children:"("})]}),"\n",l(a.span,{className:"line",children:l(a.span,{style:{color:"#24292E"},children:" ("})}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#24292E"},children:" { className, orientation "}),l(a.span,{style:{color:"#D73A49"},children:"="}),l(a.span,{style:{color:"#032F62"},children:" 'horizontal'"}),l(a.span,{style:{color:"#24292E"},children:", decorative "}),l(a.span,{style:{color:"#D73A49"},children:"="}),l(a.span,{style:{color:"#005CC5"},children:" true"}),l(a.span,{style:{color:"#24292E"},children:", "}),l(a.span,{style:{color:"#D73A49"},children:"..."}),l(a.span,{style:{color:"#24292E"},children:"props },"})]}),"\n",l(a.span,{className:"line",children:l(a.span,{style:{color:"#24292E"},children:" ref"})}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#24292E"},children:" ) "}),l(a.span,{style:{color:"#D73A49"},children:"=>"}),l(a.span,{style:{color:"#24292E"},children:" ("})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#24292E"},children:" <"}),l(a.span,{style:{color:"#005CC5"},children:"SeparatorPrimitive.Root"})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#6F42C1"},children:" ref"}),l(a.span,{style:{color:"#D73A49"},children:"="}),l(a.span,{style:{color:"#24292E"},children:"{ref}"})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#6F42C1"},children:" decorative"}),l(a.span,{style:{color:"#D73A49"},children:"="}),l(a.span,{style:{color:"#24292E"},children:"{decorative}"})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#6F42C1"},children:" orientation"}),l(a.span,{style:{color:"#D73A49"},children:"="}),l(a.span,{style:{color:"#24292E"},children:"{orientation}"})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#6F42C1"},children:" className"}),l(a.span,{style:{color:"#D73A49"},children:"="}),l(a.span,{style:{color:"#24292E"},children:"{"}),l(a.span,{style:{color:"#6F42C1"},children:"cn"}),l(a.span,{style:{color:"#24292E"},children:"("})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#032F62"},children:" 'shrink-0 bg-border'"}),l(a.span,{style:{color:"#24292E"},children:","})]}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#24292E"},children:" orientation "}),l(a.span,{style:{color:"#D73A49"},children:"==="}),l(a.span,{style:{color:"#032F62"},children:" 'horizontal'"}),l(a.span,{style:{color:"#D73A49"},children:" ?"}),l(a.span,{style:{color:"#032F62"},children:" 'h-[1px] w-full'"}),l(a.span,{style:{color:"#D73A49"},children:" :"}),l(a.span,{style:{color:"#032F62"},children:" 'h-full w-[1px]'"}),l(a.span,{style:{color:"#24292E"},children:","})]}),"\n",l(a.span,{className:"line",children:l(a.span,{style:{color:"#24292E"},children:" className"})}),"\n",l(a.span,{className:"line",children:l(a.span,{style:{color:"#24292E"},children:" )}"})}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#24292E"},children:" {"}),l(a.span,{style:{color:"#D73A49"},children:"..."}),l(a.span,{style:{color:"#24292E"},children:"props}"})]}),"\n",l(a.span,{className:"line",children:l(a.span,{style:{color:"#24292E"},children:" />"})}),"\n",l(a.span,{className:"line",children:l(a.span,{style:{color:"#24292E"},children:" )"})}),"\n",l(a.span,{className:"line",children:l(a.span,{style:{color:"#24292E"},children:")"})}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#24292E"},children:"Separator.displayName "}),l(a.span,{style:{color:"#D73A49"},children:"="}),l(a.span,{style:{color:"#24292E"},children:" SeparatorPrimitive.Root.displayName"})]}),"\n",l(a.span,{className:"line",children:" "}),"\n",n(a.span,{className:"line",children:[l(a.span,{style:{color:"#D73A49"},children:"export"}),l(a.span,{style:{color:"#24292E"},children:" { Separator }"})]})]})})]})]}),l(o,{children:"Update the import paths to match your project setup."})]})})]}),"\n",n(a.h2,{id:"usage",children:[l(a.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:l(a.span,{className:"icon icon-link"})}),"Usage"]}),"\n",n(a.div,{"data-rehype-pretty-code-fragment":"",children:[l(a.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:'import { Separator } from "@/components/ui/separator"',children:l(a.code,{"data-language":"tsx","data-theme":"dark",children:n(a.span,{className:"line",children:[l(a.span,{style:{color:"#CBA6F7"},children:"import"}),l(a.span,{style:{color:"#9399B2"},children:" {"}),l(a.span,{style:{color:"#CDD6F4"},children:" Separator "}),l(a.span,{style:{color:"#9399B2"},children:"}"}),l(a.span,{style:{color:"#CBA6F7"},children:" from"}),l(a.span,{style:{color:"#A6E3A1"},children:' "@/components/ui/separator"'})]})})}),l(a.pre,{"data-language":"tsx","data-theme":"light",__rawString__:'import { Separator } from "@/components/ui/separator"',children:l(a.code,{"data-language":"tsx","data-theme":"light",children:n(a.span,{className:"line",children:[l(a.span,{style:{color:"#D73A49"},children:"import"}),l(a.span,{style:{color:"#24292E"},children:" { Separator } "}),l(a.span,{style:{color:"#D73A49"},children:"from"}),l(a.span,{style:{color:"#032F62"},children:' "@/components/ui/separator"'})]})})})]}),"\n",n(a.div,{"data-rehype-pretty-code-fragment":"",children:[l(a.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:"",children:l(a.code,{"data-language":"tsx","data-theme":"dark",children:n(a.span,{className:"line",children:[l(a.span,{style:{color:"#94E2D5"},children:"<"}),l(a.span,{style:{color:"#F5C2E7"},children:"Separator"}),l(a.span,{style:{color:"#94E2D5"},children:" />"})]})})}),l(a.pre,{"data-language":"tsx","data-theme":"light",__rawString__:"",children:l(a.code,{"data-language":"tsx","data-theme":"light",children:n(a.span,{className:"line",children:[l(a.span,{style:{color:"#24292E"},children:"<"}),l(a.span,{style:{color:"#005CC5"},children:"Separator"}),l(a.span,{style:{color:"#24292E"},children:" />"})]})})})]})]})}return{default:function(e={}){const{wrapper:n}=e.components||{};return n?l(n,{...e,children:l(_createMdxContent,{...e})}):_createMdxContent(e)}};function _missingMdxReference(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}