Radix Primitives

An open-source UI component library.

Blog

Docs

Source

) } `,__src__:"registry/miami/example/separator-demo.tsx",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Separator } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" '~/components/ui/separator'"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" SeparatorDemo"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"space-y-1"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"h4"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"text-sm font-medium leading-none"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Radix Primitives"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"text-muted-foreground text-sm"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" An open-source UI component library."})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"Separator"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"my-4"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"flex h-5 items-center space-x-4 text-sm"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Blog"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"Separator"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" orientation"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"vertical"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Docs"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"Separator"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" orientation"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"vertical"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Source"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),(0,n.jsx)(e.figure,{__src__:"registry/default/example/separator-demo.tsx","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`import { Separator } from '~/components/ui/separator' export function SeparatorDemo() { return (

Radix Primitives

An open-source UI component library.

Blog

Docs

Source

) } `,__src__:"registry/default/example/separator-demo.tsx",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Separator } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" '~/components/ui/separator'"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" SeparatorDemo"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"space-y-1"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"h4"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"text-sm font-medium leading-none"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Radix Primitives"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"text-muted-foreground text-sm"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" An open-source UI component library."})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"Separator"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"my-4"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"flex h-5 items-center space-x-4 text-sm"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Blog"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"Separator"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" orientation"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"vertical"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Docs"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"Separator"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" orientation"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"vertical"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Source"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]}),` `,(0,n.jsxs)(e.h2,{id:"installation",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,n.jsxs)(p,{defaultValue:"cli",children:[(0,n.jsxs)(h,{children:[(0,n.jsx)(i,{value:"cli",children:"CLI"}),(0,n.jsx)(i,{value:"manual",children:"Manual"})]}),(0,n.jsx)(c,{value:"cli",children:(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"bash","data-theme":"github-dark",__rawString__:`npx nyxb@latest add separator `,__npmCommand__:`npx nyxb@latest add separator `,__yarnCommand__:`npx nyxb@latest add separator `,__pnpmCommand__:`pnpm dlx nyxb@latest add separator `,__bunCommand__:`bunx --bun nyxb@latest add separator `,children:(0,n.jsx)(e.code,{"data-language":"bash","data-theme":"github-dark",style:{display:"grid"},children:(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"npx"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" nyxb@latest"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" add"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" separator"})]})})})})}),(0,n.jsx)(c,{value:"manual",children:(0,n.jsxs)(d,{children:[(0,n.jsx)(a,{children:"Install the following dependencies:"}),(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"bash","data-theme":"github-dark",__rawString__:` @radix-ui/react-separator `,children:(0,n.jsx)(e.code,{"data-language":"bash","data-theme":"github-dark",style:{display:"grid"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" @radix-ui/react-separator"})})})})}),(0,n.jsx)(a,{children:"Copy and paste the following code into your project."}),(0,n.jsxs)(s,{name:"separator",children:[(0,n.jsx)(e.figure,{__src__:"registry/miami/ui/separator.tsx",__style__:"miami","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`'use client' import * as React from 'react' import * as SeparatorPrimitive from '@radix-ui/react-separator' import { ny } from '~/lib/utils' const Separator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >( ( { className, orientation = 'horizontal', decorative = true, ...props }, ref, ) => ( ), ) Separator.displayName = SeparatorPrimitive.Root.displayName export { Separator } `,__src__:"registry/miami/ui/separator.tsx",__style__:"miami",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'use client'"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" *"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" as"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'react'"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" *"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" as"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" SeparatorPrimitive "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" '@radix-ui/react-separator'"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { ny } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" '~/lib/utils'"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" Separator"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React.forwardRef"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"<"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React.ElementRef"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:""}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React.ComponentPropsWithoutRef"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:""})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { className, orientation "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'horizontal'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", decorative "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" true"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"..."}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"props },"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ref,"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ) "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"SeparatorPrimitive.Root"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" ref"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{ref}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" decorative"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{decorative}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" orientation"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{orientation}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"ny"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'bg-border shrink-0'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" orientation "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"==="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'horizontal'"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ?"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'h-px w-full'"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" :"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'h-full w-px'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" className,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"..."}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"props}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ),"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"Separator.displayName "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" SeparatorPrimitive.Root.displayName"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Separator }"})]})]})})}),(0,n.jsx)(e.figure,{__src__:"registry/default/ui/separator.tsx",__style__:"default","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`'use client' import * as React from 'react' import * as SeparatorPrimitive from '@radix-ui/react-separator' import { ny } from '~/lib/utils' const Separator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >( ( { className, orientation = 'horizontal', decorative = true, ...props }, ref, ) => ( ), ) Separator.displayName = SeparatorPrimitive.Root.displayName export { Separator } `,__src__:"registry/default/ui/separator.tsx",__style__:"default",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'use client'"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" *"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" as"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'react'"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" *"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" as"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" SeparatorPrimitive "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" '@radix-ui/react-separator'"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { ny } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" '~/lib/utils'"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" Separator"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React.forwardRef"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"<"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React.ElementRef"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:""}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React.ComponentPropsWithoutRef"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:""})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { className, orientation "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'horizontal'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", decorative "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" true"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"..."}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"props },"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ref,"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ) "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"SeparatorPrimitive.Root"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" ref"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{ref}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" decorative"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{decorative}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" orientation"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{orientation}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"ny"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'bg-border shrink-0'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" orientation "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"==="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'horizontal'"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ?"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'h-px w-full'"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" :"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'h-full w-px'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" className,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"..."}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"props}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ),"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"Separator.displayName "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" SeparatorPrimitive.Root.displayName"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Separator }"})]})]})})})]}),(0,n.jsx)(a,{children:"Update the import paths to match your project setup."})]})})]}),` `,(0,n.jsxs)(e.h2,{id:"usage",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Usage"]}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`import { Separator } from "~/components/ui/separator" `,children:(0,n.jsx)(e.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Separator } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "~/components/ui/separator"'})]})})})}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:` `,children:(0,n.jsx)(e.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"Separator"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]})})})})]})}function u(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(F,{...l})}):F(l)}function o(l,e){throw new Error("Expected "+(e?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}return C(R);})(); ;return Component;