Logoapsara
DocumentationExamples
ListA component for displaying information in a key-value pair list format.
Preview
    User Information
  • StatusActive
  • TypePremium Account
  • CreatedApril 24, 2024
Usage
The List component display information in a structured format with labels and values.
Installation
Install the component from your command line. 
npm install @raystack/apsara

import { List } from '@raystack/apsara/v1'

<List.Root maxWidth="600px">
  <List.Header>User Information</List.Header>
  <List.Item align="center">
    <List.Label minWidth="88px">Status</List.Label>
    <List.Value>Active</List.Value>
  </List.Item>
</List.Root>
List Props
List.Root Props
  • maxWidth: Maximum width of the list container (string | number)
  • className: Additional CSS class names
List.Header Props
  • children: Content to be displayed in the header
  • className: Additional CSS class names
List.Item Props
  • align: Alignment of the item content ("start" | "center" | "end", default: "start")
  • children: Content to be displayed in the item
  • className: Additional CSS class names
List.Label Props
  • minWidth: Minimum width of the label (string)
  • children: Content to be displayed in the label
  • className: Additional CSS class names
List.Value Props
  • children: Content to be displayed in the value
  • className: Additional CSS class names
Accessibility
The List component implements proper ARIA attributes for accessibility:
  • List.Root has role="list" and aria-label
  • List.Item has role="listitem"
  • List.Header has role="heading" and aria-level={3}