Create New Disclosure

Renders an expandable button that shows a grid of action items when clicked. It transitions smoothly between collapsed and expanded states. Use it to provide a clean way to access multiple actions from a single button.

byWatermelon Corp from Watermelon

Installation

terminal

pnpm dlx layro-cli add @watermeloncorp/create-new-disclosure

npx layro-cli add @watermeloncorp/create-new-disclosure

npx layro-cli add @watermeloncorp/create-new-disclosure

bunx layro-cli add @watermeloncorp/create-new-disclosure

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

'use client';

import { useState, type FC, type ReactNode } from 'react';
import { HugeiconsIcon } from '@hugeicons/react';
import {
  Add01Icon,
  Cancel01Icon,
  Folder01Icon,
  TaskEdit01Icon,
  NoteIcon,
  Award01Icon,
  Flag02Icon,
  Calendar04Icon,
} from '@hugeicons/core-free-icons';