Disclosure
- Home
- 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
Sample Code
Show Code
Copy Code
import {
Disclosure,
DisclosureButton,
DisclosurePanel,
} from '@headlessui/react'
import { Icon } from '@iconify/react'
const BasicDisclosureCode = () => {
return (
<div>
<div className='w-full divide-y divide-border dark:divide-darkborder rounded-xl bg-lightgray dark:bg-dark'>
<Disclosure as='div' className='py-4 px-6' defaultOpen={true}>
<DisclosureButton className='group flex w-full items-center justify-between'>
<span className='text-sm font-medium text-ld group-data-[hover]:text-primary'>
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 text-darklink'>
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'>
<span className='text-sm font-medium text-ld group-data-[hover]:text-primary'>
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 text-darklink'>
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'>
<span className='text-sm font-medium text-ld group-data-[hover]:text-primary'>
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 text-darklink'>
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
Sample Code
Show Code
Copy Code
import {
Disclosure,
DisclosureButton,
DisclosurePanel,
} from '@headlessui/react'
import { Icon } from '@iconify/react'
const TransitionCode = () => {
return (
<div>
<div className='w-full divide-y divide-border dark:divide-darkborder rounded-xl bg-lightgray dark:bg-dark'>
<Disclosure as='div' className='py-4 px-6' defaultOpen={true}>
<DisclosureButton className='group flex w-full items-center justify-between'>
<span className='text-sm font-medium text-ld group-data-[hover]:text-primary'>
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 text-darklink 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'>
<span className='text-sm font-medium text-ld group-data-[hover]:text-primary'>
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 text-darklink 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'>
<span className='text-sm font-medium text-ld group-data-[hover]:text-primary'>
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 text-darklink 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
Sample Code
Show 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
Sample Code
Show 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'>
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
Sample Code
Show 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='w-full divide-y divide-border dark:divide-darkborder rounded-xl bg-lightgray dark:bg-dark'>
<Disclosure as='div' className='py-4 px-6'>
{({ open }) => (
<>
<DisclosureButton className='group flex w-full items-center justify-between'>
<span className='text-sm font-medium text-ld group-data-[hover]:text-primary'>
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 text-darklink'>
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'>
<span className='text-sm font-medium text-ld group-data-[hover]:text-primary'>
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 text-darklink 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'>
<span className='text-sm font-medium text-ld group-data-[hover]:text-primary'>
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 text-darklink 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
Settings
Theme Option
Theme Direction
Theme Colors
BLUE_THEME
AQUA_THEME
PURPLE_THEME
GREEN_THEME
CYAN_THEME
ORANGE_THEME
Layout Type
Container Option
Sidebar Type
Card With
Theme Border Radius
Current Value: 7