Core UI

List

Display collections of related items in a structured format. Supports ordered and unordered lists.

Installation

Import 
import { List } from '@svelte-atoms/core/list';

Preset Configuration

Customize the list appearance using presets

You can customize the default styles for List components by defining presets in your configuration:

Examples

Explore different list variations

Basic List

Simple unordered list

  • Item 1
  • Item 2
  • Item 3
Code 
<List.Root>
  <List.Item>Item 1</List.Item>
  <List.Item>Item 2</List.Item>
  <List.Item>Item 3</List.Item>
</List.Root>

Ordered List

Numbered list for sequential items

  • First step
  • Second step
  • Third step
Code 
<List.Root ordered>
  <List.Item>First step</List.Item>
  <List.Item>Second step</List.Item>
  <List.Item>Third step</List.Item>
</List.Root>

Interactive List

Clickable list items

  • Clickable Item 1
  • Clickable Item 2
Code 
<List.Root>
  <List.Item clickable onclick={() => alert('Item 1 clicked')}>
    Clickable Item 1
  </List.Item>
  <List.Item clickable onclick={() => alert('Item 2 clicked')}>
    Clickable Item 2
  </List.Item>
</List.Root>

Grouped List

Organize items with titles and dividers

    Settings

  • Profile
  • Preferences

    • Account

  • Billing
  • Security
Code 
<List.Root>
  <List.Title>Settings</List.Title>
  <List.Group>
    <List.Item>Profile</List.Item>
    <List.Item>Preferences</List.Item>
  </List.Group>
  <List.Divider />
  <List.Title>Account</List.Title>
  <List.Group>
    <List.Item>Billing</List.Item>
    <List.Item>Security</List.Item>
  </List.Group>
</List.Root>

List with Icons

Add icons to list items

  • Dashboard
  • Profile
  • Settings
Code 
<List.Root>
  <List.Item>
    <svg class="mr-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
        d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
    </svg>
    Dashboard
  </List.Item>
  <List.Item>
    <svg class="mr-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
        d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
    </svg>
    Profile
  </List.Item>
  <List.Item>
    <svg class="mr-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
        d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
    </svg>
    Settings
  </List.Item>
</List.Root>

API Reference

List.Root

Container for list items.

Prop
Type
Default
Description
ordered
boolean
false
Use ordered list (ol) instead of unordered (ul)
preset
string
'list'
Preset configuration key
class
string
''
Additional CSS classes

List.Item

Individual list item.

Prop
Type
Default
Description
clickable
boolean
false
Make item interactive with hover/focus states
preset
string
'list.item'
Preset configuration key
class
string
''
Additional CSS classes

List.Group

Groups related list items together.

Prop
Type
Default
Description
preset
string
'list.group'
Preset configuration key
class
string
''
Additional CSS classes

List.Title

Title or heading for a list group.

Prop
Type
Default
Description
as
string
'h3'
HTML element to render
preset
string
'list.title'
Preset configuration key
class
string
''
Additional CSS classes

List.Divider

Visual separator between list sections.

Prop
Type
Default
Description
vertical
boolean
false
Render as vertical divider
preset
string
'list.divider'
Preset configuration key
class
string
''
Additional CSS classes

Accessibility

Built-in Accessibility Features

  • • Use semantic ul or ol elements
  • • Ensure interactive items are keyboard accessible
  • • Proper ARIA attributes for custom lists
  • • Screen reader friendly structure
Previous
Link
Next
Menu