Disclosure & layout
Accordion, Collapsible, Avatar, Skeleton, Separator, Scroll area, Aspect ratio.
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
TPIN
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
TPIN
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 file
src/components/ui/
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>
);
}Props API
ButtonProps | Prop | Type | Default | Description |
|---|---|---|---|
asChild opt | boolean | false | — |
CalloutProps | Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | — |
variant opt | 'default' | 'success' | 'warning' | 'error' | 'default' | — |
icon opt | React.ReactNode | — | Optional icon node (e.g. a Lucide icon element) shown beside the title. |
DataTableProps | Prop | Type | Default | Description |
|---|---|---|---|
columns | ColumnDef<TData, TValue>[] | — | — |
data | TData[] | — | — |
initialColumnVisibility opt | VisibilityState | {} | Initial column visibility — column id to visible boolean. |
initialGlobalFilter opt | string | '' | Initial global filter string. |
height opt | string | number | '500px' | Height of the scroll container in CSS units. Defaults to '500px'. |
estimateRowSize opt | number | 40 | Estimated row height in px for virtualization. Defaults to 40. |
syncToUrl opt | boolean | { key: string } | false | Sync filter/sort/visibility/sizing to URLSearchParams so views are shareable and survive page refresh. Pass `{ key: 'myTable' }` to namespace URL params when multiple DataTables share a page. Defaults to false (no URL syncing). |
DividerProps | Prop | Type | Default | Description |
|---|---|---|---|
children opt | React.ReactNode | — | Optional centered text label rendered between two rules. |
MetricProps | Prop | Type | Default | Description |
|---|---|---|---|
value | string | number | — | — |
label opt | string | — | — |
delta opt | { value: number; /** Semantic trend direction. Controls col… | — | — |
ProgressBarProps | Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Completion percentage, clamped to [0, 100]. |
label opt | string | — | Accessible name for screen readers. |
TrackerProps | Prop | Type | Default | Description |
|---|---|---|---|
data | TrackerBlock[] | — | — |