Dashral Pro is hereSee pricing

Dashral

ListNew

Rows of people, files or things: a picture, a title, details and actions.

$ pnpm dlx shadcn@latest add @dashral/list
  • MPMaya Pratama
    Maya Pratamamaya@driftbox.example
    Owner
  • ANArif Nugroho
    Arif Nugrohoarif@driftbox.example
    Admin
  • SDSinta Dewi
    Sinta Dewisinta@driftbox.example
    Member
  • DLDaniel Lee
    Daniel Leedaniel@driftbox.example
    Member

Installation

$ pnpm dlx shadcn@latest add @dashral/list

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Or by its full URL: https://dashral.com/r/list.json

Usage

example.tsx
import { Avatar } from "@/components/dashral/avatar"
import { List } from "@/components/dashral/list"

<List
  variant="card"
  items={members.map((member) => ({
    media: <Avatar name={member.name} />,
    title: member.name,
    description: member.email,
    meta: member.role,
    href: `/team/${member.id}`,
  }))}
/>

Using the npm package? Import from @dashral/ui/components/list instead, here and in the examples; the rest is the same.

Examples

Settings links

Whole rows that link, with a chevron; one current, one disabled.

  • ProfileYour name, photo and email
  • SecurityPassword and two-factor sign-in
  • NotificationsWhat we tell you, and how
  • BillingPlan, invoices and payment method
    Pro
  • API keysAvailable on the Team plan

Active sessions

size="sm", a button per row, and an empty state once they're all signed out.

  • MacBook Pro · ChromeJakarta, ID ·
    This device
  • iPhone 16 · SafariJakarta, ID ·
  • iPad Air · SafariBandung, ID ·

API reference

List

Also takes every prop of <ul>(opens in a new tab).

PropTypeDefault
items{ title, description?, media?, meta?, actions?, href?, onClick?, active?, disabled?, key? }[]

The rows. Required.

—
variant"default" | "card"

Rows on the page, or inside a bordered card.

"default"
dividedboolean

Lines between the rows.

true
size"sm" | "default"

sm for popovers, sidebars and dense panels.

"default"
emptyReactNode

Shown in place of the rows when there are none.

—
linkAsElementType

Your router's link, for rows with href.

"a"
classNames{ item, media, title, description, meta, actions }

Classes for each part.

—
classNamestring

Extra classes, merged with cn() so yours win.

—

Keyboard

KeysAction
TabTo each row's link or button, then its own actions

Accessibility

  • A <ul role="list"> (Safari keeps it a list without bullets). A row with href or onClick has one link or button, its title, stretched over the row; its actions stay separate controls.
  • The current row has aria-current; a disabled row has no link.
  • It restacks by its own width (a container query), not the screen's, so it works in narrow cards and sidebars.