Skip to content
Velkin LogoVelkin Logo
Velkin
VELKIN/UI

Modern UI components for product teams and their AI agents. Lit core, typed wrappers, live MCP.

sales@velkinui.com

Product

  • Docs
  • Components
  • Studio
  • Pricing

Resources

  • Quick start
  • Blog
  • Changelog
  • Roadmap
  • Status

Project

  • About
  • Contact
  • License
  • Privacy
  • Terms

© 2026 Velkin. MIT core · Pro licenses available.

VELKIN

Accordion Item

A collapsible accordion item component with a header trigger and body panel.

vu-accordion-item · @velkin/react/accordion-item

Copy page

Import

React
npm i @velkin/react

import { VuAccordionItem } from "@velkin/react/accordion-item";

Examples

API

Tables match the member selected under Import.

Props

PropTypeDefaultDescription
openbooleanfalseWhether the item is expanded. Default: `false`.
disabledbooleanfalsePrevents interaction. Default: `false`.

Events

EventDetailDescription
vu-open-changeVuAccordionItemOpenChangeDetailAfter open state changes.

Slots

SlotDescription
startLeading visual before the title group.
titlePrimary header content.
sub-titleSecondary header content.
expand-iconTrailing control while collapsed.
collapse-iconTrailing control while expanded.
bodyCollapsible body content.

CSS parts

PartDescription
itemItem root wrapper.
headerInteractive header trigger.
startLeading visual wrapper.
titlePrimary title wrapper.
sub-titleSecondary title wrapper.
iconExpand or collapse icon wrapper.
bodyCollapsible body container.

Methods

MethodDescription
expand- Expands and emits `vu-open-change` when state changes.
collapse- Collapses and emits `vu-open-change` when state changes.
toggle- Toggles open state and emits `vu-open-change`.

Types

NameDefinition
VuAccordionItemOpenChangeDetail
{ open: boolean; }

Related

Companions

  • Accordion`vu-accordion`

Surfaces

  • CardA card component with media, header, body, and footer slots.
  • CarouselA slide carousel component with navigation, drag, and autoplay.
  • Carousel ItemA carousel slide component for use inside `<vu-carousel>`.

Guides

  • ThemingTokens and VuThemeProvider
  • StylingCSS parts and tokens
  • AppearanceSurface tone and radius

Browse

  • Previous: AccordionEarlier in the sidebar
  • Next: CardLater in the sidebar
  • All componentsBrowse the full index