Github
Docs
Collapsible

Collapsible

An interactive component which expands/collapses a panel.

Docs API Reference

@RyanCarniato starred 2 repositories

solid-js

Installation

Run the following command:

npx shadcn-solid@latest add collapsible

Update tailwind.config.cjs

Add the following animations to your tailwind.config.cjs file:

tailwind.config.cjs
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      keyframes: {
        "collapsible-down": {
          from: { height: 0 },
          to: { height: "var(--kb-collapsible-content-height)" }
        },
        "collapsible-up": {
          from: { height: "var(--kb-collapsible-content-height)" },
          to: { height: 0 }
        }
      },
      animation: {
        "collapsible-down": "collapsible-down 0.2s ease-out",
        "collapsible-up": "collapsible-up 0.2s ease-out"
      }
    }
  }
};

Usage

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger
} from "@/components/ui/collapsible";
<Collapsible>
  <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
  <CollapsibleContent>
    Yes. Free to use for personal and commercial projects. No attribution required.
  </CollapsibleContent>
</Collapsible>
CheckboxCombobox