uix-uiDescription list
Label / value details. 2 layouts.
- Customer
- Nusrat Jahan
- Address
- House 14, Road 5, Dhanmondi, Dhaka
- Payment
- bKash, paid
- Total
- ৳1,260
import { DescriptionList } from "@/components/ui/description-list";
export default function Example() {
return (
<DescriptionList
style={{ width: 460, maxWidth: "100%" }}
items={[
{ term: "Customer", detail: "Nusrat Jahan" },
{ term: "Address", detail: "House 14, Road 5, Dhanmondi, Dhaka" },
{ term: "Payment", detail: "bKash, paid" },
{ term: "Total", detail: "৳1,260" },
]}
/>
);
}
Installation
$ npx uix-ui@latest add description-listThis copies the file into components/ui/description-list.tsx in your project. npx shadcn@latest add @uix/description-list works too.
Usage
import { DescriptionList } from "@/components/ui/description-list";
<DescriptionList
style={{ width: 460, maxWidth: "100%" }}
items={[
{ term: "Customer", detail: "Nusrat Jahan" },
{ term: "Address", detail: "House 14, Road 5, Dhanmondi, Dhaka" },
{ term: "Payment", detail: "bKash, paid" },
{ term: "Total", detail: "৳1,260" },
]}
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
layout | horizontal | stacked | "horizontal" | |
items | DescriptionItem[] | – | Rows of label + value. A Badge works as a value (a status). |
Everything else is passed to the root element, so className, aria-* and event handlers work as usual.
Dependencies
Installed for you by the CLI.
class-variance-authorityclsxtailwind-merge
lib/utils.ts