Collapse

Expandable content container with customizable triggers and smooth animations

Basic Collapse

Simple expandable content with different trigger styles

Click to expand
This content is hidden by default and can be expanded by clicking the title above.
Arrow style
This collapse uses an arrow indicator to show expand/collapse state.
Plus/minus style
This collapse uses plus/minus icons to indicate the state.
Show Code

Collapse with Checkbox

Checkbox-controlled collapse for form-like interfaces

This collapse is controlled by a checkbox, which can be useful in forms or settings.
This collapse starts in an open state and can be closed by unchecking.
Show Code

Collapse with Rich Content

Collapses containing complex content and components

📊 Statistics Overview
Total Users
31,547
+12% from last month
Revenue
$89,400
+18% from last month
⚙️ Advanced Settings
Show Code

FAQ-style Collapses

Multiple collapses for FAQ or help sections

What is this component library?
This is a comprehensive UI component library built with Deno, Fresh, and daisyUI, providing reusable components for building modern web applications.
How do I customize the styling?
You can customize styling by passing additional CSS classes through the 'class' prop, or by modifying the daisyUI theme configuration.
Is it mobile responsive?
Yes! All components are built with responsive design in mind and work great on mobile, tablet, and desktop devices.
Can I use custom icons?
Absolutely! You can pass custom icons through the 'icon' prop to replace the default arrow, plus, or checkbox indicators.
Show Code

Nested Collapses

Collapses containing other collapses for hierarchical content

🏢 Company Information

Welcome to our company overview section.

📍 Locations
🇺🇸 United States
  • New York - Headquarters
  • San Francisco - Engineering
  • Austin - Sales
🇪🇺 Europe
  • London - European HQ
  • Berlin - R&D
  • Amsterdam - Operations
👥 Departments
Engineering
Marketing
Sales
Support
Show Code

Usage Notes

  • Use arrow variant for general expand/collapse UI patterns
  • Checkbox variant works well in forms and settings interfaces
  • Plus/minus variant is intuitive for add/remove or expand/contract actions
  • Custom icons can be used to match your design system
  • Nested collapses create hierarchical content organization
  • Consider accessibility by ensuring keyboard navigation works properly

API Props

PropTypeRequiredDefaultDescription
value*ZodEffectsYes-