Disclosure

Installation

Install @vinui/react from GitHub with pnpm, then import its stylesheet once, in your root layout or entry file:

pnpm add github:vindotski/vinui#path:packages/react

import '@vinui/react/styles.css';

Usage

Show and hide a section of content, built on Headless UI's Disclosure. Stack several for an FAQ:

import { Disclosure, DisclosureButton, DisclosurePanel } from '@vinui/react';

<Disclosure defaultOpen>
  <DisclosureButton>Do I need Tailwind installed?</DisclosureButton>
  <DisclosurePanel>No. The styles ship precompiled.</DisclosurePanel>
</Disclosure>;

The button's chevron flips when open, and the panel fades in (without motion for users who prefer reduced motion).

More to come

Detailed examples, keyboard interaction and the full component API are on their way.