Collapsible

An interactive component which expands/collapses a panel.

Source code

Click here to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

Installation

npx ui-thing@latest add collapsible

You also need to add the animations to your tailwind.config.js file:

keyframes: {
  "collapse-down": {
    from: { height: "0px" },
    to: { height: "var(--radix-collapsible-content-height)" },
  },
  "collapse-up": {
    from: { height: "var(--radix-collapsible-content-height)" },
    to: { height: "0px" },
  },
},
animation: {
  "collapse-down": "collapse-down 0.2s ease-out",
  "collapse-up": "collapse-up 0.2s ease-out",
},

Usage

@peduarte starred 3 repositories

@radix-ui/primitives