DryUI — Human-led, agent-assisted UI

Overview content

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

<Tabs.Root bind:value={activeTab}>
  <Tabs.List>
    <Tabs.Trigger value="one">Tab 1</Tabs.Trigger>
    <Tabs.Trigger value="two">Tab 2</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="one">First panel</Tabs.Content>
  <Tabs.Content value="two">Second panel</Tabs.Content>
</Tabs.Root>

Import options

Root package

import { Tabs } from '@dryui/ui'

Per-component subpath

import { Tabs } from '@dryui/ui/tabs'

API

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

Prop	Type	Description	Default	Required	Bindable
Tabs.Root
value	string	Bindable current tab value for controlled tab interfaces.	''	—	—
orientation	horizontalvertical	Horizontal or vertical layout direction.	'horizontal'	—	—
activationMode	automaticmanual	—	'automatic'	—	—
children	Snippet	Content rendered inside the component.	—	✓	—
Tabs.List
children	Snippet	Content rendered inside the component.	—	✓	—
Tabs.Trigger
value	string	Tab identifier that activates the matching content panel.	—	✓	—
disabled	boolean	Prevents interaction and applies disabled styling.	—	—	—
size	smmdlg	Size preset affecting density, spacing, or typography.	—	—	—
children	Snippet	Content rendered inside the component.	—	✓	—
Tabs.Content
value	string	Current controlled or bindable value.	—	✓	—
children	Snippet	Content rendered inside the component.	—	✓	—