DryUI — Human-led, agent-assisted UI

Inbox
Pinned

Accessibility

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

import { List } from '@dryui/ui'

Per-component subpath

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

API

Props, CSS variables, and the public data attributes you can target when styling.

Prop	Type	Description	Default	Required	Bindable
List.Root
dense	boolean	—	false	—	—
disablePadding	boolean	—	false	—	—
children	Snippet	Content rendered inside the component.	—	✓	—
List.Item
interactive	boolean	—	false	—	—
disabled	boolean	Prevents interaction and applies disabled styling.	false	—	—
children	Snippet	Content rendered inside the component.	—	✓	—
List.ItemIcon
children	Snippet	Content rendered inside the component.	—	✓	—
List.ItemText
primary	Snippet	—	—	—	—
secondary	Snippet	—	—	—	—
children	Snippet	Content rendered inside the component.	—	—	—
List.Subheader
children	Snippet	Content rendered inside the component.	—	✓	—