Prose
Collapsible
Hide and reveal content with a collapsible component featuring customizable icons and labels.
Overview
The ProseCollapsible component allows you to show and hide content with a clickable trigger. It's perfect for FAQ sections, progressive disclosure, hiding lengthy content, or creating expandable code examples.
Basic Usage
With Custom Text
Default Open
Start with the content expanded:
This content is visible by default. Users can collapse it if they want.
Custom Icons
Change the icons to match your design:
Common Use Cases
FAQ Section
How do I install this library?
What are the system requirements?
Is it compatible with Nuxt 3?
Code Examples
Show additional code without overwhelming the page:
Long Content
Hide lengthy explanations until needed:
Progressive Disclosure
Reveal information step by step:
Step 1: Create the Component File
Create a new file MyButton.vue:
<template>
<button>Click me</button>
</template>
Step 2: Add Props
Step 3: Add Emits
Spoiler Content
Hide spoilers or answers:
Vue Component Usage
You can also use this component in your Vue files:
<template>
<div>
<!-- Basic usage -->
<ProseCollapsible>
<p>Hidden content goes here</p>
</ProseCollapsible>
<!-- With custom text -->
<ProseCollapsible open-title="Show details" close-title="Hide details">
<p>More detailed information</p>
</ProseCollapsible>
<!-- With custom icons -->
<ProseCollapsible open-icon="lucide:chevron-up" close-icon="lucide:chevron-down">
<p>Content with chevron icons</p>
</ProseCollapsible>
<!-- Default open -->
<ProseCollapsible default-open>
<p>This starts expanded</p>
</ProseCollapsible>
<!-- With custom classes -->
<ProseCollapsible
trigger-class="text-primary font-bold"
content-class="bg-muted p-4 rounded-lg"
>
<p>Styled content</p>
</ProseCollapsible>
</div>
</template>
Nested Collapsibles
You can nest collapsibles for hierarchical content:
Styling
The component uses sensible defaults but can be customized:
<ProseCollapsible
trigger-class="text-lg font-semibold text-primary hover:text-primary/80"
content-class="mt-4 p-4 bg-muted/50 rounded-lg border"
>
Custom styled content
</ProseCollapsible>
Accessibility
The component is built on top of UiCollapsible which handles:
- Proper ARIA attributes
- Keyboard navigation (Space/Enter to toggle)
- Focus management
- Screen reader support
Best Practices
- Use descriptive trigger text that clearly indicates what will be revealed
- Don't hide critical information that users need to see immediately
- Consider starting important content expanded (
default-open) - Use consistent icon patterns across your application
- Avoid nesting collapsibles more than 2-3 levels deep
- Test with keyboard navigation to ensure accessibility
Prose Collapsible API
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
openIcon | string | "lucide:minus" | No | Icon to show when collapsible is open |
closeIcon | string | "lucide:plus" | No | Icon to show when collapsible is closed |
openTitle | string | "Show more" | No | Text to show when collapsible is closed (trigger to open) |
closeTitle | string | "Show less" | No | Text to show when collapsible is open (trigger to close) |
triggerClass | ClassValue | — | No | Additional CSS classes for the trigger button |
contentClass | ClassValue | — | No | Additional CSS classes for the content area |
defaultOpen | boolean | false | No | Whether the collapsible should be open by default |