Collapsible

Toggle content visibility with smooth expand and collapse animations.

Usage

Wrap your content with the collapsible component to display a Collapsible in your content.

Prop	Default	Type
`name`		`string`
`size`	`md`	`string`
`color`	`neutral`	`string`

::collapsible

| Prop    | Default   | Type                     |
|---------|-----------|--------------------------|
| `name`  |           | `string`{lang="ts-type"} |
| `size`  | `md`      | `string`{lang="ts-type"} |
| `color` | `neutral` | `string`{lang="ts-type"} |

::

API

Props

Prop	Default	Type
`icon`	`appConfig.ui.icons.chevronDown`	`string \| object` The icon displayed to toggle the collapsible.
`name`	`t('prose.collapsible.name')`	`string` The name displayed in the trigger label.
`openText`	`t('prose.collapsible.openText')`	`string` The text displayed when the collapsible is open.
`closeText`	`t('prose.collapsible.closeText')`	`string` The text displayed when the collapsible is closed.
`ui`		`{ root?: ClassNameValue; trigger?: ClassNameValue; triggerIcon?: ClassNameValue; triggerLabel?: ClassNameValue; content?: ClassNameValue; } & { root?: ClassNameValue; content?: ClassNameValue; }`

Slots

Slot	Type
`default`	`{}`

Theme

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      collapsible: {
        slots: {
          root: 'my-5',
          trigger: [
            'group relative rounded-xs inline-flex items-center gap-1.5 text-muted hover:text-default text-sm focus-visible:ring-2 focus-visible:ring-primary focus:outline-none',
            'transition-colors'
          ],
          triggerIcon: 'size-4 shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200',
          triggerLabel: 'truncate',
          content: '*:first:mt-2.5 *:last:mb-0 *:my-1.5'
        }
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          collapsible: {
            slots: {
              root: 'my-5',
              trigger: [
                'group relative rounded-xs inline-flex items-center gap-1.5 text-muted hover:text-default text-sm focus-visible:ring-2 focus-visible:ring-primary focus:outline-none',
                'transition-colors'
              ],
              triggerIcon: 'size-4 shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200',
              triggerLabel: 'truncate',
              content: '*:first:mt-2.5 *:last:mb-0 *:my-1.5'
            }
          }
        }
      }
    })
  ]
})

Changelog

5cb65 — feat: import @nuxt/ui-pro components

e6e51 — fix: class should have priority over ui prop

39c86 — fix: refactor types after @nuxt/module-builder upgrade (#3855)

CodeTree

Visualize file and folder structures with syntax-highlighted code.

Field

Document API parameters, props, and configuration options clearly.