DryUI — Human-led, agent-assisted UI

Recent deploys across environments
Environment	Commit	Author	Status	When
production	`a3f2c91`	@rianne	live	4m ago
staging	`8b7e044`	@marco	live	28m ago
preview-214	`c4d1920`	@priya	building	1m ago
production	`5fa8b01`	@rianne	rolled back	2h ago

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 { Table, Badge } from '@dryui/ui';
</script>

<Table.Root>
  <Table.Header>
    <Table.Row>
      <Table.Head>Name</Table.Head>
      <Table.Head>Status</Table.Head>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Alice</Table.Cell>
      <Table.Cell><Badge variant="soft">Active</Badge></Table.Cell>
    </Table.Row>
  </Table.Body>
</Table.Root>

Import options

Root package

import { Table } from '@dryui/ui'

Per-component subpath

import { Table } from '@dryui/ui/table'

API

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

Prop	Type	Description	Default	Required	Bindable
Table.Root
children	Snippet	Content rendered inside the component.	—	✓	—
Table.Header
children	Snippet	Content rendered inside the component.	—	✓	—
Table.Body
children	Snippet	Content rendered inside the component.	—	✓	—
Table.Footer
children	Snippet	Content rendered inside the component.	—	✓	—
Table.Row
children	Snippet	Content rendered inside the component.	—	✓	—
Table.Head
scope	colrow	—	'col'	—	—
children	Snippet	Content rendered inside the component.	—	✓	—
Table.Cell
children	Snippet	Content rendered inside the component.	—	✓	—
Table.Caption
children	Snippet	Content rendered inside the component.	—	✓	—

API

Table.Root

Table.Header

Table.Body

Table.Footer

Table.Row

Table.Head

Table.Cell

Table.Caption