Reveal
- Easy integration with any ReactNode content
- Conditionally renders the button based on content height
- Customizable maximum height for flexible content display
- Smoothly handles dynamic content changes with ResizeObserver
- Offers multiple button styles for different UI needs
Installation
Run the following command
npx vibes@latest add revealUsage
import { Reveal } from '@/vibes/soul/primitives/reveal';function Usage() { return ( <Reveal> <p> To begin your return, simply log into your account on our website or contact our dedicated customer service team. Once your return is authorized, we'll provide you with a prepaid shipping label for domestic returns. </p> </Reveal> );}API Reference
RevealProps
| Prop | Type | Default |
|---|---|---|
children* | ReactNode | |
defaultOpen | boolean | false |
hideLabel | string | 'Show less' |
maxHeight | string | '10rem' |
showLabel | string | 'Show more' |
variant | 'underline' | 'button' | 'underline' |