List

The List component is a flexible and interactive UI element used to display a series of items, each potentially containing text, icons, and other elements. It supports various subcomponents like ListItem, ListItemButton, ListItemIcon, and more, allowing for a highly customizable and accessible list structure.

Installation

Install the package

npm i @start-base/start-ui

Add the styles

To use the React form elements styles in a Next.js project, import the styles in your layout.tsx file.

app/layout.tsx

import "@start-base/start-ui/styles.css";

Import the component

import List from '@start-base/start-ui/List';
import ListSubheader from '@start-base/start-ui/ListSubheader';
import ListItem from '@start-base/start-ui/ListItem';
import ListItemButton from '@start-base/start-ui/ListItemButton';
import ListItemIcon from '@start-base/start-ui/ListItemIcon';
import ListDivider from '@start-base/start-ui/ListDivider';

Usages

Mailbox

Grid Popover