List
Lists display collections of related information with optional media, badges and actions.
Import
import { List } from "@shivms/ui";Sizes
Extra Small
Dashboard
Overview of your workspace
Projects
Manage all projects
Reports
View generated reports
Small
Dashboard
Overview of your workspace
Projects
Manage all projects
Reports
View generated reports
Medium
Dashboard
Overview of your workspace
Projects
Manage all projects
Reports
View generated reports
Large
Dashboard
Overview of your workspace
Projects
Manage all projects
Reports
View generated reports
Extra Large
Dashboard
Overview of your workspace
Projects
Manage all projects
Reports
View generated reports
Variants
Default
Dashboard
Overview of your workspace
Projects
Manage all projects
Reports
View generated reports
Bordered
Dashboard
Overview of your workspace
Projects
Manage all projects
Reports
View generated reports
Filled
Dashboard
Overview of your workspace
Projects
Manage all projects
Reports
View generated reports
Ghost
Dashboard
Overview of your workspace
Projects
Manage all projects
Reports
View generated reports
Orientation
Vertical
Dashboard
Overview of your workspace
Projects
Manage all projects
Reports
View generated reports
Horizontal
Dashboard
Overview of your workspace
Projects
Manage all projects
Reports
View generated reports
Alignment
Start
Dashboard
Overview of your workspace
Projects
Manage all projects
Reports
View generated reports
Center
Dashboard
Overview of your workspace
Projects
Manage all projects
Reports
View generated reports
End
Dashboard
Overview of your workspace
Projects
Manage all projects
Reports
View generated reports
Stretch
Dashboard
Overview of your workspace
Projects
Manage all projects
Reports
View generated reports
Justify Content
Start
Dashboard
Overview of your workspace
Projects
Manage all projects
Reports
View generated reports
Center
Dashboard
Overview of your workspace
Projects
Manage all projects
Reports
View generated reports
End
Dashboard
Overview of your workspace
Projects
Manage all projects
Reports
View generated reports
Between
Dashboard
Overview of your workspace
Projects
Manage all projects
Reports
View generated reports
Around
Dashboard
Overview of your workspace
Projects
Manage all projects
Reports
View generated reports
Evenly
Dashboard
Overview of your workspace
Projects
Manage all projects
Reports
View generated reports
Dividers
None
Dashboard
Overview of your workspace
Projects
Manage all projects
Reports
View generated reports
Solid
Dashboard
Overview of your workspace
Projects
Manage all projects
Reports
View generated reports
Dashed
Dashboard
Overview of your workspace
Projects
Manage all projects
Reports
View generated reports
Wrap
No Wrap
Dashboard
Overview of your workspace
Projects
Manage all projects
Reports
View generated reports
Wrap
Dashboard
Overview of your workspace
Projects
Manage all projects
Reports
View generated reports
States
Default
Dashboard
Overview of your workspace
Projects
Manage all projects
Reports
View generated reports
Loading
Dashboard
Overview of your workspace
Projects
Manage all projects
Reports
View generated reports
Disabled
Dashboard
Overview of your workspace
Projects
Manage all projects
Reports
View generated reports
List Items
Basic
Dashboard
Overview of your workspace
Projects
Manage all projects
Reports
View generated reports
With Icon
Users
Manage team members
Messages
Inbox and notifications
Settings
Application preferences
With Avatar
AS
Aditya Sharma
Administrator
RK
Rohit Kumar
Developer
PM
Priya Mehta
Designer
With Badge
Orders
Pending approvals
12
Messages
Unread conversations
8
Tasks
Assigned today
New
With Action
Profile
Manage your account
Billing
Invoices and payments
Security
Passwords and access
Examples
Contacts
AS
Aditya Sharma
aditya@example.com
Online
RK
Rohit Kumar
rohit@example.com
Away
PM
Priya Mehta
priya@example.com
Busy
Settings
General
Application settings
Notifications
Manage email alerts
Users
Roles and permissions