Components
Loading preview...
Container from HeroUI v3 that coordinates Disclosure items and manages their expanded state. Includes default and controlled examples with accessible triggers and panels built on React Aria.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-disclosure-group"use client"
import type { CSSProperties } from "react"
import { Apple, QrCode } from "lucide-react"
import { Button, Separator } from "@heroui/react"
import { DisclosureGroup, Disclosure } from "@/components/ui/heroui-disclosure-group"
const disclosureColors = {
"--accent": "oklch(62.04% 0.195 253.83)",
"--accent-hover": "oklch(55.6% 0.205 253.83)",
"--accent-foreground": "oklch(99.11% 0 0)",
"--heroui-disclosure-muted": "oklch(55.2% 0.016 285.938)",
"--heroui-disclosure-border": "oklch(89.4% 0.004 286.32)",
"--heroui-disclosure-surface": "oklch(100% 0 0)",
} as CSSProperties
const mutedText = {
color: "oklch(45.2% 0.016 285.938)",
} as CSSProperties
export default function Default() {
const qrCodeUrl =
"https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/qr-code-native.png"
return (
<div className="heroui-disclosure-demo w-full max-w-md" style={disclosureColors}>
<div className="flex flex-col gap-4 bg-transparent p-4">
<DisclosureGroup defaultExpandedKeys={["preview"]}>
<Disclosure aria-label="Preview HeroUI Native" id="preview">
<Disclosure.Heading>
<Button slot="trigger" variant="secondary" className="w-full border-none">
<div className="flex w-full items-center justify-start gap-2">
<QrCode className="size-4" />
Preview HeroUI Native
</div>
<Disclosure.Indicator style={mutedText} />
</Button>
</Disclosure.Heading>
<Disclosure.Content>
<Disclosure.Body className="mx-2 flex flex-col items-center gap-2 p-4 text-center">
<p className="text-sm" style={mutedText}>
Scan this QR code with your camera app to preview the HeroUI native components.
</p>
<img
alt="Expo Go QR Code"
className="aspect-square w-full max-w-54 object-cover"
src={qrCodeUrl}
/>
<p className="text-sm" style={mutedText}>Expo must be installed on your device.</p>
<Button className="mt-4" variant="primary">
Preview on Expo Go
</Button>
</Disclosure.Body>
</Disclosure.Content>
</Disclosure>
<Separator className="my-2" />
<Disclosure id="download">
<Disclosure.Heading aria-label="Download HeroUI Native">
<Button slot="trigger" variant="tertiary" className="w-full border-none bg-transparent">
<div className="flex w-full items-center justify-start gap-2">
<Apple className="size-4" />
Download App
</div>
<Disclosure.Indicator style={mutedText} />
</Button>
</Disclosure.Heading>
<Disclosure.Content>
<Disclosure.Body className="mx-2 flex flex-col items-center gap-2 p-4 text-center">
<p className="text-sm" style={mutedText}>
Download the HeroUI native app to explore our mobile components directly on your
device.
</p>
<img
alt="App Store QR Code"
className="aspect-square w-full max-w-54 object-cover"
src={qrCodeUrl}
/>
<p className="text-sm" style={mutedText}>Available on iOS and Android devices.</p>
<Button className="mt-4" variant="primary">
<Apple className="size-4" />
Download on App Store
</Button>
</Disclosure.Body>
</Disclosure.Content>
</Disclosure>
</DisclosureGroup>
</div>
</div>
)
}