List Group

To use the List Group component, import it from the theui-svelte library. Below is a simple example demonstrating how to use the List Group:

<script>
  import { ListGroup, ListItem } from "theui-svelte";
</script>

<ListGroup>
  <ListItem>First Item</ListItem>
  <ListItem>Second Item</ListItem>
  <ListItem>Third Item</ListItem>
</ListGroup>

The variant prop in the List Group component allows you to control the overall style of the list. It provides two options:

• bordered: This style adds borders around each list item, giving a defined and structured look to the list. It is useful when you want to visually separate items clearly.
• flat: This style removes borders, resulting in a clean, minimalist design. It's ideal for cases where a simple and unobtrusive list presentation is preferred.

By default, the variant is set to "bordered". You can easily switch between these styles to match the design needs of your application.

<ListGroup variant="flat">
  <ListItem>First Item</ListItem>
  <ListItem>Second Item</ListItem>
  <ListItem>Third Item</ListItem>
</ListGroup>

The List Group always renders as an unordered list <ul>, and each ListItem is a <li>. Add the href prop to a ListItem to render its content as a link <a> inside the <li>. Any other attributes you add to a link item, like target, are passed to the link. Items without href stay as plain list items, so you can mix static and clickable content.

<ListGroup>
  <ListItem>Non-clickable item</ListItem>
  <ListItem href="/link">Clickable link item</ListItem>
</ListGroup>

The size prop controls the padding of the list items. Available values are "sm", "md" (default), "lg" and "xl". When set on the ListGroup, all the items inherit it. You can also set size on an individual ListItem to override the group's size.

<ListGroup size="sm">
  <ListItem>Small item</ListItem>
  <ListItem>Small item</ListItem>
  <ListItem size="xl">Extra large item</ListItem>
</ListGroup>

The rounded prop sets the border radius of the List Group. Available values are "none", "sm", "md" (default), "lg", "xl", "2xl" and "full". It applies to the bordered variant only; a flat List Group has no rounded corners.

<ListGroup rounded="xl"> ... </ListGroup>

The animationSpeed prop controls the transition speed of the item hover effect. Available values are "none", "slower", "slow", "normal" (default), "fast" and "faster". Set it on the ListGroup to apply it to all items, or on a ListItem to override it for that item.

<ListGroup animationSpeed="slower">
  <ListItem>Slower hover transition</ListItem>
  <ListItem>Slower hover transition</ListItem>
  <ListItem animationSpeed="none">No transition</ListItem>
</ListGroup>

Use the class attribute on the ListGroup to style the list container. To style every item at once, use the itemClasses prop on the ListGroup. To style a single item, add the class attribute to that ListItem; it overrides itemClasses.

<ListGroup class="border-brand-300" itemClasses="text-brand-600 hover:bg-brand-50">
  <ListItem>First Item</ListItem>
  <ListItem class="font-bold">Second Item</ListItem>
  <ListItem>Third Item</ListItem>
</ListGroup>

Anything else you pass reaches the element itself, so an id, a title, a data-* attribute or an event handler all work the way they would on a <ul>.

List Group

List Item