UI Thing

Accordion

A vertically stacked set of interactive headings that each reveal an associated section of content.

Radix-Vue
API Reference

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 accordion

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

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

Usage

Dashboard

A simple dashboard created with the components from the library. It shows how to use the components in a real application.

Alert

A visually emphasized message that informs the user of an event.