diff --git a/apps/www/src/content/docs/components/collapsible.md b/apps/www/src/content/docs/components/collapsible.md index a1307c5a..19f32739 100644 --- a/apps/www/src/content/docs/components/collapsible.md +++ b/apps/www/src/content/docs/components/collapsible.md @@ -10,11 +10,46 @@ primitive: https://www.radix-vue.com/components/collapsible.html ## Installation - + + + +### Run the following command + ```bash npx shadcn-vue@latest add collapsible ``` +### Update `tailwind.config.js` + +Add the following animations to your `tailwind.config.js` file: + +```js title="tailwind.config.js" {5-18} +/** @type {import('tailwindcss').Config} */ +module.exports = { + theme: { + extend: { + keyframes: { + 'collapsible-down': { + from: { height: 0 }, + to: { height: 'var(--radix-collapsible-content-height)' }, + }, + 'collapsible-up': { + from: { height: 'var(--radix-collapsible-content-height)' }, + to: { height: 0 }, + }, + }, + animation: { + 'collapsible-down': 'collapsible-down 0.2s ease-in-out', + 'collapsible-up': 'collapsible-up 0.2s ease-in-out', + }, + }, + }, +} +``` + + + + ## Usage ```vue diff --git a/packages/cli/src/utils/templates.ts b/packages/cli/src/utils/templates.ts index 3eae5012..c94e48a3 100644 --- a/packages/cli/src/utils/templates.ts +++ b/packages/cli/src/utils/templates.ts @@ -128,10 +128,20 @@ module.exports = { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, + "collapsible-down": { + from: { height: 0 }, + to: { height: 'var(--radix-collapsible-content-height)' }, + }, + "collapsible-up": { + from: { height: 'var(--radix-collapsible-content-height)' }, + to: { height: 0 }, + }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", + "collapsible-down": "collapsible-down 0.2s ease-in-out", + "collapsible-up": "collapsible-up 0.2s ease-in-out", }, }, },