Disclosure A simple, accessible foundation for building custom UIs that show and hide content, like togglable accordion panels.
Made by imskyleen
< Disclosure > < DisclosureButton >Disclosure Button</ DisclosureButton > < DisclosurePanel >Disclosure Panel</ DisclosurePanel > </ Disclosure > The choice made is the same as Headless UI, i.e. to remove the element from the DOM for accessibility and performance reasons. However, this may pose a problem for SEO. If you want your Disclosure content to be taken into account by Google, please replace the DisclosurePanel component with :
components/animate-ui/headless-disclosure.tsx const DisclosurePanel = React. forwardRef < HTMLDivElement , DisclosurePanelProps >( ( { className , children , transition = { type: 'spring' , stiffness: 150 , damping: 17 }, as = React . Fragment , ... props }, ref , ) => { const { isOpen } = useDisclosure (); return ( < DisclosurePanelPrimitive static as = {as} { ... props} > {( bag ) => ( < motion.div initial = { false } animate = { isOpen ? { height: 'auto' , opacity: 1 , '--mask-stop' : '100%' } : { height: 0 , opacity: 0 , '--mask-stop' : '0%' } } transition = {transition} style = {{ maskImage: 'linear-gradient(black var(--mask-stop), transparent var(--mask-stop))' , WebkitMaskImage: 'linear-gradient(black var(--mask-stop), transparent var(--mask-stop))' , }} className = { cn ( 'overflow-hidden' , className)} ref = {ref} > { typeof children === 'function' ? children (bag) : children} </ motion.div > )} </ DisclosurePanelPrimitive > ); }, );