Theme

List

display @dryui/ui Compound

Structured list with items, icons, and subheaders

listitemicondense

Start Here

Start from the smallest working snippet, then move to interactive examples and the full API contract below.

Styled quick start

Copy this entrypoint first. It includes the imports required to get the component on screen.

svelte
<script lang="ts">
  import '@dryui/ui/themes/default.css';
  import '@dryui/ui/themes/dark.css';
  import { List } from '@dryui/ui';
</script>

<List.Root>
  <List.Item>...</List.Item>
  <List.ItemIcon>...</List.ItemIcon>
  <List.ItemText>...</List.ItemText>
  <List.Subheader>...</List.Subheader>
</List.Root>

Import options

Root package

ts
import { List } from '@dryui/ui'

Per-component subpath

ts
import { List } from '@dryui/ui/list'

Customize

Use the interactive examples to see common variants, states, and composition patterns before building your own.

Default

  • Inbox
  • Drafts
  • Sent
svelte
<List.Root>
  <List.Item>
    <List.ItemText>
      {#snippet primary()}Inbox{/snippet}
    </List.ItemText>
  </List.Item>
  <List.Item>
    <List.ItemText>
      {#snippet primary()}Drafts{/snippet}
    </List.ItemText>
  </List.Item>
  <List.Item>
    <List.ItemText>
      {#snippet primary()}Sent{/snippet}
    </List.ItemText>
  </List.Item>
</List.Root>

Interactive with Secondary Text

  • Inbox 3 unread messages
  • Starred 12 items
svelte
<List.Root>
  <List.Item interactive>
    <List.ItemText>
      {#snippet primary()}Inbox{/snippet}
      {#snippet secondary()}3 unread messages{/snippet}
    </List.ItemText>
  </List.Item>
  <List.Item interactive>
    <List.ItemText>
      {#snippet primary()}Starred{/snippet}
      {#snippet secondary()}12 items{/snippet}
    </List.ItemText>
  </List.Item>
</List.Root>

Dense with Subheader

  • Profile
  • Account
  • Notifications (coming soon)
svelte
<List.Root dense>
  <List.Subheader>Settings</List.Subheader>
  <List.Item interactive>
    <List.ItemText>
      {#snippet primary()}Profile{/snippet}
    </List.ItemText>
  </List.Item>
  <List.Item interactive>
    <List.ItemText>
      {#snippet primary()}Account{/snippet}
    </List.ItemText>
  </List.Item>
  <List.Item interactive disabled>
    <List.ItemText>
      {#snippet primary()}Notifications (coming soon){/snippet}
    </List.ItemText>
  </List.Item>
</List.Root>

Structure

Compound components always start with List.Root. Use this structure block to understand required wrappers before you wire state or styling.

List.Root
  List.Item
  List.ItemIcon
  List.ItemText
  List.Subheader
List.Root List.ItemList.ItemIconList.ItemTextList.Subheader

Compose

The full API contract lives here: props, CSS variables, and the public data attributes you can target when styling.

Compound component. Start with List.Root, then add only the parts you need.

List.ItemList.ItemIconList.ItemTextList.Subheader

List.Root

Prop Type Default Required Bindable
dense
boolean
— — —
disablePadding
boolean
— — —
children
Snippet
— ✓ —

Forwards <ul> attributes via rest props. Common examples: id, style, aria-labelledby.

List.Item

Prop Type Default Required Bindable
interactive
boolean
— — —
disabled
boolean
— — —
children
Snippet
— ✓ —

Forwards <li> attributes via rest props. Common examples: id, role, value.

List.ItemIcon

Prop Type Default Required Bindable
children
Snippet
— ✓ —

Forwards <div> attributes via rest props. Common examples: id, style, role.

List.ItemText

Prop Type Default Required Bindable
primary
Snippet
— — —
secondary
Snippet
— — —
children
Snippet
— — —

Forwards <div> attributes via rest props. Common examples: id, style, role.

List.Subheader

Prop Type Default Required Bindable
children
Snippet
— ✓ —

Forwards <li> attributes via rest props. Common examples: id, role, value.