SDAIA
SDAIA LogoSDAIA Logo
ComponentsList
IntroductionInstallationFAQBrands
ColorsTypographySpacingRadiusGrid layoutsAll Tokens
All Components
AccordionActivityArea ChartAudio PlayerAvatarAvatarGroupCarousel ImageChartChipCode SnippetColumn ChartContext MenuDigital StampDividerDonut ChartDraggable ListDropdownEmpty StateFiltrationFooterImage ViewerLine ChartListMedia GalleryMenuMetricNav BarNav HeaderNumberPDF ViewerPie ChartPopoverProgress CircleQuoteRadial StepperScatterSecond Nav HeaderSlideout MenuStructured ListTableTable of ContentTree ViewVertical TabsVideo Player
BreadcrumbButtonButton MenuButton SplitContent SwitcherDate PickerFloating ButtonHorizontal TabsLinkModalPaginationRadio ButtonSwitchTag
AutocompleteCheckboxFile UploadNumber InputRange SliderRich Text EditorSelectSignatureSliderText AreaText Input
AlertsBadgeCardFeedbackFeedback OverviewHelp IconLoading IndicatorNotification BannerNotification PopupNotificationsProgress BarRatingRating OverviewSkeletonSkeleton/AvatarsTooltip
Sdaia Logo Animation
Sdaia Touch ButtonsSdaia Touch Switch

List

A list component available in Small, Medium, and Large sizes. Supports grouped list items and RTL layout.

Loading preview…
1<List size="medium" avatar avatarNode={<Avatar />} textLead leadText="Sara Al-Mansouri" textTrailing trailingText="Design" divider />

Installation

npx sdaia-ui@latest add list

Usage

import { List } from "@/components/ui/list"
<List size="medium" />

Examples

Default

List with state Default.

Loading preview…
1'use client';
2
3import { List } from 'sdaia-ui';
4
5export default function ListDefault() {

Sizes

List available in Small, Medium, and Large sizes.

Loading preview…
1'use client';
2
3import { List } from 'sdaia-ui';
4
5export default function ListStates() {

API Reference

DropdownListHeaderProps

Props for the DropdownListHeader component.

Prop

Type

Default

Required

type

'User' | 'Header'

'User'

optional

avatarSrc

string

-

optional

avatarAlt

string

-

optional

name

string

-

optional

email

string

-

optional

label

string

-

optional

className

string

-

optional
Line Chart
Media Gallery
On this page

Team Members

12 unread
SM
Sara Al-Mansouri
Design
AR
Ahmed Al-Rashidi
Engineering
FZ
Fatima Al-Zahrani
Product
KO
Khalid Al-Otaibi
Data
LH
Lina Al-Harbi
HR
Showing 5 of 12 members
Text content
Text content
Text content
Text content
Text content
Text content
Text content
Text content