Collapsible — uicraft

Default

A basic collapsible with a trigger button and expandable content area.

html

@peduarte starred 3 repositories

@radix-ui/primitives

@radix-ui/colors

@stitches/react

<div data-collapsible>
  <button data-collapsible-trigger>Toggle</button>
  <div data-collapsible-content class="uc-hidden">
    Hidden content here.
  </div>
</div>

With Animation

Content expands and collapses with a smooth height transition.

html

@peduarte starred 3 repositories

@radix-ui/primitives

@radix-ui/colors

@stitches/react

<div data-collapsible data-collapsible-animated>
  <button data-collapsible-trigger>...</button>
  <div data-collapsible-content class="uc-overflow-hidden uc-transition-all uc-duration-300">
    ...
  </div>
</div>

Nested

A collapsible inside another collapsible for hierarchical content like file trees.

html

Project Files

src/

index.ts

utils.ts

styles.css

package.json

tsconfig.json

<div data-collapsible>
  <button data-collapsible-trigger>...</button>
  <div data-collapsible-content class="uc-hidden">
    <div data-collapsible>
      <button data-collapsible-trigger>...</button>
      <div data-collapsible-content class="uc-hidden">
        Nested content
      </div>
    </div>
  </div>
</div>

Controlled

Collapsibles with text-based triggers that toggle between "Show more" and "Show less".

html

Collapsible components are useful for toggling the visibility of content. They can be used to create expandable sections, FAQs, and more.

This pattern is commonly used in settings panels, sidebars, and content-heavy pages where you want to reduce visual clutter while keeping information accessible.

You can also use collapsible components to progressively disclose information to users as they need it.

Progressive disclosure helps reduce cognitive load by showing only the most essential information upfront, with additional details available on demand.

<div data-collapsible data-collapsible-open>
  <p>Content preview...</p>
  <div data-collapsible-content>
    <p>Additional content...</p>
  </div>
  <button data-collapsible-trigger>
    <span data-collapsible-label-collapse>Show less</span>
    <span data-collapsible-label-expand class="uc-hidden">Show more</span>
  </button>
</div>