Disclosure & layout
Accordion, Collapsible, Avatar, Skeleton, Separator, Scroll area, Aspect ratio.
stable client:visible
Source:
src/components/ui/
Install:
npx shadcn@latest add accordion collapsible avatar skeleton separator scroll-area aspect-ratio --yes Rendered example — light + dark
Light
Accordion
An issue-driven web scaffold on Astro + React + Base UI.
Collapsible
Avatar
APIN
Skeleton
Separator
DocsGalleryDemos
Scroll area
Aspect ratio (16:9)
16 : 9
Dark
Accordion
An issue-driven web scaffold on Astro + React + Base UI.
Collapsible
Avatar
APIN
Skeleton
Separator
DocsGalleryDemos
Scroll area
Aspect ratio (16:9)
16 : 9
Recipes & props
A realistic usage snippet for this component. Imports come from
@/components/ui/….
See the
source
for the full API.
import {
Accordion,
AccordionItem,
AccordionTrigger,
AccordionContent,
} from '@/components/ui/accordion';
export function Faq() {
return (
<Accordion>
<AccordionItem value="idd">
<AccordionTrigger>What is Issue-Driven Development?</AccordionTrigger>
<AccordionContent>Every feature starts as a GitHub issue.</AccordionContent>
</AccordionItem>
</Accordion>
);
}Live playground
Edit the snippet below — it transpiles and re-renders as you type. No
bundler, no imports needed: the components used here are already in
scope (see
src/lib/playground-scope.ts).
Edit the code — the preview updates as you type
Preview