Expand or collapse

1:"$Sreact.fragment" 2:I[544636,["/_next/static/immutable/chunks/1ylkxgqwi3vhd.js","/_next/static/immutable/chunks/006c40czj99s2.js","/_next/static/immutable/chunks/1sxz2q1-b67-8.js","/_next/static/immutable/chunks/45btjx844d8qk.js","/_next/static/immutable/chunks/1g1rrbcbhl84p.js","/_next/static/immutable/chunks/13f26g3719ion.js","/_next/static/immutable/chunks/123e8cmot7qfp.js","/_next/static/immutable/chunks/35g2x4btigiuu.js"],"PostHogProvider"] 3:I[924893,["/_next/static/immutable/chunks/1ylkxgqwi3vhd.js","/_next/static/immutable/chunks/006c40czj99s2.js","/_next/static/immutable/chunks/1sxz2q1-b67-8.js","/_next/static/immutable/chunks/45btjx844d8qk.js","/_next/static/immutable/chunks/1g1rrbcbhl84p.js","/_next/static/immutable/chunks/13f26g3719ion.js","/_next/static/immutable/chunks/123e8cmot7qfp.js","/_next/static/immutable/chunks/35g2x4btigiuu.js"],"ThemeProvider"] 4:I[175244,["/_next/static/immutable/chunks/1ylkxgqwi3vhd.js","/_next/static/immutable/chunks/006c40czj99s2.js","/_next/static/immutable/chunks/1sxz2q1-b67-8.js","/_next/static/immutable/chunks/45btjx844d8qk.js","/_next/static/immutable/chunks/1g1rrbcbhl84p.js","/_next/static/immutable/chunks/13f26g3719ion.js","/_next/static/immutable/chunks/123e8cmot7qfp.js","/_next/static/immutable/chunks/35g2x4btigiuu.js"],"default"] 5:I[339756,["/_next/static/immutable/chunks/0x-9rc1bm-510.js"],"default"] 6:I[837457,["/_next/static/immutable/chunks/0x-9rc1bm-510.js"],"default"] 7:I[329306,["/_next/static/immutable/chunks/1ylkxgqwi3vhd.js","/_next/static/immutable/chunks/006c40czj99s2.js","/_next/static/immutable/chunks/1sxz2q1-b67-8.js","/_next/static/immutable/chunks/45btjx844d8qk.js","/_next/static/immutable/chunks/1g1rrbcbhl84p.js","/_next/static/immutable/chunks/13f26g3719ion.js","/_next/static/immutable/chunks/123e8cmot7qfp.js","/_next/static/immutable/chunks/35g2x4btigiuu.js","/_next/static/immutable/chunks/2brsfaga9fojf.js"],"default"] 8:I[846696,["/_next/static/immutable/chunks/1ylkxgqwi3vhd.js","/_next/static/immutable/chunks/006c40czj99s2.js","/_next/static/immutable/chunks/1sxz2q1-b67-8.js","/_next/static/immutable/chunks/45btjx844d8qk.js","/_next/static/immutable/chunks/1g1rrbcbhl84p.js","/_next/static/immutable/chunks/13f26g3719ion.js","/_next/static/immutable/chunks/123e8cmot7qfp.js","/_next/static/immutable/chunks/35g2x4btigiuu.js"],"Toaster"] 9:I[535892,["/_next/static/immutable/chunks/1ylkxgqwi3vhd.js","/_next/static/immutable/chunks/006c40czj99s2.js","/_next/static/immutable/chunks/1sxz2q1-b67-8.js","/_next/static/immutable/chunks/45btjx844d8qk.js","/_next/static/immutable/chunks/1g1rrbcbhl84p.js","/_next/static/immutable/chunks/13f26g3719ion.js","/_next/static/immutable/chunks/123e8cmot7qfp.js","/_next/static/immutable/chunks/35g2x4btigiuu.js"],"GuideframeGrid"] a:I[302355,["/_next/static/immutable/chunks/1ylkxgqwi3vhd.js","/_next/static/immutable/chunks/006c40czj99s2.js","/_next/static/immutable/chunks/1sxz2q1-b67-8.js","/_next/static/immutable/chunks/45btjx844d8qk.js","/_next/static/immutable/chunks/1g1rrbcbhl84p.js","/_next/static/immutable/chunks/13f26g3719ion.js","/_next/static/immutable/chunks/123e8cmot7qfp.js","/_next/static/immutable/chunks/35g2x4btigiuu.js"],"Analytics"] b:I[957215,["/_next/static/immutable/chunks/1ylkxgqwi3vhd.js","/_next/static/immutable/chunks/006c40czj99s2.js","/_next/static/immutable/chunks/1sxz2q1-b67-8.js","/_next/static/immutable/chunks/45btjx844d8qk.js","/_next/static/immutable/chunks/1g1rrbcbhl84p.js","/_next/static/immutable/chunks/13f26g3719ion.js","/_next/static/immutable/chunks/123e8cmot7qfp.js","/_next/static/immutable/chunks/35g2x4btigiuu.js"],"SpeedInsights"] c:I[485295,["/_next/static/immutable/chunks/1ylkxgqwi3vhd.js","/_next/static/immutable/chunks/006c40czj99s2.js","/_next/static/immutable/chunks/1sxz2q1-b67-8.js","/_next/static/immutable/chunks/45btjx844d8qk.js","/_next/static/immutable/chunks/1g1rrbcbhl84p.js","/_next/static/immutable/chunks/13f26g3719ion.js","/_next/static/immutable/chunks/123e8cmot7qfp.js","/_next/static/immutable/chunks/35g2x4btigiuu.js","/_next/static/immutable/chunks/0y3x_8ar-e5qx.js"],"default"] d:I[454365,["/_next/static/immutable/chunks/1ylkxgqwi3vhd.js","/_next/static/immutable/chunks/006c40czj99s2.js","/_next/static/immutable/chunks/1sxz2q1-b67-8.js","/_next/static/immutable/chunks/45btjx844d8qk.js","/_next/static/immutable/chunks/1g1rrbcbhl84p.js","/_next/static/immutable/chunks/13f26g3719ion.js","/_next/static/immutable/chunks/123e8cmot7qfp.js","/_next/static/immutable/chunks/35g2x4btigiuu.js","/_next/static/immutable/chunks/0y3x_8ar-e5qx.js","/_next/static/immutable/chunks/0aa84erx5sqhg.js"],"default"] 18:I[168027,["/_next/static/immutable/chunks/1ylkxgqwi3vhd.js","/_next/static/immutable/chunks/006c40czj99s2.js","/_next/static/immutable/chunks/1sxz2q1-b67-8.js","/_next/static/immutable/chunks/45btjx844d8qk.js","/_next/static/immutable/chunks/1g1rrbcbhl84p.js","/_next/static/immutable/chunks/13f26g3719ion.js","/_next/static/immutable/chunks/123e8cmot7qfp.js","/_next/static/immutable/chunks/35g2x4btigiuu.js"],"default",1] :HL["/_next/static/immutable/chunks/0a84_ypcclml4.css","style"] :HL["/_next/static/immutable/chunks/2vo05jynynyad.css","style"] :HL["/_next/static/immutable/media/797e433ab948586e-s.p.1v5bejj26fx9h.woff2","font",{"crossOrigin":"","type":"font/woff2"}] :HL["/_next/static/immutable/media/ClashDisplay_Bold-s.p.07mpa8ivzlgkj.ttf","font",{"crossOrigin":"","type":"font/ttf"}] :HL["/_next/static/immutable/media/ClashDisplay_Light-s.p.2chw5n7fxg-bu.ttf","font",{"crossOrigin":"","type":"font/ttf"}] :HL["/_next/static/immutable/media/ClashDisplay_Regular-s.p.3vno0xprl0e7j.ttf","font",{"crossOrigin":"","type":"font/ttf"}] :HL["/_next/static/immutable/media/ClashDisplay_Semibold-s.p.3dslcjb65yc10.ttf","font",{"crossOrigin":"","type":"font/ttf"}] :HL["/_next/static/immutable/media/HelveticaNeue_Bold-s.p.1npaaudotcfcn.ttf","font",{"crossOrigin":"","type":"font/ttf"}] :HL["/_next/static/immutable/media/HelveticaNeue_Medium-s.p.04tcx442h7sr1.ttf","font",{"crossOrigin":"","type":"font/ttf"}] :HL["/_next/static/immutable/media/HelveticaNeue_Regular-s.p.27n_4fovvaty3.ttf","font",{"crossOrigin":"","type":"font/ttf"}] :HL["/_next/static/immutable/media/caa3a2e1cccd8315-s.p.0zr6hhvz-h9nw.woff2","font",{"crossOrigin":"","type":"font/woff2"}] :HL["/_next/static/immutable/chunks/0ogeryrv4j1gt.css","style"] :HL["/_next/static/immutable/chunks/437g_zsx755dc.css","style"] 16:X 0:{"P":null,"c":["","docs","accordion"],"q":"","i":false,"f":[[["",{"children":["docs",{"children":[["slug","accordion","oc",[]],{"children":["__PAGE__",{},"$undefined","$undefined",4096]},"$undefined","$undefined",4096]},"$undefined","$undefined",4096]},"$undefined","$undefined",4112],[["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/immutable/chunks/0a84_ypcclml4.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/immutable/chunks/2vo05jynynyad.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","script","script-0",{"src":"/_next/static/immutable/chunks/1ylkxgqwi3vhd.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/_next/static/immutable/chunks/006c40czj99s2.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/_next/static/immutable/chunks/1sxz2q1-b67-8.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/_next/static/immutable/chunks/45btjx844d8qk.js","async":true,"nonce":"$undefined"}],["$","script","script-4",{"src":"/_next/static/immutable/chunks/1g1rrbcbhl84p.js","async":true,"nonce":"$undefined"}],["$","script","script-5",{"src":"/_next/static/immutable/chunks/13f26g3719ion.js","async":true,"nonce":"$undefined"}],["$","script","script-6",{"src":"/_next/static/immutable/chunks/123e8cmot7qfp.js","async":true,"nonce":"$undefined"}],["$","script","script-7",{"src":"/_next/static/immutable/chunks/35g2x4btigiuu.js","async":true,"nonce":"$undefined"}]],["$","html",null,{"lang":"en","suppressHydrationWarning":true,"children":[["$","head",null,{"children":[["$","script",null,{"children":"\n (() => {\n try {\n const savedTheme = window.localStorage.getItem(\"theme\");\n const theme =\n savedTheme === \"light\" || savedTheme === \"dark\"\n ? savedTheme\n : window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n ? \"dark\"\n : \"light\";\n const root = document.documentElement;\n root.dataset.theme = theme;\n root.style.colorScheme = theme;\n } catch {}\n })();\n"}],["$","script",null,{"type":"application/ld+json","children":"{\"@context\":\"https://schema.org\",\"@type\":\"SoftwareApplication\",\"name\":\"Sona UI - Modern React Component Library\",\"description\":\"A modern UI component library built with React and TailwindCSS to help you build beautiful and accessible web applications faster.\",\"url\":\"https://sona-ui.vercel.app\",\"applicationCategory\":\"DeveloperApplication\",\"operatingSystem\":\"Web\",\"author\":{\"@type\":\"Person\",\"name\":\"Dinil Thilakarathne\",\"url\":\"https://github.com/Dinil-Thilakarathne\"}}"}]]}],["$","body",null,{"className":"geist_mono_8d43a2aa-module__8Li5zG__variable geist_a71539c9-module__T19VSG__variable clashdisplay_212459b2-module__DycuVq__variable helveticaneue_290ef4d6-module__xmLDLG__variable bg-background text-foreground antialiased relative","children":["$","$L2",null,{"children":["$","$L3",null,{"children":[false,["$","$L4",null,{}],["$","$L5",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","$L7",null,{}],[]],"forbidden":"$undefined","unauthorized":"$undefined"}],["$","$L8",null,{"position":"bottom-right","richColors":true}],["$","$L9",null,{"panel":true,"rulers":true,"maxWidth":768,"margin":8,"columns":{"desktop":6,"tablet":4,"mobile":3},"gutter":8,"defaultVisible":false}],["$","$La",null,{}],["$","$Lb",null,{}]]}]}]}]]}]]}],{"children":[["$","$1","c",{"children":[[["$","script","script-0",{"src":"/_next/static/immutable/chunks/0y3x_8ar-e5qx.js","async":true,"nonce":"$undefined"}]],["$","$Lc",null,{"children":["$","$L5",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","$Ld",null,{}],[]],"forbidden":"$undefined","unauthorized":"$undefined"}]}]]}],{"children":[["$","$1","c",{"children":[null,["$","$L5",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":[["$","$1","c",{"children":["$Le",[["$","link","0",{"rel":"stylesheet","href":"/_next/static/immutable/chunks/0ogeryrv4j1gt.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/immutable/chunks/437g_zsx755dc.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","script","script-0",{"src":"/_next/static/immutable/chunks/42jml4ok8v46w.js","async":true,"nonce":"$undefined"}],"$Lf","$L10","$L11","$L12","$L13","$L14"],"$L15"]}],{},null,false,null]},null,false,"$16"]},null,false,null]},null,false,null],"$L17",false]],"m":"$undefined","G":["$18",["$L19","$L1a"]],"S":false,"h":null,"r":"$undefined","s":"$undefined","a":"$undefined","l":"$undefined","p":"$undefined","d":"$undefined","b":"B94piWRVjqH-hVYdaCmCD"} 1b:I[897367,["/_next/static/immutable/chunks/0x-9rc1bm-510.js"],"OutletBoundary"] 1c:"$Sreact.suspense" 1e:I[897367,["/_next/static/immutable/chunks/0x-9rc1bm-510.js"],"ViewportBoundary"] 20:I[897367,["/_next/static/immutable/chunks/0x-9rc1bm-510.js"],"MetadataBoundary"] f:["$","script","script-1",{"src":"/_next/static/immutable/chunks/19p__ny39z0uu.js","async":true,"nonce":"$undefined"}] 10:["$","script","script-2",{"src":"/_next/static/immutable/chunks/0vshgabsk-kwh.js","async":true,"nonce":"$undefined"}] 11:["$","script","script-3",{"src":"/_next/static/immutable/chunks/2cn_2uj6j9_9o.js","async":true,"nonce":"$undefined"}] 12:["$","script","script-4",{"src":"/_next/static/immutable/chunks/22axlf_izqcon.js","async":true,"nonce":"$undefined"}] 13:["$","script","script-5",{"src":"/_next/static/immutable/chunks/0uwnqhcmshhlr.js","async":true,"nonce":"$undefined"}] 14:["$","script","script-6",{"src":"/_next/static/immutable/chunks/1r-t-hha2mvuj.js","async":true,"nonce":"$undefined"}] 15:["$","$L1b",null,{"children":["$","$1c",null,{"name":"Next.MetadataOutlet","children":"$@1d"}]}] 17:["$","$1","h",{"children":[null,["$","$L1e",null,{"children":"$L1f"}],["$","div",null,{"hidden":true,"children":["$","$L20",null,{"children":["$","$1c",null,{"name":"Next.Metadata","children":"$L21"}]}]}],["$","meta",null,{"name":"next-size-adjust","content":""}]]}] 19:["$","link","0",{"rel":"stylesheet","href":"/_next/static/immutable/chunks/0a84_ypcclml4.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}] 1a:["$","link","1",{"rel":"stylesheet","href":"/_next/static/immutable/chunks/2vo05jynynyad.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}] 22:I[132023,["/_next/static/immutable/chunks/1ylkxgqwi3vhd.js","/_next/static/immutable/chunks/006c40czj99s2.js","/_next/static/immutable/chunks/1sxz2q1-b67-8.js","/_next/static/immutable/chunks/45btjx844d8qk.js","/_next/static/immutable/chunks/1g1rrbcbhl84p.js","/_next/static/immutable/chunks/13f26g3719ion.js","/_next/static/immutable/chunks/123e8cmot7qfp.js","/_next/static/immutable/chunks/35g2x4btigiuu.js","/_next/static/immutable/chunks/0y3x_8ar-e5qx.js","/_next/static/immutable/chunks/42jml4ok8v46w.js","/_next/static/immutable/chunks/19p__ny39z0uu.js","/_next/static/immutable/chunks/0vshgabsk-kwh.js","/_next/static/immutable/chunks/2cn_2uj6j9_9o.js","/_next/static/immutable/chunks/22axlf_izqcon.js","/_next/static/immutable/chunks/0uwnqhcmshhlr.js","/_next/static/immutable/chunks/1r-t-hha2mvuj.js"],"default",1] 16:C 23:Tf1d,var Component=(()=>{var m=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var I=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),x=(o,e)=>{for(var t in e)c(o,t,{get:e[t],enumerable:!0})},a=(o,e,t,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of g(e))!A.call(o,r)&&r!==t&&c(o,r,{get:()=>e[r],enumerable:!(i=u(e,r))||i.enumerable});return o};var b=(o,e,t)=>(t=o!=null?m(f(o)):{},a(e||!o||!o.__esModule?c(t,"default",{value:o,enumerable:!0}):t,o)),y=o=>a(c({},"__esModule",{value:!0}),o);var d=I((C,s)=>{s.exports=_jsx_runtime});var v={};x(v,{default:()=>p});var n=b(d());function l(o){let e={a:"a",h2:"h2",h3:"h3",p:"p",...o.components},{CodeBlockWrapper:t,PropTable:i}=e;return t||h("CodeBlockWrapper",!0),i||h("PropTable",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:"Use Accordion when a short list of related sections needs to expand in place. It supports one or many open items, controlled state, and four visual variants."}),` `,(0,n.jsx)(e.h2,{children:"Install"}),` `,(0,n.jsx)(t,{language:"bash",filename:"terminal",code:"npx shadcn@latest add @sona-ui/accordion"}),` `,(0,n.jsx)(e.h2,{children:"Basic usage"}),` `,(0,n.jsx)(t,{language:"tsx",filename:"faq.tsx",code:`import { AccordionItem, AccordionItemContent, AccordionItemHeader, AccordionItemTrigger, AccordionRoot, } from "@/components/ui/accordion/accordion"; export function Faq() { return ( When will my order arrive? Orders usually arrive within three to five business days. ); }`}),` `,(0,n.jsx)(e.h2,{children:"Examples"}),` `,(0,n.jsx)(e.h3,{children:"Multiple open items"}),` `,(0,n.jsx)(e.p,{children:"Set allowMultiple when people should be able to compare more than one section at a time."}),` `,(0,n.jsx)(t,{language:"tsx",filename:"multiple-items.tsx",code:` ... ... `}),` `,(0,n.jsx)(e.h3,{children:"Variants"}),` `,(0,n.jsx)(e.p,{children:"Choose default, outlined, splitted, or animated to match the density and separation of the surrounding layout."}),` `,(0,n.jsx)(e.h2,{children:"API"}),` `,(0,n.jsx)(i,{component:"accordion"}),` `,(0,n.jsx)(e.h2,{children:"Accessibility"}),` `,(0,n.jsx)(e.p,{children:"Accordion uses Base UI disclosure semantics with connected triggers and panels. Triggers can be reached by keyboard and expose their expanded state. Keep each trigger label specific enough to describe the panel it reveals."}),` `,(0,n.jsx)(e.h2,{children:"Styling"}),` `,(0,n.jsx)(e.p,{children:"Use the root variant and class name options to adapt spacing and surfaces to the surrounding page. The panel transition respects reduced-motion preferences."}),` `,(0,n.jsx)(e.h2,{children:"Contact"}),` `,(0,n.jsxs)(e.p,{children:["Found a bug or need help using this component? ",(0,n.jsx)(e.a,{href:"https://github.com/Dinil-Thilakarathne/sona-ui/issues",children:"Open an issue on GitHub"}),"."]}),` `,(0,n.jsx)(e.h2,{children:"License & Usage"}),` `,(0,n.jsx)(e.p,{children:"Sona UI is available under the MIT license. You may use, modify, and distribute this component in personal and commercial projects."})]})}function p(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(l,{...o})}):l(o)}function h(o,e){throw new Error("Expected "+(e?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}return y(v);})(); ;return Component;24:T88c,Use Accordion when a short list of related sections needs to expand in place. It supports one or many open items, controlled state, and four visual variants. ## Install ## Basic usage When will my order arrive? Orders usually arrive within three to five business days. ); }`} /> ## Examples ### Multiple open items Set allowMultiple when people should be able to compare more than one section at a time. ... ... `} /> ### Variants Choose default, outlined, splitted, or animated to match the density and separation of the surrounding layout. ## API ## Accessibility Accordion uses Base UI disclosure semantics with connected triggers and panels. Triggers can be reached by keyboard and expose their expanded state. Keep each trigger label specific enough to describe the panel it reveals. ## Styling Use the root variant and class name options to adapt spacing and surfaces to the surrounding page. The panel transition respects reduced-motion preferences. ## Contact Found a bug or need help using this component? [Open an issue on GitHub](https://github.com/Dinil-Thilakarathne/sona-ui/issues). ## License & Usage Sona UI is available under the MIT license. You may use, modify, and distribute this component in personal and commercial projects.25:T80c,import { AccordionItem, AccordionItemContent, AccordionItemHeader, AccordionItemTrigger, AccordionRoot, } from "@/components/ui/accordion/accordion"; export default function AccordionAnimatedExample() { const accordionData = [ { value: "item-1", title: "What is Lorem Ipsum?", content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has been the industry's standard dummy text since the 1500s.", }, { value: "item-2", title: "Why do we use it?", content: "It is a long-established fact that a reader will be distracted by the readable content of a page when looking at its layout.", }, { value: "item-3", title: "Where can I get some?", content: "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.", }, { value: "item-4", title: "Is Lorem Ipsum safe to use?", content: "Yes, Lorem Ipsum is safe to use as placeholder text for web and print design purposes.", }, { value: "item-5", title: "What are the origins of Lorem Ipsum?", content: "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC.", }, ]; return ( {accordionData.map((item) => ( {item.title}

{item.content}

))} ); } 26:T7f2,import { AccordionItem, AccordionItemContent, AccordionItemHeader, AccordionItemTrigger, AccordionRoot, } from "@/components/ui/accordion/accordion"; export default function AccordionDefaultExample() { const accordionData = [ { value: "item-1", title: "What is Lorem Ipsum?", content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has been the industry's standard dummy text since the 1500s.", }, { value: "item-2", title: "Why do we use it?", content: "It is a long-established fact that a reader will be distracted by the readable content of a page when looking at its layout.", }, { value: "item-3", title: "Where can I get some?", content: "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.", }, { value: "item-4", title: "Is Lorem Ipsum safe to use?", content: "Yes, Lorem Ipsum is safe to use as placeholder text for web and print design purposes.", }, { value: "item-5", title: "What are the origins of Lorem Ipsum?", content: "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC.", }, ]; return ( {accordionData.map((item) => ( {item.title}

{item.content}

))} ); } 27:T7f3,import { AccordionItem, AccordionItemContent, AccordionItemHeader, AccordionItemTrigger, AccordionRoot, } from "@/components/ui/accordion/accordion"; export default function AccordionMultiStepExample() { const accordionData = [ { value: "item-1", title: "What is Lorem Ipsum?", content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has been the industry's standard dummy text since the 1500s.", }, { value: "item-2", title: "Why do we use it?", content: "It is a long-established fact that a reader will be distracted by the readable content of a page when looking at its layout.", }, { value: "item-3", title: "Where can I get some?", content: "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.", }, { value: "item-4", title: "Is Lorem Ipsum safe to use?", content: "Yes, Lorem Ipsum is safe to use as placeholder text for web and print design purposes.", }, { value: "item-5", title: "What are the origins of Lorem Ipsum?", content: "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC.", }, ]; return ( {accordionData.map((item) => ( {item.title}

{item.content}

))} ); } 28:T80c,import { AccordionItem, AccordionItemContent, AccordionItemHeader, AccordionItemTrigger, AccordionRoot, } from "@/components/ui/accordion/accordion"; export default function AccordionOutlinedExample() { const accordionData = [ { value: "item-1", title: "What is Lorem Ipsum?", content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has been the industry's standard dummy text since the 1500s.", }, { value: "item-2", title: "Why do we use it?", content: "It is a long-established fact that a reader will be distracted by the readable content of a page when looking at its layout.", }, { value: "item-3", title: "Where can I get some?", content: "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.", }, { value: "item-4", title: "Is Lorem Ipsum safe to use?", content: "Yes, Lorem Ipsum is safe to use as placeholder text for web and print design purposes.", }, { value: "item-5", title: "What are the origins of Lorem Ipsum?", content: "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC.", }, ]; return ( {accordionData.map((item) => ( {item.title}

{item.content}

))} ); } 29:T80c,import { AccordionItem, AccordionItemContent, AccordionItemHeader, AccordionItemTrigger, AccordionRoot, } from "@/components/ui/accordion/accordion"; export default function AccordionSplittedExample() { const accordionData = [ { value: "item-1", title: "What is Lorem Ipsum?", content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has been the industry's standard dummy text since the 1500s.", }, { value: "item-2", title: "Why do we use it?", content: "It is a long-established fact that a reader will be distracted by the readable content of a page when looking at its layout.", }, { value: "item-3", title: "Where can I get some?", content: "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.", }, { value: "item-4", title: "Is Lorem Ipsum safe to use?", content: "Yes, Lorem Ipsum is safe to use as placeholder text for web and print design purposes.", }, { value: "item-5", title: "What are the origins of Lorem Ipsum?", content: "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC.", }, ]; return ( {accordionData.map((item) => ( {item.title}

{item.content}

))} ); } 2a:T1973,"use client"; import { Accordion } from "@base-ui/react/accordion"; import { cva, type VariantProps } from "class-variance-authority"; import { createContext, type ReactNode, useContext } from "react"; import { cn } from "@/lib/sona-utils"; import AnimatedPlusMinusButton from "./animated-plus-minus-button"; import styles from "./styles.module.css"; export type AccordionVariant = "default" | "outlined" | "splitted" | "animated"; export interface AccordionProps extends Omit, "className" | "multiple"> { /** The accordion items. */ children: ReactNode; /** Allows multiple accordion items to be open simultaneously. @default false */ allowMultiple?: boolean; /** Controlled values of the currently open items. */ value?: string[]; /** Values of the initially open items for uncontrolled usage. */ defaultValue?: string[]; /** Called when the set of open item values changes. */ onValueChange?: Accordion.Root.Props["onValueChange"]; /** Whether the entire accordion ignores interaction. @default false */ disabled?: boolean; /** Keeps closed panels mounted in the DOM. @default false */ keepMounted?: boolean; /** Allows browser find-in-page to reveal matching panel content. @default false */ hiddenUntilFound?: boolean; /** Additional classes for the accordion root. */ className?: string; /** Visual style of the accordion. @default "default" */ variant?: AccordionVariant; } const accordionWrapperVariants = cva( "flex w-full flex-col items-stretch overflow-clip rounded-2xl", { variants: { variant: { default: "overflow-clip rounded-2xl", outlined: "overflow-clip rounded-2xl", splitted: "overflow-clip rounded-2xl", animated: styles.wrapper, }, }, defaultVariants: { variant: "default" }, }, ); const accordionItemVariants = cva( "relative w-full min-w-0 overflow-hidden bg-background text-foreground transition-[transform,border-radius] duration-300", { variants: { variant: { default: "border-b border-border", outlined: "border-foreground border-t border-x last:border-b first:rounded-t-2xl last:rounded-b-2xl", splitted: "rounded-2xl", animated: styles.animated, }, }, defaultVariants: { variant: "default" }, }, ); const AccordionContext = createContext<{ variant: AccordionVariant } | null>( null, ); function useAccordionContext(component: string) { const context = useContext(AccordionContext); if (!context) { throw new Error(`${component} must be used within AccordionRoot`); } return context; } export function AccordionRoot({ children, allowMultiple = false, className, variant = "default", ...props }: AccordionProps) { return ( {children} ); } export interface AccordionItemProps extends Omit, VariantProps { /** Stable value used to identify the item. */ value?: string; /** Additional classes for the accordion item. */ className?: string; } export function AccordionItem({ children, className, value, ...props }: AccordionItemProps) { const { variant } = useAccordionContext("AccordionItem"); return (

{children}

); } export interface AccordionItemHeaderProps { /** Header content displayed before the open-state icon. */ children: ReactNode; /** Legacy item value; state is now owned by AccordionItem. */ value?: string; /** Additional classes for the header layout. */ className?: string; } export function AccordionItemHeader({ children, className, }: AccordionItemHeaderProps) { useAccordionContext("AccordionItemHeader"); return (

{children}

); } export interface AccordionItemTriggerProps extends Omit { /** Trigger contents. */ children: ReactNode; /** Legacy item value; state is now owned by AccordionItem. */ value?: string; /** Additional classes for the trigger. */ className?: string; } export function AccordionItemTrigger({ children, className, value: _value, ...props }: AccordionItemTriggerProps) { useAccordionContext("AccordionItemTrigger"); return ( {children} ); } export interface AccordionItemContentProps extends Omit { /** Panel contents. */ children: ReactNode; /** Legacy item value; state is now owned by AccordionItem. */ value?: string; /** Additional classes for the panel content. */ className?: string; } export function AccordionItemContent({ children, className, value: _value, ...props }: AccordionItemContentProps) { useAccordionContext("AccordionItemContent"); return (

{children}

); } export { AccordionContext }; 2b:T574,.wrapper { border-radius: 1rem; overflow: visible; } .animated { --_margin-gap: 1.5rem; --ease: linear( 0 0%, 0.2688 9.91%, 0.3859 15%, 0.4917 20.19%, 0.5865 25.5%, 0.6705 30.93%, 0.7441 36.51%, 0.8075 42.26%, 0.8593 47.98%, 0.9022 53.93%, 0.9366 60.13%, 0.963 66.67%, 0.9812 73.4%, 0.9929 80.76%, 0.9986 88.89%, 1 100% ); --bounce-duration: calc((1 / var(--speed, 1)) * 1s); --duration: calc((0.36 / var(--speed, 1)) * 1s); outline: 1px solid; transition-property: transform, border-radius; transition-duration: var(--duration); transition-timing-function: var(--ease); transform-style: preserve-3d; perspective: 120px; } .animated:has(~ .animated[data-open]) { transform: translate3d(0, calc(var(--_margin-gap) * -1), 0); } .animated[data-open] ~ .animated { transform: translate3d(0, calc(var(--_margin-gap) * 1), 0); } .animated:is(:first-child) { border-top-left-radius: 1rem; border-top-right-radius: 1rem; } .animated:is(:last-child) { border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; } .animated[data-open] { border-radius: 1rem; } .animated[data-open] + .animated { border-top-left-radius: 1rem; border-top-right-radius: 1rem; } .animated.animated:has(+ .animated[data-open]) { border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; } 2c:T80c,import { AccordionItem, AccordionItemContent, AccordionItemHeader, AccordionItemTrigger, AccordionRoot, } from "@/components/ui/accordion/accordion"; export default function AccordionAnimatedExample() { const accordionData = [ { value: "item-1", title: "What is Lorem Ipsum?", content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has been the industry's standard dummy text since the 1500s.", }, { value: "item-2", title: "Why do we use it?", content: "It is a long-established fact that a reader will be distracted by the readable content of a page when looking at its layout.", }, { value: "item-3", title: "Where can I get some?", content: "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.", }, { value: "item-4", title: "Is Lorem Ipsum safe to use?", content: "Yes, Lorem Ipsum is safe to use as placeholder text for web and print design purposes.", }, { value: "item-5", title: "What are the origins of Lorem Ipsum?", content: "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC.", }, ]; return ( {accordionData.map((item) => ( {item.title}

{item.content}

))} ); } 2d:T7f2,import { AccordionItem, AccordionItemContent, AccordionItemHeader, AccordionItemTrigger, AccordionRoot, } from "@/components/ui/accordion/accordion"; export default function AccordionDefaultExample() { const accordionData = [ { value: "item-1", title: "What is Lorem Ipsum?", content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has been the industry's standard dummy text since the 1500s.", }, { value: "item-2", title: "Why do we use it?", content: "It is a long-established fact that a reader will be distracted by the readable content of a page when looking at its layout.", }, { value: "item-3", title: "Where can I get some?", content: "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.", }, { value: "item-4", title: "Is Lorem Ipsum safe to use?", content: "Yes, Lorem Ipsum is safe to use as placeholder text for web and print design purposes.", }, { value: "item-5", title: "What are the origins of Lorem Ipsum?", content: "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC.", }, ]; return ( {accordionData.map((item) => ( {item.title}

{item.content}

))} ); } 2e:T7f3,import { AccordionItem, AccordionItemContent, AccordionItemHeader, AccordionItemTrigger, AccordionRoot, } from "@/components/ui/accordion/accordion"; export default function AccordionMultiStepExample() { const accordionData = [ { value: "item-1", title: "What is Lorem Ipsum?", content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has been the industry's standard dummy text since the 1500s.", }, { value: "item-2", title: "Why do we use it?", content: "It is a long-established fact that a reader will be distracted by the readable content of a page when looking at its layout.", }, { value: "item-3", title: "Where can I get some?", content: "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.", }, { value: "item-4", title: "Is Lorem Ipsum safe to use?", content: "Yes, Lorem Ipsum is safe to use as placeholder text for web and print design purposes.", }, { value: "item-5", title: "What are the origins of Lorem Ipsum?", content: "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC.", }, ]; return ( {accordionData.map((item) => ( {item.title}

{item.content}

))} ); } 2f:T80c,import { AccordionItem, AccordionItemContent, AccordionItemHeader, AccordionItemTrigger, AccordionRoot, } from "@/components/ui/accordion/accordion"; export default function AccordionOutlinedExample() { const accordionData = [ { value: "item-1", title: "What is Lorem Ipsum?", content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has been the industry's standard dummy text since the 1500s.", }, { value: "item-2", title: "Why do we use it?", content: "It is a long-established fact that a reader will be distracted by the readable content of a page when looking at its layout.", }, { value: "item-3", title: "Where can I get some?", content: "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.", }, { value: "item-4", title: "Is Lorem Ipsum safe to use?", content: "Yes, Lorem Ipsum is safe to use as placeholder text for web and print design purposes.", }, { value: "item-5", title: "What are the origins of Lorem Ipsum?", content: "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC.", }, ]; return ( {accordionData.map((item) => ( {item.title}

{item.content}

))} ); } 30:T80c,import { AccordionItem, AccordionItemContent, AccordionItemHeader, AccordionItemTrigger, AccordionRoot, } from "@/components/ui/accordion/accordion"; export default function AccordionSplittedExample() { const accordionData = [ { value: "item-1", title: "What is Lorem Ipsum?", content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has been the industry's standard dummy text since the 1500s.", }, { value: "item-2", title: "Why do we use it?", content: "It is a long-established fact that a reader will be distracted by the readable content of a page when looking at its layout.", }, { value: "item-3", title: "Where can I get some?", content: "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.", }, { value: "item-4", title: "Is Lorem Ipsum safe to use?", content: "Yes, Lorem Ipsum is safe to use as placeholder text for web and print design purposes.", }, { value: "item-5", title: "What are the origins of Lorem Ipsum?", content: "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC.", }, ]; return ( {accordionData.map((item) => ( {item.title}

{item.content}

))} ); } 31:T750,export default function AccordionDefaultExample() { const accordionData = [ { value: "item-1", title: "What is Lorem Ipsum?", content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has been the industry's standard dummy text since the 1500s.", }, { value: "item-2", title: "Why do we use it?", content: "It is a long-established fact that a reader will be distracted by the readable content of a page when looking at its layout.", }, { value: "item-3", title: "Where can I get some?", content: "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.", }, { value: "item-4", title: "Is Lorem Ipsum safe to use?", content: "Yes, Lorem Ipsum is safe to use as placeholder text for web and print design purposes.", }, { value: "item-5", title: "What are the origins of Lorem Ipsum?", content: "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC.", }, ]; return ( {accordionData.map((item) => ( {item.title}

{item.content}

))} ); }e:["$","$L22",null,{"doc":{"title":"Accordion","slug":"accordion","body":{"code":"$23","raw":"$24"},"sourceFiles":"$undefined"},"navigation":{"previous":{"title":"Expanding Action","href":"/docs/expanding-action"},"next":{"title":"Ripple Button","href":"/docs/ripple-button"}},"componentData":{"component":"accordion","examples":[{"name":"animated","code":"$25"},{"name":"default","code":"$26"},{"name":"multistep","code":"$27"},{"name":"outlined","code":"$28"},{"name":"splitted","code":"$29"}],"sourceFiles":[{"id":"component:accordion/accordion.tsx:0","path":"accordion/accordion.tsx","target":"components/sonaui/accordion/accordion.tsx","content":"$2a","language":"tsx","group":"component"},{"id":"component:accordion/animated-plus-minus-button.tsx:1","path":"accordion/animated-plus-minus-button.tsx","target":"components/sonaui/accordion/animated-plus-minus-button.tsx","content":"\"use client\";\n\nexport interface AnimatedPlusMinusButtonProps {\n /** Icon size in pixels. @default 24 */\n size?: number;\n}\n\nexport default function AnimatedPlusMinusButton({\n size = 24,\n}: AnimatedPlusMinusButtonProps) {\n return (\n \n \n \n );\n}\n","language":"tsx","group":"component"},{"id":"component:accordion/styles.module.css:2","path":"accordion/styles.module.css","target":"components/sonaui/accordion/styles.module.css","content":"$2b","language":"css","group":"component"},{"id":"component:sona-utils/sona-utils.ts:3","path":"sona-utils/sona-utils.ts","target":"components/sonaui/sona-utils/sona-utils.ts","content":"import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/** Merge conditional class names while resolving Tailwind conflicts. */\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","language":"ts","group":"component"},{"id":"example:animated:0","path":"animated.tsx","target":"animated.tsx","content":"$2c","language":"tsx","group":"example"},{"id":"example:default:1","path":"default.tsx","target":"default.tsx","content":"$2d","language":"tsx","group":"example"},{"id":"example:multistep:2","path":"multistep.tsx","target":"multistep.tsx","content":"$2e","language":"tsx","group":"example"},{"id":"example:outlined:3","path":"outlined.tsx","target":"outlined.tsx","content":"$2f","language":"tsx","group":"example"},{"id":"example:splitted:4","path":"splitted.tsx","target":"splitted.tsx","content":"$30","language":"tsx","group":"example"}],"dependencies":["@base-ui/react","class-variance-authority","clsx","tailwind-merge"],"usage":"$31","props":[{"name":"children","type":"ReactNode","default":"required","description":"The accordion items."},{"name":"allowMultiple","type":"boolean","default":"false","description":"Allows multiple accordion items to be open simultaneously."},{"name":"value","type":"string[]","default":"—","description":"Controlled values of the currently open items."},{"name":"defaultValue","type":"string[]","default":"—","description":"Values of the initially open items for uncontrolled usage."},{"name":"onValueChange","type":"Accordion.Root.Props[\"onValueChange\"]","default":"—","description":"Called when the set of open item values changes."},{"name":"disabled","type":"boolean","default":"false","description":"Whether the entire accordion ignores interaction."},{"name":"keepMounted","type":"boolean","default":"false","description":"Keeps closed panels mounted in the DOM."},{"name":"hiddenUntilFound","type":"boolean","default":"false","description":"Allows browser find-in-page to reveal matching panel content."},{"name":"className","type":"string","default":"—","description":"Additional classes for the accordion root."},{"name":"variant","type":"AccordionVariant","default":"\"default\"","description":"Visual style of the accordion."}],"hasPlayground":true}}] 1f:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1"}]] 32:I[27201,["/_next/static/immutable/chunks/0x-9rc1bm-510.js"],"IconMark"] 1d:null 21:[["$","title","0",{"children":"Accordion"}],["$","link","1",{"rel":"author","href":"https://github.com/Dinil-Thilakarathne"}],["$","meta","2",{"name":"author","content":"Dinil Thilakarathne"}],["$","link","3",{"rel":"manifest","href":"/manifest.webmanifest","crossOrigin":"$undefined"}],["$","meta","4",{"name":"keywords","content":"React,UI Components,TailwindCSS,Component Library,Sona UI,Modern UI,Accessible Web"}],["$","meta","5",{"name":"creator","content":"Dinil Thilakarathne"}],["$","link","6",{"rel":"canonical","href":"https://sona-ui.vercel.app/docs/accordion"}],["$","meta","7",{"property":"og:title","content":"Accordion"}],["$","meta","8",{"property":"og:url","content":"https://sona-ui.vercel.app/docs/accordion"}],["$","meta","9",{"property":"og:image","content":"https://sona-ui.vercel.app/og/accordion-og.png"}],["$","meta","10",{"property":"og:image:width","content":"1200"}],["$","meta","11",{"property":"og:image:height","content":"630"}],["$","meta","12",{"property":"og:image:alt","content":"Accordion"}],["$","meta","13",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","14",{"name":"twitter:creator","content":"@codebydinil"}],["$","meta","15",{"name":"twitter:title","content":"Sona UI - Modern React Component Library"}],["$","meta","16",{"name":"twitter:description","content":"A modern UI component library built with React and TailwindCSS to help you build beautiful and accessible web applications faster."}],["$","meta","17",{"name":"twitter:image","content":"https://sona-ui.vercel.app/twitter-image?4d805fea746c6718"}],["$","meta","18",{"name":"twitter:image:alt","content":"Sona UI — Beautiful interactions, owned by your codebase."}],["$","meta","19",{"name":"twitter:image:type","content":"image/png"}],["$","meta","20",{"name":"twitter:image:width","content":"1200"}],["$","meta","21",{"name":"twitter:image:height","content":"630"}],["$","link","22",{"rel":"icon","href":"/favicon.ico?favicon.39op20u-fe710.ico","sizes":"48x48","type":"image/x-icon"}],["$","$L32","23",{}]]

What is Lorem Ipsum?Expand or collapse

Why do we use it?Expand or collapse

Where can I get some?Expand or collapse

Is Lorem Ipsum safe to use?Expand or collapse

What are the origins of Lorem Ipsum?Expand or collapse