# List Group A `<ul>` of rows, where each row is either a link or plain content. Bordered and flat variants are available. ## Example 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: ```html First Item Second Item Third Item ``` ## List Style Variant 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. ```html First Item Second Item Third Item ``` ## List Item Link The List Group always renders as an unordered list `

`. Add the `href` prop to a `ListItem` to render its content as a link `` inside the `
`. 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. ```html Non-clickable item Clickable link item ``` ## Sizes 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. ```html Small item Small item Extra large item ``` ## Rounded Corner 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. ```html ... ``` ## Animation Speed 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. ```html Slower hover transition Slower hover transition No transition ``` ## Customization 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`. ```html First Item Second Item Third Item ``` 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 `