Accordion

Vertically stacked set of collapsible sections — only one (or multiple) can be open at a time.

Yes. All components follow WAI-ARIA guidelines. Keyboard navigation, focus management, and screen reader support are built in.

Yes. Every component supports both light and dark themes using CSS custom properties. Toggle the .dark class on your root element.

Absolutely. All components use design tokens via CSS variables. Override --primary, --border, --radius, etc. to match your brand.

<script setup lang="ts">
import { ref } from 'vue'
import { VxAccordion, VxAccordionItem } from 'veloxui'

const value = ref('item-1')
</script>

<template>
  <VxAccordion v-model="value" type="single">
    <VxAccordionItem value="item-1">
      <template #trigger>Is VeloxUI accessible?</template>
      Yes. All components follow WAI-ARIA guidelines.
    </VxAccordionItem>
    <VxAccordionItem value="item-2">
      <template #trigger>Does it support dark mode?</template>
      Yes. Every component supports light and dark themes.
    </VxAccordionItem>
    <VxAccordionItem value="item-3">
      <template #trigger>Can I customize the styling?</template>
      Absolutely. Override CSS variables to match your brand.
    </VxAccordionItem>
  </VxAccordion>
</template>

Multiple

Set type="multiple" to allow multiple sections open at the same time. The model value becomes a string[].

Install VeloxUI with npm install veloxui, then import the plugin or individual components. Full TypeScript support included out of the box.

VeloxUI ships with 30+ components: Button, Input, Select, Transfer, Calendar, Accordion, Card, Avatar, Badge, Checkbox, Upload, Switch, Rating, Slider, and more.

Customize your theme by overriding CSS variables in :root. All colors, border radius, shadows, and spacing are token-based so changes propagate everywhere.

<script setup lang="ts">
import { ref } from 'vue'

const value = ref<string[]>(['item-1'])
</script>

<template>
  <VxAccordion v-model="value" type="multiple">
    <VxAccordionItem value="item-1">
      <template #trigger>Getting Started</template>
      Install VeloxUI with npm install veloxui...
    </VxAccordionItem>
    <VxAccordionItem value="item-2">
      <template #trigger>Component Library</template>
      VeloxUI ships with 30+ components...
    </VxAccordionItem>
    <VxAccordionItem value="item-3">
      <template #trigger>Theming</template>
      Customize your theme by overriding CSS variables...
    </VxAccordionItem>
  </VxAccordion>
</template>

Non-collapsible

Set :collapsible="false" to prevent closing the last open item — one section is always expanded.

Manage your account settings, email preferences, and profile information.

Update your password, enable two-factor authentication, and review login history.

Choose which email and push notifications you want to receive.

<script setup lang="ts">
import { VxAccordion, VxAccordionItem } from 'veloxui'
</script>

<template>
  <VxAccordion model-value="item-1" :collapsible="false">
    <VxAccordionItem value="item-1">
      <template #trigger>Account</template>
      Manage your account settings...
    </VxAccordionItem>
    <VxAccordionItem value="item-2">
      <template #trigger>Security</template>
      Update your password...
    </VxAccordionItem>
  </VxAccordion>
</template>

Disabled Item

Individual items can be disabled while others remain interactive.

Get started with basic features. Includes 1 project, 100MB storage, and community support.

Custom pricing for large teams. Contact sales for details.

Unlimited projects, 50GB storage, priority support, and advanced analytics. $19/month.

<template>
  <VxAccordion type="single">
    <VxAccordionItem value="free">
      <template #trigger>Free Plan</template>
      Basic features included.
    </VxAccordionItem>
    <VxAccordionItem value="enterprise" disabled>
      <template #trigger>Enterprise (Coming Soon)</template>
      Contact sales for details.
    </VxAccordionItem>
    <VxAccordionItem value="pro">
      <template #trigger>Pro Plan</template>
      Unlimited projects, $19/month.
    </VxAccordionItem>
  </VxAccordion>
</template>

With Card

Embed an accordion inside a card for a polished FAQ section.

Frequently Asked Questions

Everything you need to know about VeloxUI.

---

Run npm install veloxui in your Vue 3 project. Then import the plugin or use tree-shaking to import individual components.

Yes. VeloxUI is compatible with Nuxt 3. Import the plugin in your Nuxt plugin file and you're good to go.

No. VeloxUI works with both TypeScript and plain JavaScript. However, you get full type inference and autocompletion with TypeScript.

Yes. VeloxUI uses scoped CSS and design tokens, so it coexists with Tailwind without conflicts. You can also override component styles with Tailwind classes.

<script setup lang="ts">
import {
  VxCard, VxCardHeader, VxCardTitle, VxCardDescription, VxCardDivider,
  VxAccordion, VxAccordionItem
} from 'veloxui'
</script>

<template>
  <VxCard>
    <VxCardHeader>
      <VxCardTitle>Frequently Asked Questions</VxCardTitle>
      <VxCardDescription>Everything you need to know about VeloxUI.</VxCardDescription>
    </VxCardHeader>
    <VxCardDivider />
    <VxAccordion type="single" model-value="faq-1" style="border: none; border-radius: 0;">
      <VxAccordionItem value="faq-1">
        <template #trigger>How do I install VeloxUI?</template>
        Run npm install veloxui in your Vue 3 project.
      </VxAccordionItem>
      <VxAccordionItem value="faq-2">
        <template #trigger>Does it work with Nuxt?</template>
        Yes. VeloxUI is compatible with Nuxt 3.
      </VxAccordionItem>
    </VxAccordion>
  </VxCard>
</template>

Rich Content

Accordion items can contain any content — forms, lists, images, or other components.

1 project

100MB storage

Community support

Unlimited projects

50GB storage

Priority support

Advanced analytics

<script setup lang="ts">
import { ref } from 'vue'
import { VxAccordion, VxAccordionItem, VxAvatar } from 'veloxui'

const plan = ref('plan-1')
</script>

<template>
  <VxAccordion v-model="plan" type="single">
    <VxAccordionItem value="plan-1">
      <template #trigger>
        <div style="display: flex; align-items: center; gap: 10px; flex: 1;">
          <VxAvatar name="Free" size="sm" bg-color="#22c55e" />
          <div>
            <div style="font-weight: 600;">Free</div>
            <div style="font-size: 12px;">For personal projects</div>
          </div>
          <span style="margin-left: auto; font-weight: 700;">$0</span>
        </div>
      </template>
      <!-- feature list -->
    </VxAccordionItem>
  </VxAccordion>
</template>

Accordion Props

Prop	Type	Default	Description
modelValue	string | string[]	—	Active item(s) (v-model)
type	'single' | 'multiple'	'single'	One or many items open
collapsible	boolean	true	Allow closing last item (single mode)
disabled	boolean	false	Disable all items

AccordionItem Props

Prop	Type	Default	Description
value	string	(required)	Unique identifier
disabled	boolean	false	Disable this item

Events

Event	Type	Description
update:modelValue	(string | string[])	Active item(s) changed

Slots

Component	Slot	Description
VxAccordionItem	trigger	Trigger label (can be text or rich content)
VxAccordionItem	default	Expandable body content