30:I[582869,["/_next/static/immutable/chunks/1x29sb5igjf5w.js","/_next/static/immutable/chunks/1t2gcpalycxo6.js","/_next/static/immutable/chunks/2p_ghm9i1xqn3.js","/_next/static/immutable/chunks/38rq05vs-ve3p.js","/_next/static/immutable/chunks/2yacva7rodstl.js","/_next/static/immutable/chunks/1ghhw0nokzt1a.js","/_next/static/immutable/chunks/24eco4ut3v19f.js","/_next/static/immutable/chunks/1tk4x0me0jskd.js","/_next/static/immutable/chunks/01bhtelfhebt8.js","/_next/static/immutable/chunks/2vyyfnwku-6ro.js","/_next/static/immutable/chunks/0o4f9ufp5soxs.js","/_next/static/immutable/chunks/40rmaux_5gekc.js","/_next/static/immutable/chunks/2fomxw5k4_mq-.js","/_next/static/immutable/chunks/25db-5x82rdae.js","/_next/static/immutable/chunks/0sfqg2honhh0j.js","/_next/static/immutable/chunks/2k94eki-fptbn.js","/_next/static/immutable/chunks/3qm0uqf-nzpsu.js","/_next/static/immutable/chunks/1eh4--jlns_nl.js","/_next/static/immutable/chunks/0kioigv1mag2r.js","/_next/static/immutable/chunks/3bn54icaruzbg.js","/_next/static/immutable/chunks/3j4el3n16a7e5.js","/_next/static/immutable/chunks/1o_9an7b_2g9d.js","/_next/static/immutable/chunks/02xr9u4m0yl9w.js","/_next/static/immutable/chunks/14wguy9voujor.js","/_next/static/immutable/chunks/366c1wcz8w4ou.js","/_next/static/immutable/chunks/2fb4jiicrgvu0.js","/_next/static/immutable/chunks/07a0i1e0ujt5g.js","/_next/static/immutable/chunks/2iu2dzfpjcj8b.js","/_next/static/immutable/chunks/1of6269ka1nvs.js","/_next/static/immutable/chunks/450c3ag6he-lt.js","/_next/static/immutable/chunks/23jdee3-y925b.js","/_next/static/immutable/chunks/3j4sn5o2-pyjp.js","/_next/static/immutable/chunks/2xsydt1jy74tm.js"],"Tabs"] 31:I[582869,["/_next/static/immutable/chunks/1x29sb5igjf5w.js","/_next/static/immutable/chunks/1t2gcpalycxo6.js","/_next/static/immutable/chunks/2p_ghm9i1xqn3.js","/_next/static/immutable/chunks/38rq05vs-ve3p.js","/_next/static/immutable/chunks/2yacva7rodstl.js","/_next/static/immutable/chunks/1ghhw0nokzt1a.js","/_next/static/immutable/chunks/24eco4ut3v19f.js","/_next/static/immutable/chunks/1tk4x0me0jskd.js","/_next/static/immutable/chunks/01bhtelfhebt8.js","/_next/static/immutable/chunks/2vyyfnwku-6ro.js","/_next/static/immutable/chunks/0o4f9ufp5soxs.js","/_next/static/immutable/chunks/40rmaux_5gekc.js","/_next/static/immutable/chunks/2fomxw5k4_mq-.js","/_next/static/immutable/chunks/25db-5x82rdae.js","/_next/static/immutable/chunks/0sfqg2honhh0j.js","/_next/static/immutable/chunks/2k94eki-fptbn.js","/_next/static/immutable/chunks/3qm0uqf-nzpsu.js","/_next/static/immutable/chunks/1eh4--jlns_nl.js","/_next/static/immutable/chunks/0kioigv1mag2r.js","/_next/static/immutable/chunks/3bn54icaruzbg.js","/_next/static/immutable/chunks/3j4el3n16a7e5.js","/_next/static/immutable/chunks/1o_9an7b_2g9d.js","/_next/static/immutable/chunks/02xr9u4m0yl9w.js","/_next/static/immutable/chunks/14wguy9voujor.js","/_next/static/immutable/chunks/366c1wcz8w4ou.js","/_next/static/immutable/chunks/2fb4jiicrgvu0.js","/_next/static/immutable/chunks/07a0i1e0ujt5g.js","/_next/static/immutable/chunks/2iu2dzfpjcj8b.js","/_next/static/immutable/chunks/1of6269ka1nvs.js","/_next/static/immutable/chunks/450c3ag6he-lt.js","/_next/static/immutable/chunks/23jdee3-y925b.js","/_next/static/immutable/chunks/3j4sn5o2-pyjp.js","/_next/static/immutable/chunks/2xsydt1jy74tm.js"],"Tab"] 32:I[659993,["/_next/static/immutable/chunks/1x29sb5igjf5w.js","/_next/static/immutable/chunks/1t2gcpalycxo6.js","/_next/static/immutable/chunks/2p_ghm9i1xqn3.js","/_next/static/immutable/chunks/38rq05vs-ve3p.js","/_next/static/immutable/chunks/2yacva7rodstl.js","/_next/static/immutable/chunks/1ghhw0nokzt1a.js","/_next/static/immutable/chunks/24eco4ut3v19f.js","/_next/static/immutable/chunks/1tk4x0me0jskd.js","/_next/static/immutable/chunks/01bhtelfhebt8.js","/_next/static/immutable/chunks/2vyyfnwku-6ro.js","/_next/static/immutable/chunks/0o4f9ufp5soxs.js","/_next/static/immutable/chunks/40rmaux_5gekc.js","/_next/static/immutable/chunks/2fomxw5k4_mq-.js","/_next/static/immutable/chunks/25db-5x82rdae.js","/_next/static/immutable/chunks/0sfqg2honhh0j.js","/_next/static/immutable/chunks/2k94eki-fptbn.js","/_next/static/immutable/chunks/3qm0uqf-nzpsu.js","/_next/static/immutable/chunks/1eh4--jlns_nl.js","/_next/static/immutable/chunks/0kioigv1mag2r.js","/_next/static/immutable/chunks/3bn54icaruzbg.js","/_next/static/immutable/chunks/3j4el3n16a7e5.js","/_next/static/immutable/chunks/1o_9an7b_2g9d.js","/_next/static/immutable/chunks/02xr9u4m0yl9w.js","/_next/static/immutable/chunks/14wguy9voujor.js","/_next/static/immutable/chunks/366c1wcz8w4ou.js","/_next/static/immutable/chunks/2fb4jiicrgvu0.js","/_next/static/immutable/chunks/07a0i1e0ujt5g.js","/_next/static/immutable/chunks/2iu2dzfpjcj8b.js","/_next/static/immutable/chunks/1of6269ka1nvs.js","/_next/static/immutable/chunks/450c3ag6he-lt.js","/_next/static/immutable/chunks/23jdee3-y925b.js","/_next/static/immutable/chunks/3j4sn5o2-pyjp.js","/_next/static/immutable/chunks/2xsydt1jy74tm.js"],"DynamicCodeBlock"] 24:["$","$L30",null,{"items":["Preview","Code"],"className":"not-prose","children":[["$","$L31",null,{"value":"Preview","children":["$","div",null,{"className":"flex min-h-[220px] w-full flex-col gap-4 p-8 items-center justify-center","children":["$","div",null,{"className":"flex w-full max-w-md flex-col gap-4","children":[["$","div",null,{"data-slot":"marker","data-variant":"separator","className":"group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm leading-5 text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-foreground before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-border after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-border","children":["$","span",null,{"data-slot":"marker-content","className":"min-w-0 wrap-break-word group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground","children":"Today"}]}],["$","div",null,{"data-slot":"marker","data-variant":"default","className":"group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm leading-5 text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-foreground","children":[["$","span",null,{"data-slot":"marker-icon","aria-hidden":"true","className":"size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":"1em","height":"1em","fill":"currentColor","viewBox":"0 0 256 256","transform":"$undefined","children":[false,"$undefined",["$","path",null,{"d":"M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"}]]}]}],["$","span",null,{"data-slot":"marker-content","className":"min-w-0 wrap-break-word group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground","children":"Saved to your library"}]]}]]}]}]}],["$","$L31",null,{"value":"Code","className":"p-0 [&_figure]:my-0 [&_figure]:rounded-none [&_figure]:border-0","children":["$","$L32",null,{"lang":"tsx","code":"import { Marker, MarkerContent, MarkerIcon } from 'nooxit-design-system/components/marker';\nimport { CheckIcon } from '@phosphor-icons/react/ssr';\n\nexport default function MarkerDemo() {\n return (\n

\n \n Today\n \n \n \n \n \n Saved to your library\n \n

\n );\n}"}]}]]}]

Marker

InstallationCopy Anchor Link

NotesCopy Anchor Link

On this page

Installation

Notes