Accordion

Вертикально расположенные сворачиваемые секции — одновременно можно открыть одну (или несколько).

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

Установите type="multiple", чтобы разрешить одновременно открывать несколько секций. Значение model становится 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

Установите :collapsible="false", чтобы запретить закрытие последнего открытого элемента — одна секция всегда развёрнута.

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

Отдельные элементы можно отключить, оставив остальные интерактивными.

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

Встройте аккордеон в карточку для аккуратной секции FAQ.

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

Элементы аккордеона могут содержать любой контент — формы, списки, изображения или другие компоненты.

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[]	—	Активный элемент(ы) (v-model)
type	'single' | 'multiple'	'single'	Один или несколько открытых элементов
collapsible	boolean	true	Разрешить закрытие последнего элемента (режим single)
disabled	boolean	false	Отключить все элементы

AccordionItem Props

Prop	Type	Default	Description
value	string	(обязательно)	Уникальный идентификатор
disabled	boolean	false	Отключить этот элемент

Events

Event	Type	Description
update:modelValue	(string | string[])	Активный элемент(ы) изменился

Slots

Component	Slot	Description
VxAccordionItem	trigger	Метка триггера (текст или произвольный контент)
VxAccordionItem	default	Раскрываемое содержимое