⌘K

List

Demo

Default

Tutorials
Step-by-step guides to help you get started with Alocite Framework.
API Reference
Detailed information about Alocite's API endpoints and usage.
Community
Connect with other Alocite users, share ideas, and get help.
Updates
Latest news, features, and updates from the Alocite team.

Divider

Tutorials
Step-by-step guides to help you get started with Alocite Framework.
API Reference
Detailed information about Alocite's API endpoints and usage.
Community
Connect with other Alocite users, share ideas, and get help.
Updates
Latest news, features, and updates from the Alocite team.

Cards

Tutorials
Step-by-step guides to help you get started with Alocite Framework.
API Reference
Detailed information about Alocite's API endpoints and usage.
Community
Connect with other Alocite users, share ideas, and get help.
Updates
Latest news, features, and updates from the Alocite team.

Props

Prop	Type	Description
`variant`	`'default' \| 'divider' \| 'cards'` (optional)	The style variant of the List. Options are 'default', 'divider', or 'cards'.
`children`	`React.ReactNode \| React.ReactNode[]`	The items to be rendered in the list.
`classNames`	`{ root?: string, item?: string }` (optional)	Custom class names for different parts of the List.

Styles

This component allows for custom styles via the classNames prop:

root: CSS class for styling the overall List component.
item: CSS class for styling individual list items. Different styles are applied based on the variant prop:
- default: Standard list style.
- divider: List items separated by dividers.
- cards: List items styled as cards with borders and shadows.

Previous

Next