Shards React
Shards React

Shards React


List Group

List groups allow you to display series of content.

Basic Example

You can create list groups using the ListGroup component with the ListGroupItem sub-component.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
import React from "react";
import { ListGroup, ListGroupItem } from "shards-react";

export default function ListGroupDemo() {
  return (
      <ListGroupItem>Cras justo odio</ListGroupItem>
      <ListGroupItem>Dapibus ac facilisis in</ListGroupItem>
      <ListGroupItem>Morbi leo risus</ListGroupItem>
      <ListGroupItem>Porta ac consectetur ac</ListGroupItem>
      <ListGroupItem>Vestibulum at eros</ListGroupItem>


The following props are available for the List Group component.

classNameThe class name.String-No
flushWhether the list group should be flushed, or not.Bool-No
smallWhether the list group is small, or not.Bool-No
tagThe component's tag type.FuncString"ul"No


The following subcomponents are available for the ListGroup component.


activeWhether it is active, or not.Bool-No
disabledWhether it is disabled, or not.Bool-No
themeThe theme color.String-No
actionWhether it is an action item, or not.Bool-No
classNameThe class name.String-No
tagThe component's tag type.FuncString"li"No


classNameThe class name.Any-No
tagThe component's tag type.FuncString"h5"No


classNameThe class name.String-No
tagThe component's tag type.FuncString"p"No