Component Library
Browse and explore components
Disclosure
A Disclosure is a UI component that toggles the visibility of hidden content, typically used for progressive disclosure.
Basic Disclosure
Lorem ipsum dolor sit amet, consectetur adipisici elit…’ (complete text) is dummy text that is not meant to mean anything. It is used as a placeholder in magazine
Component Code
Copy Code
import {
Disclosure,
DisclosureButton,
DisclosurePanel,
} from '@headlessui/react'
import { Icon } from '@iconify/react'
const BasicDisclosureCode = () => {
return (
<div>
<div className='ui-disclosure'>
<Disclosure as='div' className='py-4 px-6' defaultOpen={true}>
<DisclosureButton className='group flex w-full items-center justify-between hover:cursor-pointer'>
<span className='ui-disclosure-btn'>
What is your refund policy?
</span>
<Icon
icon='solar:alt-arrow-down-outline'
height={18}
className='size-5 fill-white/60 group-data-[hover]:fill-white/50 group-data-[open]:rotate-180'
/>
</DisclosureButton>
<DisclosurePanel className='mt-2 text-xs'>
Lorem ipsum dolor sit amet, consectetur adipisici elit…’ (complete
text) is dummy text that is not meant to mean anything. It is used
as a placeholder in magazine
</DisclosurePanel>
</Disclosure>
<Disclosure as='div' className='py-4 px-6'>
<DisclosureButton className='group flex w-full items-center justify-between hover:cursor-pointer'>
<span className='ui-disclosure-btn'>Can I reserve a magazine?</span>
<Icon
icon='solar:alt-arrow-down-outline'
height={18}
className='size-5 fill-white/60 group-data-[hover]:fill-white/50 group-data-[open]:rotate-180'
/>
</DisclosureButton>
<DisclosurePanel className='mt-2 text-xs'>
Lorem ipsum dolor sit amet, consectetur adipisici elit…’ (complete
text) is dummy text that is not meant to mean anything. It is used
as a placeholder in magazine
</DisclosurePanel>
</Disclosure>
<Disclosure as='div' className='py-4 px-6'>
<DisclosureButton className='group flex w-full items-center justify-between hover:cursor-pointer'>
<span className='ui-disclosure-btn'>
Do I have the right to return an item?
</span>
<Icon
icon='solar:alt-arrow-down-outline'
height={18}
className='size-5 fill-white/60 group-data-[hover]:fill-white/50 group-data-[open]:rotate-180'
/>
</DisclosureButton>
<DisclosurePanel className='mt-2 text-xs'>
Lorem ipsum dolor sit amet, consectetur adipisici elit…’ (complete
text) is dummy text that is not meant to mean anything. It is used
as a placeholder in magazine
</DisclosurePanel>
</Disclosure>
</div>
</div>
)
}
export default BasicDisclosureCode
Transitions Disclosure
Lorem ipsum dolor sit amet, consectetur adipisici elit…’ (complete text) is dummy text that is not meant to mean anything. It is used as a placeholder in magazine
Component Code
Copy Code
import {
Disclosure,
DisclosureButton,
DisclosurePanel,
} from '@headlessui/react'
import { Icon } from '@iconify/react'
const TransitionCode = () => {
return (
<div>
<div className='ui-disclosure'>
<Disclosure as='div' className='py-4 px-6' defaultOpen={true}>
<DisclosureButton className='group flex w-full items-center justify-between hover:cursor-pointer'>
<span className='ui-disclosure-btn'>
What is your refund policy?
</span>
<Icon
icon='solar:alt-arrow-down-outline'
height={18}
className='size-5 fill-white/60 group-data-[hover]:fill-white/50 group-data-[open]:rotate-180'
/>
</DisclosureButton>
<DisclosurePanel
transition
className='mt-2 text-xs origin-top transition duration-200 ease-out data-[closed]:-translate-y-6 data-[closed]:opacity-0'>
Lorem ipsum dolor sit amet, consectetur adipisici elit…’ (complete
text) is dummy text that is not meant to mean anything. It is used
as a placeholder in magazine
</DisclosurePanel>
</Disclosure>
<Disclosure as='div' className='py-4 px-6'>
<DisclosureButton className='group flex w-full items-center justify-between hover:cursor-pointer'>
<span className='ui-disclosure-btn'>Can I reserve a magazine?</span>
<Icon
icon='solar:alt-arrow-down-outline'
height={18}
className='size-5 fill-white/60 group-data-[hover]:fill-white/50 group-data-[open]:rotate-180'
/>
</DisclosureButton>
<DisclosurePanel
transition
className='mt-2 text-xs origin-top transition duration-200 ease-out data-[closed]:-translate-y-6 data-[closed]:opacity-0'>
Lorem ipsum dolor sit amet, consectetur adipisici elit…’ (complete
text) is dummy text that is not meant to mean anything. It is used
as a placeholder in magazine
</DisclosurePanel>
</Disclosure>
<Disclosure as='div' className='py-4 px-6'>
<DisclosureButton className='group flex w-full items-center justify-between hover:cursor-pointer'>
<span className='ui-disclosure-btn'>
Do I have the right to return an item?
</span>
<Icon
icon='solar:alt-arrow-down-outline'
height={18}
className='size-5 fill-white/60 group-data-[hover]:fill-white/50 group-data-[open]:rotate-180'
/>
</DisclosureButton>
<DisclosurePanel
transition
className='mt-2 text-xs origin-top transition duration-200 ease-out data-[closed]:-translate-y-6 data-[closed]:opacity-0'>
Lorem ipsum dolor sit amet, consectetur adipisici elit…’ (complete
text) is dummy text that is not meant to mean anything. It is used
as a placeholder in magazine
</DisclosurePanel>
</Disclosure>
</div>
</div>
)
}
export default TransitionCode
Closing Disclosures Manually
Component Code
Copy Code
import {
Disclosure,
DisclosureButton,
DisclosurePanel,
CloseButton,
} from "@headlessui/react";
import MyCustomLink from "../MyLink";
import { Icon } from "@iconify/react";
const ClosingDisclosureCode = () => {
return (
<div>
<Disclosure>
<DisclosureButton className='group bg-primary ui-button'>
Open mobile menu
<Icon
icon='solar:alt-arrow-down-outline'
height={18}
className='size-5 fill-white/60 group-data-[hover]:fill-white/50 group-data-[open]:rotate-180'
/>
</DisclosureButton>
<DisclosurePanel className='px-4 py-1'>
<CloseButton as={MyCustomLink}>Go with your link</CloseButton>
</DisclosurePanel>
</Disclosure>
</div>
)
}
export default ClosingDisclosureCode
Rendering As Different Elements
Component Code
Copy Code
import { forwardRef } from 'react'
import {
Disclosure,
DisclosureButton,
DisclosurePanel,
} from '@headlessui/react'
import { Icon } from '@iconify/react'
let MyCustomButton = forwardRef(function (props: any, ref: any) {
return <button className='...' ref={ref} {...props} />
})
const RenderDiclosureCode = () => {
return (
<div className='w-fit'>
<Disclosure as='div'>
<DisclosureButton
as={MyCustomButton}
className='group bg-secondary ui-button w-full text-white'>
What languages do you support?
<Icon
icon='solar:alt-arrow-down-outline'
height={18}
className='size-5 fill-white/60 group-data-[hover]:fill-white/50 group-data-[open]:rotate-180'
/>
</DisclosureButton>
<DisclosurePanel as='ul' className='px-4 py-3'>
<li className='py-1'>HTML</li>
<li className='py-1'>CSS</li>
<li className='py-1'>JavaScript</li>
</DisclosurePanel>
</Disclosure>
</div>
)
}
export default RenderDiclosureCode
Disclosure With Framer Motion
Component Code
Copy Code
import {
Disclosure,
DisclosureButton,
DisclosurePanel,
} from '@headlessui/react'
import { AnimatePresence, motion } from 'framer-motion'
import { Icon } from '@iconify/react'
const FramerMotionCode = () => {
return (
<div>
<div className='ui-disclosure'>
<Disclosure as='div' className='py-4 px-6'>
{({ open }) => (
<>
<DisclosureButton className='group flex w-full items-center justify-between hover:cursor-pointer'>
<span className='ui-disclosure-btn'>
What is your refund policy?
</span>
<Icon
icon='solar:alt-arrow-down-outline'
height={18}
className='size-5 fill-white/60 group-data-[hover]:fill-white/50 group-data-[open]:rotate-180'
/>
</DisclosureButton>
<div className='overflow-hidden'>
<AnimatePresence>
{open && (
<DisclosurePanel
static
as={motion.div}
initial={{ opacity: 0, y: -24 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -24 }}
className='origin-top text-xs mt-2 '>
Lorem ipsum dolor sit amet, consectetur adipisici elit…’
(complete text) is dummy text that is not meant to mean
anything. It is used as a placeholder in magazine
layouts,Lorem ipsum dolor sit amet, consectetur adipisici
elit…’ (complete text) is dummy text that is not meant to
mean anything. It is used as a placeholder in magazine
layouts,
</DisclosurePanel>
)}
</AnimatePresence>
</div>
</>
)}
</Disclosure>
<Disclosure as='div' className='py-4 px-6'>
{({ open }) => (
<>
<DisclosureButton className='group flex w-full items-center justify-between hover:cursor-pointer'>
<span className='ui-disclosure-btn'>
Can I reserve a magazine?
</span>
<Icon
icon='solar:alt-arrow-down-outline'
height={18}
className='size-5 fill-white/60 group-data-[hover]:fill-white/50 group-data-[open]:rotate-180'
/>
</DisclosureButton>
<div className='overflow-hidden'>
<AnimatePresence>
{open && (
<DisclosurePanel
static
as={motion.div}
initial={{ opacity: 0, y: -24 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -24 }}
className='origin-top text-xs mt-2'>
Lorem ipsum dolor sit amet, consectetur adipisici elit…’
(complete text) is dummy text that is not meant to mean
anything. It is used as a placeholder in magazine
layouts,Lorem ipsum dolor sit amet, consectetur adipisici
elit…’ (complete text) is dummy text that is not meant to
mean anything. It is used as a placeholder in magazine
layouts,
</DisclosurePanel>
)}
</AnimatePresence>
</div>
</>
)}
</Disclosure>
<Disclosure as='div' className='py-4 px-6'>
{({ open }) => (
<>
<DisclosureButton className='group flex w-full items-center justify-between hover:cursor-pointer'>
<span className='ui-disclosure-btn'>
Do I have the right to return an item?
</span>
<Icon
icon='solar:alt-arrow-down-outline'
height={18}
className='size-5 fill-white/60 group-data-[hover]:fill-white/50 group-data-[open]:rotate-180'
/>
</DisclosureButton>
<div className='overflow-hidden'>
<AnimatePresence>
{open && (
<DisclosurePanel
static
as={motion.div}
initial={{ opacity: 0, y: -24 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -24 }}
className='origin-top text-xs mt-2'>
Lorem ipsum dolor sit amet, consectetur adipisici elit…’
(complete text) is dummy text that is not meant to mean
anything. It is used as a placeholder in magazine
layouts,Lorem ipsum dolor sit amet, consectetur adipisici
elit…’ (complete text) is dummy text that is not meant to
mean anything. It is used as a placeholder in magazine
layouts,
</DisclosurePanel>
)}
</AnimatePresence>
</div>
</>
)}
</Disclosure>
</div>
</div>
)
}
export default FramerMotionCode