Utilities
- Status
- Published
- Last Updated
- Yesterday at 12:34 PM
- Storage Usage
- 2.4 GB of 5 GB
- API Endpoints
- 4 active endpoints
- Database
- PostgreSQL v14.5
- Environment
- Production
import {
DescriptionDetail,
DescriptionGroup,Installation#
pnpm dlx shadcn@latest add junwen-k/ui-x/description-list
Usage#
import {
DescriptionDetail,
DescriptionGroup,
DescriptionList,
DescriptionTerm,
} from "@/components/ui/description-list";<DescriptionList>
<DescriptionGroup>
<DescriptionTerm>Status</DescriptionTerm>
<DescriptionDetail>
<span className="focus:ring-ring inline-flex items-center rounded-full border bg-green-50 px-2.5 py-0.5 text-xs font-semibold text-green-700 ring-green-600/20 transition-colors focus:ring-2 focus:ring-offset-2 focus:outline-none">
Published
</span>
</DescriptionDetail>
</DescriptionGroup>
<DescriptionGroup>
<DescriptionTerm>Last Updated</DescriptionTerm>
<DescriptionDetail>Yesterday at 12:34 PM</DescriptionDetail>
</DescriptionGroup>
<DescriptionGroup>
<DescriptionTerm>Storage Usage</DescriptionTerm>
<DescriptionDetail>2.4 GB of 5 GB</DescriptionDetail>
</DescriptionGroup>
<DescriptionGroup>
<DescriptionTerm>API Endpoints</DescriptionTerm>
<DescriptionDetail>4 active endpoints</DescriptionDetail>
</DescriptionGroup>
<DescriptionGroup>
<DescriptionTerm>Database</DescriptionTerm>
<DescriptionDetail>PostgreSQL v14.5</DescriptionDetail>
</DescriptionGroup>
<DescriptionGroup>
<DescriptionTerm>Environment</DescriptionTerm>
<DescriptionDetail>Production</DescriptionDetail>
</DescriptionGroup>
</DescriptionList>API Reference#
All parts render semantic HTML description-list elements and accept the corresponding element props.
DescriptionList#
The list container. Renders a <dl>.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | React.ComponentProps<"dl"> | - | Props spread to the <dl> element. |
DescriptionGroup#
Groups a term with its details for layout. Renders a <div>.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | React.ComponentProps<"div"> | - | Props spread to the <div> element. |
DescriptionTerm#
The term being described. Renders a <dt>.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | React.ComponentProps<"dt"> | - | Props spread to the <dt> element. |
DescriptionDetail#
The description of the preceding term. Renders a <dd>.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | React.ComponentProps<"dd"> | - | Props spread to the <dd> element. |