jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
8963a831478c93d042e13c94c8f59e56194acba2
flowbite-vue/docs/.vitepress/dist/assets/components_accordion.md.3f1ef99a.js
Jaroslav Drzik a27c84b7a9 dist directory
2024-03-12 05:28:28 +01:00

516 lines
131 KiB
JavaScript
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import{u as A,t as S}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{d as q,o as b,c as f,r as _,l as n,g as c,h as v,j as T,n as B,e as I,k as s,H as a,w as l,a as o,Q as m}from"./chunks/framework.3f630664.js";let P=(r=21)=>crypto.getRandomValues(new Uint8Array(r)).reduce((t,p)=>(p&=63,p<36?t+=p.toString(36):p<62?t+=(p-26).toString(36).toUpperCase():p>62?t+="-":t+="_",t),"");const H=["data-accordion-id"],x=q({__name:"FwbAccordion",props:{alwaysOpen:{type:Boolean,default:!1},openFirstItem:{type:Boolean,default:!0},flush:{type:Boolean,default:!1}},setup(r){const t=r,p=P();return A(p,{...t}),(y,E)=>(b(),f("div",{"data-accordion-id":n(p)},[_(y.$slots,"default")],8,H))}}),N="p-5 border border-gray-200 dark:border-gray-700 dark:bg-gray-900";function O(r){const t=c(()=>r.value.parentElement.parentElement.dataset.accordionId),p=c(()=>r.value.parentElement.dataset.panelId),{accordionsStates:y}=A(),E=c(()=>y[t.value]),e=c(()=>y[t.value].panels[p.value]),i=c(()=>Object.keys(y[t.value].panels[p.value]).length);return{contentClasses:c(()=>S(N,!e.value.isVisible&&"hidden",(e.value.order!==i.value-1||E.value.flush)&&"border-b-0",e.value.order===i.value-1&&"border-t-0",E.value.flush&&"border-x-0"))}}const d=q({__name:"FwbAccordionContent",setup(r){const t=v(!1),p=v();let y;return T(()=>{y=O(p).contentClasses,t.value=!0}),(E,e)=>(b(),f("div",{ref_key:"content",ref:p},[t.value?(b(),f("div",{key:0,class:B(n(y))},[_(E.$slots,"default")],2)):I("",!0)],512))}}),j="flex items-center p-5 w-full font-medium text-left text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800",R="w-6 h-6 shrink-0";function U(r){const t=c(()=>r.value.parentElement.parentElement.dataset.accordionId),p=c(()=>r.value.parentElement.dataset.panelId),{accordionsStates:y}=A(),E=c(()=>y[t.value]),e=c(()=>E.value.panels[p.value]),i=c(()=>Object.keys(e.value).length),h=c(()=>e.value.order!==i.value-1),F=c(()=>h.value||E.value.flush&&e.value.order===i.value-1&&!e.value.isVisible),C=c(()=>S(j,e.value.isVisible&&"bg-gray-100 dark:bg-gray-800",e.value.order===0&&!E.value.flush&&"rounded-t-xl",e.value.order===0&&E.value.flush&&"border-t-0",F.value&&"border-b-0",E.value.flush&&"border-x-0")),D=c(()=>S(R,e.value.isVisible&&"rotate-180"));return{headerClasses:C,arrowClasses:D}}const L={class:"w-full"},M=s("path",{"fill-rule":"evenodd",d:"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"},null,-1),J=[M],g=q({__name:"FwbAccordionHeader",setup(r){const t=v(!1),p=v(),y=c(()=>p.value.parentElement.parentElement.dataset.accordionId),E=c(()=>p.value.parentElement.dataset.panelId),{accordionsStates:e}=A(),i=c(()=>e[y.value]),h=c(()=>i.value.panels[E.value]);let F,C;function D(){const w=h.value.isVisible;for(const $ in i.value.panels){const k=i.value.panels[$];k.id!==E.value?k.isVisible=!1:k.isVisible=!w}}function V(){h.value.isVisible=!h.value.isVisible}function z(){if(i.value.alwaysOpen)return V();D()}return T(()=>{const w=U(p);F=w.headerClasses,C=w.arrowClasses,t.value=!0}),(w,$)=>(b(),f("div",{ref_key:"header",ref:p},[t.value?(b(),f("button",{key:0,type:"button",class:B(n(F)),onClick:z},[s("span",L,[_(w.$slots,"default")]),(b(),f("svg",{"data-accordion-icon":"",class:B(n(C)),fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},J,2))],2)):I("",!0)],512))}}),Q=["data-panel-id"],u=q({__name:"FwbAccordionPanel",setup(r){const{accordionsStates:t}=A(),p=P(),y=v(),E=c(()=>y.value?y.value.parentElement.dataset.accordionId:null),e=c(()=>t[E.value]);return T(()=>{var h,F;const i=(F=Object.keys((h=e==null?void 0:e.value)==null?void 0:h.panels))==null?void 0:F.length;e.value.panels[p]={id:p,order:i,isVisible:(e.value.openFirstItem&&i===0)??!1}}),(i,h)=>(b(),f("div",{ref_key:"panel",ref:y,"data-panel-id":n(p)},[E.value?_(i.$slots,"default",{key:0}):I("",!0)],8,Q))}}),Y={class:"vp-raw"},G=s("div",null,[s("p",{class:"mb-2 text-gray-500 dark:text-gray-400"}," Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out this guide to learn how to "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"/docs/getting-started/introduction/"},"get started"),o(" and start developing websites even faster with components on top of Tailwind CSS. ")])],-1),K=s("div",null,[s("p",{class:"mb-2 text-gray-500 dark:text-gray-400"}," Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out the "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"https://flowbite.com/figma/"},"Figma design system"),o(" based on the utility classes from Tailwind CSS and components from Flowbite. ")])],-1),W=s("div",null,[s("p",{class:"mb-2 text-gray-500 dark:text-gray-400"}," Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out the "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"https://flowbite.com/figma/"},"Figma design system"),o(" based on the utility classes from Tailwind CSS and components from Flowbite. ")])],-1),X={__name:"FwbAccordionExample",setup(r){return(t,p)=>(b(),f("div",Y,[a(n(x),null,{default:l(()=>[a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("header")]),_:1}),a(n(d),null,{default:l(()=>[G]),_:1})]),_:1}),a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("another header")]),_:1}),a(n(d),null,{default:l(()=>[K]),_:1})]),_:1}),a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("and one more header")]),_:1}),a(n(d),null,{default:l(()=>[W]),_:1})]),_:1})]),_:1})]))}},Z={class:"vp-raw"},ss=s("div",null,[s("p",{class:"mb-2 text-gray-500 dark:text-gray-400"}," Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out this guide to learn how to "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"/docs/getting-started/introduction/"},"get started"),o(" and start developing websites even faster with components on top of Tailwind CSS. ")])],-1),ns=s("div",null,[s("p",{class:"mb-2 text-gray-500 dark:text-gray-400"}," Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out the "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"https://flowbite.com/figma/"},"Figma design system"),o(" based on the utility classes from Tailwind CSS and components from Flowbite. ")])],-1),as=s("div",null,[s("p",{class:"mb-2 text-gray-500 dark:text-gray-400"}," Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out the "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"https://flowbite.com/figma/"},"Figma design system"),o(" based on the utility classes from Tailwind CSS and components from Flowbite. ")])],-1),ls={__name:"FwbAccordionExampleAlwaysOpen",setup(r){return(t,p)=>(b(),f("div",Z,[a(n(x),{"always-open":""},{default:l(()=>[a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("header")]),_:1}),a(n(d),null,{default:l(()=>[ss]),_:1})]),_:1}),a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("another header")]),_:1}),a(n(d),null,{default:l(()=>[ns]),_:1})]),_:1}),a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("and one more header")]),_:1}),a(n(d),null,{default:l(()=>[as]),_:1})]),_:1})]),_:1})]))}},os={class:"vp-raw"},ps=s("div",null,[s("p",{class:"mb-2 text-gray-500 dark:text-gray-400"}," Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out this guide to learn how to "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"/docs/getting-started/introduction/"},"get started"),o(" and start developing websites even faster with components on top of Tailwind CSS. ")])],-1),ts=s("div",null,[s("p",{class:"mb-2 text-gray-500 dark:text-gray-400"}," Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out the "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"https://flowbite.com/figma/"},"Figma design system"),o(" based on the utility classes from Tailwind CSS and components from Flowbite. ")])],-1),es=s("div",null,[s("p",{class:"mb-2 text-gray-500 dark:text-gray-400"}," Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out the "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"https://flowbite.com/figma/"},"Figma design system"),o(" based on the utility classes from Tailwind CSS and components from Flowbite. ")])],-1),cs={__name:"FwbAccordionExampleFlush",setup(r){return(t,p)=>(b(),f("div",os,[a(n(x),{flush:""},{default:l(()=>[a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("header")]),_:1}),a(n(d),null,{default:l(()=>[ps]),_:1})]),_:1}),a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("another header")]),_:1}),a(n(d),null,{default:l(()=>[ts]),_:1})]),_:1}),a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("and one more header")]),_:1}),a(n(d),null,{default:l(()=>[es]),_:1})]),_:1})]),_:1})]))}},rs={class:"vp-raw"},Es=s("div",null,[s("p",{class:"mb-2 text-gray-500 dark:text-gray-400"}," Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out this guide to learn how to "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"/docs/getting-started/introduction/"},"get started"),o(" and start developing websites even faster with components on top of Tailwind CSS. ")])],-1),ys=s("div",null,[s("p",{class:"mb-2 text-gray-500 dark:text-gray-400"}," Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out the "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"https://flowbite.com/figma/"},"Figma design system"),o(" based on the utility classes from Tailwind CSS and components from Flowbite. ")])],-1),is=s("div",null,[s("p",{class:"mb-2 text-gray-500 dark:text-gray-400"}," Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out the "),s("a",{class:"text-blue-600 dark:text-blue-500 hover:underline",href:"https://flowbite.com/figma/"},"Figma design system"),o(" based on the utility classes from Tailwind CSS and components from Flowbite. ")])],-1),ds={__name:"FwbAccordionExampleStyledHeaders",setup(r){return(t,p)=>(b(),f("div",rs,[a(n(x),null,{default:l(()=>[a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("header")]),_:1}),a(n(d),null,{default:l(()=>[Es]),_:1})]),_:1}),a(n(u),null,{default:l(()=>[a(n(g),{class:"bg-pink-200 dark:bg-pink-900 dark:text-gray-50"},{default:l(()=>[o(" another header ")]),_:1}),a(n(d),null,{default:l(()=>[ys]),_:1})]),_:1}),a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("and one more header")]),_:1}),a(n(d),null,{default:l(()=>[is]),_:1})]),_:1})]),_:1})]))}},gs={class:"vp-raw"},us=s("div",null,[s("p",{class:"mb-2 text-gray-500 dark:text-gray-400"}," Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out this guide to learn how to "),s("a",{href:"/docs/getting-started/introduction/",class:"text-blue-600 dark:text-blue-500 hover:underline"},"get started"),o(" and start developing websites even faster with components on top of Tailwind CSS. ")])],-1),bs=s("div",null,[s("p",{class:"mb-2 text-gray-500 dark:text-gray-400"}," Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out the "),s("a",{href:"https://flowbite.com/figma/",class:"text-blue-600 dark:text-blue-500 hover:underline"},"Figma design system"),o(" based on the utility classes from Tailwind CSS and components from Flowbite. ")])],-1),fs=s("div",null,[s("p",{class:"mb-2 text-gray-500 dark:text-gray-400"}," Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file. "),s("p",{class:"text-gray-500 dark:text-gray-400"},[o(" Check out the "),s("a",{href:"https://flowbite.com/figma/",class:"text-blue-600 dark:text-blue-500 hover:underline"},"Figma design system"),o(" based on the utility classes from Tailwind CSS and components from Flowbite. ")])],-1),hs={__name:"FwbAccordionExampleFirstItemClosed",setup(r){return(t,p)=>(b(),f("div",gs,[a(n(x),{"open-first-item":!1},{default:l(()=>[a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("header")]),_:1}),a(n(d),null,{default:l(()=>[us]),_:1})]),_:1}),a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("another header")]),_:1}),a(n(d),null,{default:l(()=>[bs]),_:1})]),_:1}),a(n(u),null,{default:l(()=>[a(n(g),null,{default:l(()=>[o("and one more header")]),_:1}),a(n(d),null,{default:l(()=>[fs]),_:1})]),_:1})]),_:1})]))}},Fs=m('<h1 id="vue-accordion-flowbite" tabindex="-1">Vue Accordion - Flowbite <a class="header-anchor" href="#vue-accordion-flowbite" aria-label="Permalink to &quot;Vue Accordion - Flowbite&quot;">​</a></h1><h4 id="use-tailwind-css-accordion-component-to-show-expanding-content" tabindex="-1">Use Tailwind CSS accordion component to show expanding content <a class="header-anchor" href="#use-tailwind-css-accordion-component-to-show-expanding-content" aria-label="Permalink to &quot;Use Tailwind CSS accordion component to show expanding content&quot;">​</a></h4><hr><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>Original reference: <a href="https://flowbite.com/docs/components/accordion/" target="_blank" rel="noreferrer">https://flowbite.com/docs/components/accordion/</a></p></div><h2 id="default-accordion" tabindex="-1">Default accordion <a class="header-anchor" href="#default-accordion" aria-label="Permalink to &quot;Default accordion&quot;">​</a></h2><p>Use this example to basic accordion.</p>',6),ws=m(`<div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion-panel</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion-header</span><span style="color:#E1E4E8;">&gt;header&lt;/</span><span style="color:#85E89D;">fwb-accordion-header</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion-content</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;mb-2 text-gray-500 dark:text-gray-400&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;text-gray-500 dark:text-gray-400&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Check out this guide to learn how to &lt;</span><span style="color:#85E89D;">a</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">href</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/docs/getting-started/introduction/&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;text-blue-600 dark:text-blue-500 hover:underline&quot;</span><span style="color:#E1E4E8;">&gt;get started&lt;/</span><span style="color:#85E89D;">a</span><span style="color:#E1E4E8;">&gt; and start developing websites even faster with components on top of Tailwind CSS.</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-accordion-content</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-accordion-panel</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion-panel</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion-header</span><span style="color:#E1E4E8;">&gt;another header&lt;/</span><span style="color:#85E89D;">fwb-accordion-header</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion-content</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;mb-2 text-gray-500 dark:text-gray-400&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;text-gray-500 dark:text-gray-400&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Check out the &lt;</span><span style="color:#85E89D;">a</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">href</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;https://flowbite.com/figma/&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;text-blue-600 dark:text-blue-500 hover:underline&quot;</span><span style="color:#E1E4E8;"> &gt;Figma design system&lt;/</span><span style="color:#85E89D;">a</span><span style="color:#E1E4E8;">&gt; based on the utility classes from Tailwind CSS and components from Flowbite.</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-accordion-content</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-accordion-panel</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion-panel</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion-header</span><span style="color:#E1E4E8;">&gt;and one more header&lt;/</span><span style="color:#85E89D;">fwb-accordion-header</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion-content</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;mb-2 text-gray-500 dark:text-gray-400&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;text-gray-500 dark:text-gray-400&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Check out the &lt;</span><span style="color:#85E89D;">a</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">href</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;https://flowbite.com/figma/&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;text-blue-600 dark:text-blue-500 hover:underline&quot;</span><span style="color:#E1E4E8;">&gt;Figma design system&lt;/</span><span style="color:#85E89D;">a</span><span style="color:#E1E4E8;">&gt; based on the utility classes from Tailwind CSS and components from Flowbite.</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-accordion-content</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-accordion-panel</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-accordion</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbAccordion,</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbAccordionContent,</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbAccordionHeader,</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbAccordionPanel,</span></span>
<span class="line"><span style="color:#E1E4E8;">} </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion-panel</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion-header</span><span style="color:#24292E;">&gt;header&lt;/</span><span style="color:#22863A;">fwb-accordion-header</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion-content</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">p</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;mb-2 text-gray-500 dark:text-gray-400&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">p</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;text-gray-500 dark:text-gray-400&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Check out this guide to learn how to &lt;</span><span style="color:#22863A;">a</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">href</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;/docs/getting-started/introduction/&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;text-blue-600 dark:text-blue-500 hover:underline&quot;</span><span style="color:#24292E;">&gt;get started&lt;/</span><span style="color:#22863A;">a</span><span style="color:#24292E;">&gt; and start developing websites even faster with components on top of Tailwind CSS.</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-accordion-content</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-accordion-panel</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion-panel</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion-header</span><span style="color:#24292E;">&gt;another header&lt;/</span><span style="color:#22863A;">fwb-accordion-header</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion-content</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">p</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;mb-2 text-gray-500 dark:text-gray-400&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">p</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;text-gray-500 dark:text-gray-400&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Check out the &lt;</span><span style="color:#22863A;">a</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">href</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;https://flowbite.com/figma/&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;text-blue-600 dark:text-blue-500 hover:underline&quot;</span><span style="color:#24292E;"> &gt;Figma design system&lt;/</span><span style="color:#22863A;">a</span><span style="color:#24292E;">&gt; based on the utility classes from Tailwind CSS and components from Flowbite.</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-accordion-content</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-accordion-panel</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion-panel</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion-header</span><span style="color:#24292E;">&gt;and one more header&lt;/</span><span style="color:#22863A;">fwb-accordion-header</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion-content</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">p</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;mb-2 text-gray-500 dark:text-gray-400&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">p</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;text-gray-500 dark:text-gray-400&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Check out the &lt;</span><span style="color:#22863A;">a</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">href</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;https://flowbite.com/figma/&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;text-blue-600 dark:text-blue-500 hover:underline&quot;</span><span style="color:#24292E;">&gt;Figma design system&lt;/</span><span style="color:#22863A;">a</span><span style="color:#24292E;">&gt; based on the utility classes from Tailwind CSS and components from Flowbite.</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-accordion-content</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-accordion-panel</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-accordion</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;"> FwbAccordion,</span></span>
<span class="line"><span style="color:#24292E;"> FwbAccordionContent,</span></span>
<span class="line"><span style="color:#24292E;"> FwbAccordionHeader,</span></span>
<span class="line"><span style="color:#24292E;"> FwbAccordionPanel,</span></span>
<span class="line"><span style="color:#24292E;">} </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><h2 id="always-open-accordion" tabindex="-1">Always open accordion <a class="header-anchor" href="#always-open-accordion" aria-label="Permalink to &quot;Always open accordion&quot;">​</a></h2><p>Always open prop to makes accordion able to open multiple elements.</p>`,3),ms=m(`<div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">always-open</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion-panel</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion-header</span><span style="color:#E1E4E8;">&gt;header&lt;/</span><span style="color:#85E89D;">fwb-accordion-header</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion-content</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;mb-2 text-gray-500 dark:text-gray-400&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;text-gray-500 dark:text-gray-400&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Check out this guide to learn how to &lt;</span><span style="color:#85E89D;">a</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;text-blue-600 dark:text-blue-500 hover:underline&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">href</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/docs/getting-started/introduction/&quot;</span><span style="color:#E1E4E8;">&gt;get started&lt;/</span><span style="color:#85E89D;">a</span><span style="color:#E1E4E8;">&gt; and start developing websites even faster with components on top of Tailwind CSS.</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-accordion-content</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-accordion-panel</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion-panel</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion-header</span><span style="color:#E1E4E8;">&gt;another header&lt;/</span><span style="color:#85E89D;">fwb-accordion-header</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion-content</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;mb-2 text-gray-500 dark:text-gray-400&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;text-gray-500 dark:text-gray-400&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Check out the &lt;</span><span style="color:#85E89D;">a</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;text-blue-600 dark:text-blue-500 hover:underline&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">href</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;https://flowbite.com/figma/&quot;</span><span style="color:#E1E4E8;">&gt;Figma design system&lt;/</span><span style="color:#85E89D;">a</span><span style="color:#E1E4E8;">&gt; based on the utility classes from Tailwind CSS and components from Flowbite.</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-accordion-content</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-accordion-panel</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion-panel</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion-header</span><span style="color:#E1E4E8;">&gt;and one more header&lt;/</span><span style="color:#85E89D;">fwb-accordion-header</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion-content</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;mb-2 text-gray-500 dark:text-gray-400&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;text-gray-500 dark:text-gray-400&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Check out the &lt;</span><span style="color:#85E89D;">a</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;text-blue-600 dark:text-blue-500 hover:underline&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">href</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;https://flowbite.com/figma/&quot;</span><span style="color:#E1E4E8;">&gt;Figma design system&lt;/</span><span style="color:#85E89D;">a</span><span style="color:#E1E4E8;">&gt; based on the utility classes from Tailwind CSS and components from Flowbite.</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-accordion-content</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-accordion-panel</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-accordion</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbAccordion,</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbAccordionContent,</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbAccordionHeader,</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbAccordionPanel,</span></span>
<span class="line"><span style="color:#E1E4E8;">} </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">always-open</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion-panel</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion-header</span><span style="color:#24292E;">&gt;header&lt;/</span><span style="color:#22863A;">fwb-accordion-header</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion-content</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">p</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;mb-2 text-gray-500 dark:text-gray-400&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">p</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;text-gray-500 dark:text-gray-400&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Check out this guide to learn how to &lt;</span><span style="color:#22863A;">a</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;text-blue-600 dark:text-blue-500 hover:underline&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">href</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;/docs/getting-started/introduction/&quot;</span><span style="color:#24292E;">&gt;get started&lt;/</span><span style="color:#22863A;">a</span><span style="color:#24292E;">&gt; and start developing websites even faster with components on top of Tailwind CSS.</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-accordion-content</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-accordion-panel</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion-panel</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion-header</span><span style="color:#24292E;">&gt;another header&lt;/</span><span style="color:#22863A;">fwb-accordion-header</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion-content</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">p</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;mb-2 text-gray-500 dark:text-gray-400&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">p</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;text-gray-500 dark:text-gray-400&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Check out the &lt;</span><span style="color:#22863A;">a</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;text-blue-600 dark:text-blue-500 hover:underline&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">href</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;https://flowbite.com/figma/&quot;</span><span style="color:#24292E;">&gt;Figma design system&lt;/</span><span style="color:#22863A;">a</span><span style="color:#24292E;">&gt; based on the utility classes from Tailwind CSS and components from Flowbite.</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-accordion-content</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-accordion-panel</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion-panel</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion-header</span><span style="color:#24292E;">&gt;and one more header&lt;/</span><span style="color:#22863A;">fwb-accordion-header</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion-content</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">p</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;mb-2 text-gray-500 dark:text-gray-400&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">p</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;text-gray-500 dark:text-gray-400&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Check out the &lt;</span><span style="color:#22863A;">a</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;text-blue-600 dark:text-blue-500 hover:underline&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">href</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;https://flowbite.com/figma/&quot;</span><span style="color:#24292E;">&gt;Figma design system&lt;/</span><span style="color:#22863A;">a</span><span style="color:#24292E;">&gt; based on the utility classes from Tailwind CSS and components from Flowbite.</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-accordion-content</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-accordion-panel</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-accordion</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;"> FwbAccordion,</span></span>
<span class="line"><span style="color:#24292E;"> FwbAccordionContent,</span></span>
<span class="line"><span style="color:#24292E;"> FwbAccordionHeader,</span></span>
<span class="line"><span style="color:#24292E;"> FwbAccordionPanel,</span></span>
<span class="line"><span style="color:#24292E;">} </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><h2 id="flush-accordion" tabindex="-1">Flush accordion <a class="header-anchor" href="#flush-accordion" aria-label="Permalink to &quot;Flush accordion&quot;">​</a></h2><p>Flush prop removes side borders, and rounded corners</p>`,3),vs=m(`<div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">flush</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion-panel</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion-header</span><span style="color:#E1E4E8;">&gt;header&lt;/</span><span style="color:#85E89D;">fwb-accordion-header</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion-content</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;mb-2 text-gray-500 dark:text-gray-400&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;text-gray-500 dark:text-gray-400&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Check out this guide to learn how to &lt;</span><span style="color:#85E89D;">a</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;text-blue-600 dark:text-blue-500 hover:underline&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">href</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/docs/getting-started/introduction/&quot;</span><span style="color:#E1E4E8;">&gt;get started&lt;/</span><span style="color:#85E89D;">a</span><span style="color:#E1E4E8;">&gt; and start developing websites even faster with components on top of Tailwind CSS.</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-accordion-content</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-accordion-panel</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion-panel</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion-header</span><span style="color:#E1E4E8;">&gt;another header&lt;/</span><span style="color:#85E89D;">fwb-accordion-header</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion-content</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;mb-2 text-gray-500 dark:text-gray-400&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;text-gray-500 dark:text-gray-400&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Check out the &lt;</span><span style="color:#85E89D;">a</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;text-blue-600 dark:text-blue-500 hover:underline&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">href</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;https://flowbite.com/figma/&quot;</span><span style="color:#E1E4E8;">&gt;Figma design system&lt;/</span><span style="color:#85E89D;">a</span><span style="color:#E1E4E8;">&gt; based on the utility classes from Tailwind CSS and components from Flowbite.</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-accordion-content</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-accordion-panel</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion-panel</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion-header</span><span style="color:#E1E4E8;">&gt;and one more header&lt;/</span><span style="color:#85E89D;">fwb-accordion-header</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion-content</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;mb-2 text-gray-500 dark:text-gray-400&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;text-gray-500 dark:text-gray-400&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Check out the &lt;</span><span style="color:#85E89D;">a</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;text-blue-600 dark:text-blue-500 hover:underline&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">href</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;https://flowbite.com/figma/&quot;</span><span style="color:#E1E4E8;">&gt;Figma design system&lt;/</span><span style="color:#85E89D;">a</span><span style="color:#E1E4E8;">&gt; based on the utility classes from Tailwind CSS and components from Flowbite.</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-accordion-content</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-accordion-panel</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-accordion</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbAccordion,</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbAccordionContent,</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbAccordionHeader,</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbAccordionPanel,</span></span>
<span class="line"><span style="color:#E1E4E8;">} </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">flush</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion-panel</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion-header</span><span style="color:#24292E;">&gt;header&lt;/</span><span style="color:#22863A;">fwb-accordion-header</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion-content</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">p</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;mb-2 text-gray-500 dark:text-gray-400&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">p</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;text-gray-500 dark:text-gray-400&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Check out this guide to learn how to &lt;</span><span style="color:#22863A;">a</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;text-blue-600 dark:text-blue-500 hover:underline&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">href</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;/docs/getting-started/introduction/&quot;</span><span style="color:#24292E;">&gt;get started&lt;/</span><span style="color:#22863A;">a</span><span style="color:#24292E;">&gt; and start developing websites even faster with components on top of Tailwind CSS.</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-accordion-content</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-accordion-panel</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion-panel</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion-header</span><span style="color:#24292E;">&gt;another header&lt;/</span><span style="color:#22863A;">fwb-accordion-header</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion-content</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">p</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;mb-2 text-gray-500 dark:text-gray-400&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">p</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;text-gray-500 dark:text-gray-400&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Check out the &lt;</span><span style="color:#22863A;">a</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;text-blue-600 dark:text-blue-500 hover:underline&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">href</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;https://flowbite.com/figma/&quot;</span><span style="color:#24292E;">&gt;Figma design system&lt;/</span><span style="color:#22863A;">a</span><span style="color:#24292E;">&gt; based on the utility classes from Tailwind CSS and components from Flowbite.</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-accordion-content</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-accordion-panel</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion-panel</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion-header</span><span style="color:#24292E;">&gt;and one more header&lt;/</span><span style="color:#22863A;">fwb-accordion-header</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion-content</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">p</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;mb-2 text-gray-500 dark:text-gray-400&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">p</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;text-gray-500 dark:text-gray-400&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Check out the &lt;</span><span style="color:#22863A;">a</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;text-blue-600 dark:text-blue-500 hover:underline&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">href</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;https://flowbite.com/figma/&quot;</span><span style="color:#24292E;">&gt;Figma design system&lt;/</span><span style="color:#22863A;">a</span><span style="color:#24292E;">&gt; based on the utility classes from Tailwind CSS and components from Flowbite.</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-accordion-content</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-accordion-panel</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-accordion</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;"> FwbAccordion,</span></span>
<span class="line"><span style="color:#24292E;"> FwbAccordionContent,</span></span>
<span class="line"><span style="color:#24292E;"> FwbAccordionHeader,</span></span>
<span class="line"><span style="color:#24292E;"> FwbAccordionPanel,</span></span>
<span class="line"><span style="color:#24292E;">} </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><h2 id="styling-accordion" tabindex="-1">Styling accordion <a class="header-anchor" href="#styling-accordion" aria-label="Permalink to &quot;Styling accordion&quot;">​</a></h2><p>You can style accordion content and headers by passing tailwind classes into them.</p>`,3),As=m(`<div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion-panel</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion-header</span><span style="color:#E1E4E8;">&gt;header&lt;/</span><span style="color:#85E89D;">fwb-accordion-header</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion-content</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;mb-2 text-gray-500 dark:text-gray-400&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;text-gray-500 dark:text-gray-400&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Check out this guide to learn how to &lt;</span><span style="color:#85E89D;">a</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;text-blue-600 dark:text-blue-500 hover:underline&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">href</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/docs/getting-started/introduction/&quot;</span><span style="color:#E1E4E8;">&gt;get started&lt;/</span><span style="color:#85E89D;">a</span><span style="color:#E1E4E8;">&gt; and start developing websites even faster with components on top of Tailwind CSS.</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-accordion-content</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-accordion-panel</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion-panel</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion-header</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;bg-pink-200 dark:bg-pink-900 dark:text-gray-50&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> another header</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-accordion-header</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion-content</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;mb-2 text-gray-500 dark:text-gray-400&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;text-gray-500 dark:text-gray-400&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Check out the &lt;</span><span style="color:#85E89D;">a</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;text-blue-600 dark:text-blue-500 hover:underline&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">href</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;https://flowbite.com/figma/&quot;</span><span style="color:#E1E4E8;">&gt;Figma design system&lt;/</span><span style="color:#85E89D;">a</span><span style="color:#E1E4E8;">&gt; based on the utility classes from Tailwind CSS and components from Flowbite.</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-accordion-content</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-accordion-panel</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion-panel</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion-header</span><span style="color:#E1E4E8;">&gt;and one more header&lt;/</span><span style="color:#85E89D;">fwb-accordion-header</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion-content</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;mb-2 text-gray-500 dark:text-gray-400&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;text-gray-500 dark:text-gray-400&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Check out the &lt;</span><span style="color:#85E89D;">a</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;text-blue-600 dark:text-blue-500 hover:underline&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">href</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;https://flowbite.com/figma/&quot;</span><span style="color:#E1E4E8;">&gt;Figma design system&lt;/</span><span style="color:#85E89D;">a</span><span style="color:#E1E4E8;">&gt; based on the utility classes from Tailwind CSS and components from Flowbite.</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-accordion-content</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-accordion-panel</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-accordion</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbAccordion,</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbAccordionContent,</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbAccordionHeader,</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbAccordionPanel,</span></span>
<span class="line"><span style="color:#E1E4E8;">} </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion-panel</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion-header</span><span style="color:#24292E;">&gt;header&lt;/</span><span style="color:#22863A;">fwb-accordion-header</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion-content</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">p</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;mb-2 text-gray-500 dark:text-gray-400&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">p</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;text-gray-500 dark:text-gray-400&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Check out this guide to learn how to &lt;</span><span style="color:#22863A;">a</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;text-blue-600 dark:text-blue-500 hover:underline&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">href</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;/docs/getting-started/introduction/&quot;</span><span style="color:#24292E;">&gt;get started&lt;/</span><span style="color:#22863A;">a</span><span style="color:#24292E;">&gt; and start developing websites even faster with components on top of Tailwind CSS.</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-accordion-content</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-accordion-panel</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion-panel</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion-header</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;bg-pink-200 dark:bg-pink-900 dark:text-gray-50&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> another header</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-accordion-header</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion-content</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">p</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;mb-2 text-gray-500 dark:text-gray-400&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">p</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;text-gray-500 dark:text-gray-400&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Check out the &lt;</span><span style="color:#22863A;">a</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;text-blue-600 dark:text-blue-500 hover:underline&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">href</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;https://flowbite.com/figma/&quot;</span><span style="color:#24292E;">&gt;Figma design system&lt;/</span><span style="color:#22863A;">a</span><span style="color:#24292E;">&gt; based on the utility classes from Tailwind CSS and components from Flowbite.</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-accordion-content</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-accordion-panel</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion-panel</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion-header</span><span style="color:#24292E;">&gt;and one more header&lt;/</span><span style="color:#22863A;">fwb-accordion-header</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion-content</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">p</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;mb-2 text-gray-500 dark:text-gray-400&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">p</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;text-gray-500 dark:text-gray-400&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Check out the &lt;</span><span style="color:#22863A;">a</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;text-blue-600 dark:text-blue-500 hover:underline&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">href</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;https://flowbite.com/figma/&quot;</span><span style="color:#24292E;">&gt;Figma design system&lt;/</span><span style="color:#22863A;">a</span><span style="color:#24292E;">&gt; based on the utility classes from Tailwind CSS and components from Flowbite.</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-accordion-content</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-accordion-panel</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-accordion</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;"> FwbAccordion,</span></span>
<span class="line"><span style="color:#24292E;"> FwbAccordionContent,</span></span>
<span class="line"><span style="color:#24292E;"> FwbAccordionHeader,</span></span>
<span class="line"><span style="color:#24292E;"> FwbAccordionPanel,</span></span>
<span class="line"><span style="color:#24292E;">} </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><h2 id="closed-first-item" tabindex="-1">Closed first item <a class="header-anchor" href="#closed-first-item" aria-label="Permalink to &quot;Closed first item&quot;">​</a></h2>`,2),xs=m(`<div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:open-first-item</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;false&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion-panel</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion-header</span><span style="color:#E1E4E8;">&gt;header&lt;/</span><span style="color:#85E89D;">fwb-accordion-header</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion-content</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;mb-2 text-gray-500 dark:text-gray-400&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;text-gray-500 dark:text-gray-400&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Check out this guide to learn how to &lt;</span><span style="color:#85E89D;">a</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">href</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/docs/getting-started/introduction/&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;text-blue-600 dark:text-blue-500 hover:underline&quot;</span><span style="color:#E1E4E8;">&gt;get started&lt;/</span><span style="color:#85E89D;">a</span><span style="color:#E1E4E8;">&gt; and start developing websites even faster with components on top of Tailwind CSS.</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-accordion-content</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-accordion-panel</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion-panel</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion-header</span><span style="color:#E1E4E8;">&gt;another header&lt;/</span><span style="color:#85E89D;">fwb-accordion-header</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion-content</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;mb-2 text-gray-500 dark:text-gray-400&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;text-gray-500 dark:text-gray-400&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Check out the &lt;</span><span style="color:#85E89D;">a</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">href</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;https://flowbite.com/figma/&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;text-blue-600 dark:text-blue-500 hover:underline&quot;</span><span style="color:#E1E4E8;">&gt;Figma design system&lt;/</span><span style="color:#85E89D;">a</span><span style="color:#E1E4E8;">&gt; based on the utility classes from Tailwind CSS and components from Flowbite.</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-accordion-content</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-accordion-panel</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion-panel</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion-header</span><span style="color:#E1E4E8;">&gt;and one more header&lt;/</span><span style="color:#85E89D;">fwb-accordion-header</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-accordion-content</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;mb-2 text-gray-500 dark:text-gray-400&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;text-gray-500 dark:text-gray-400&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Check out the &lt;</span><span style="color:#85E89D;">a</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">href</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;https://flowbite.com/figma/&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;text-blue-600 dark:text-blue-500 hover:underline&quot;</span><span style="color:#E1E4E8;">&gt;Figma design system&lt;/</span><span style="color:#85E89D;">a</span><span style="color:#E1E4E8;">&gt; based on the utility classes from Tailwind CSS and components from Flowbite.</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-accordion-content</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-accordion-panel</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-accordion</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbAccordion,</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbAccordionContent,</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbAccordionHeader,</span></span>
<span class="line"><span style="color:#E1E4E8;"> FwbAccordionPanel,</span></span>
<span class="line"><span style="color:#E1E4E8;">} </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:open-first-item</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;false&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion-panel</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion-header</span><span style="color:#24292E;">&gt;header&lt;/</span><span style="color:#22863A;">fwb-accordion-header</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion-content</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">p</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;mb-2 text-gray-500 dark:text-gray-400&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">p</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;text-gray-500 dark:text-gray-400&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Check out this guide to learn how to &lt;</span><span style="color:#22863A;">a</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">href</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;/docs/getting-started/introduction/&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;text-blue-600 dark:text-blue-500 hover:underline&quot;</span><span style="color:#24292E;">&gt;get started&lt;/</span><span style="color:#22863A;">a</span><span style="color:#24292E;">&gt; and start developing websites even faster with components on top of Tailwind CSS.</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-accordion-content</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-accordion-panel</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion-panel</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion-header</span><span style="color:#24292E;">&gt;another header&lt;/</span><span style="color:#22863A;">fwb-accordion-header</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion-content</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">p</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;mb-2 text-gray-500 dark:text-gray-400&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">p</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;text-gray-500 dark:text-gray-400&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Check out the &lt;</span><span style="color:#22863A;">a</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">href</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;https://flowbite.com/figma/&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;text-blue-600 dark:text-blue-500 hover:underline&quot;</span><span style="color:#24292E;">&gt;Figma design system&lt;/</span><span style="color:#22863A;">a</span><span style="color:#24292E;">&gt; based on the utility classes from Tailwind CSS and components from Flowbite.</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-accordion-content</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-accordion-panel</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion-panel</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion-header</span><span style="color:#24292E;">&gt;and one more header&lt;/</span><span style="color:#22863A;">fwb-accordion-header</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-accordion-content</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">p</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;mb-2 text-gray-500 dark:text-gray-400&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">p</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;text-gray-500 dark:text-gray-400&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Check out the &lt;</span><span style="color:#22863A;">a</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">href</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;https://flowbite.com/figma/&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;text-blue-600 dark:text-blue-500 hover:underline&quot;</span><span style="color:#24292E;">&gt;Figma design system&lt;/</span><span style="color:#22863A;">a</span><span style="color:#24292E;">&gt; based on the utility classes from Tailwind CSS and components from Flowbite.</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-accordion-content</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-accordion-panel</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-accordion</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;"> FwbAccordion,</span></span>
<span class="line"><span style="color:#24292E;"> FwbAccordionContent,</span></span>
<span class="line"><span style="color:#24292E;"> FwbAccordionHeader,</span></span>
<span class="line"><span style="color:#24292E;"> FwbAccordionPanel,</span></span>
<span class="line"><span style="color:#24292E;">} </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,1),Ds=JSON.parse('{"title":"Vue Accordion - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/accordion.md","filePath":"components/accordion.md"}'),Cs={name:"components/accordion.md"},ks=Object.assign(Cs,{setup(r){return(t,p)=>(b(),f("div",null,[Fs,a(X),ws,a(ls),ms,a(cs),vs,a(ds),As,a(hs),xs]))}});export{Ds as __pageData,ks as default};
Reference in New Issue View Git Blame Copy Permalink