Sections

• Introduction
• Installation
• Styling
• Colors
• Forms
• Skills
• RTL
• LLMs.txt
• Changelog

Components

• Accordion
• Action Bar
• Alert Dialog
• Alert
• Announcement
• Aspect Ratio
• Autocomplete
• Avatar
• Badge
• Bottom Navigation
• Breadcrumb
• Button Group
• Button
• Calendar
• Card
• Carousel
• Chart
• Checkbox
• Circular Progress
• Circular Slider
• Clipboard
• Collapsible
• Color Picker
• Combobox
• Command
• Context Menu
• Data List
• Date InputNew
• Date Picker
• Dialog
• DrawerUpdated
• Editable
• Field
• File Upload
• FloatUpdated
• Floating Panel
• Frame
• Hint
• Hover Card
• Image Cropper
• Input Group
• Input OTP
• Input
• Item
• Kbd
• Link Overlay
• Listbox
• Marquee
• Menu
• Native Select
• Number Input
• Pagination
• Password Input
• Popover
• Progress
• Prose
• QR Code
• Radio Group
• Rating
• Resizable
• Scroll Area
• Segment Group
• Select
• Separator
• Sheet
• Sidebar
• Signature Pad
• Skeleton
• Skip Nav
• Slider
• Spinner
• StatusUpdated
• Steps
• Switch
• Table
• Tabs
• Tags Input
• Textarea
• Timer
• Toast
• Toggle Group
• Toggle Tooltip
• Toggle
• Tooltip
• Tour
• Tree View

Utilities

• Client Only
• Download Trigger
• Format
• Highlight
• Hitbox
• JSON Tree View
• Presence
• Show
• Swap

Forms

• Formisch
• React Hook Form
• TanStack Form

Hooks

• useIsMobile

Data List

Copy Markdown

A list of label-value pairs.

PreviewCode

New Users234

Sales£12,340

Revenue3,450

Installation#

CLIManual

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/data-list

Anatomy#

DataList
└── DataListItem
    ├── DataListItemLabel
    └── DataListItemValue

Usage#

import {
  DataList,
  DataListItem,
  DataListItemLabel,
  DataListItemValue,
} from "@/components/ui/data-list";

<DataList>
  <DataListItem>
    <DataListItemLabel>Name</DataListItemLabel>
    <DataListItemValue>John Doe</DataListItemValue>
  </DataListItem>
  <DataListItem>
    <DataListItemLabel>Email</DataListItemLabel>
    <DataListItemValue>[email protected]</DataListItemValue>
  </DataListItem>
</DataList>

Orientation#

Use the orientation prop to change the orientation of the datalist component.

Horizontal#

PreviewCode

First NameJassie

Last NameBhatia

[email protected]

Vertical#

PreviewCode

First NameJassie

Last NameBhatia

[email protected]

Examples#

Info Tip#

PreviewCode

New Users234

Sales£12,340

Revenue3,450

Separator#

Use the divide-y utility class on DataList to add a separator between items.

PreviewCode

First NameJassie

Last NameBhatia

[email protected]

Phone1234567890

Address1234 Main St, Anytown, USA

API Reference#

DataList#

Root wrapper for label-value list layout.

DataListItem#

Single label-value row.

DataListItemLabel#

Label or key for the row.

DataListItemValue#

Value or content for the row.

[

Previous page

Context Menu ](/docs/components/context-menu)[

Next page

Date Input ](/docs/components/date-input)

On This Page

InstallationAnatomyUsageOrientationHorizontalVerticalExamplesInfo TipSeparatorAPI ReferenceDataListDataListItemDataListItemLabelDataListItemValue