DryUI — Human-led, agent-assisted UI

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

<Chip variant="soft" color="blue">Policy friendly</Chip>

Import options

Root package

import { Chip } from '@dryui/ui'

Per-component subpath

import { Chip } from '@dryui/ui/chip'

API

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

Prop	Type	Description	Default	Required	Bindable
selected	boolean	Whether the current item is selected.	—	—	—
disabled	boolean	Prevents interaction and applies disabled styling.	—	—	—
variant	solidoutlinesoft	Visual style preset for the component.	'soft'	—	—
color	grayblueredgreenyellowpurpleorangeinfosuccesswarningdanger	Semantic color or tone applied to the component.	'gray'	—	—
size	smmd	Size preset affecting density, spacing, or typography.	'sm'	—	—
href	string	Destination URL when the component renders as a link.	—	—	—
rel	string	Relationship between the current document and the linked resource.	—	—	—
target	string	Browsing context used for link navigation.	—	—	—
download	boolean \| string	Requests download behavior when the component renders as a link.	—	—	—
type	buttonsubmitreset	HTML type attribute or component-specific type selector.	'button'	—	—
onclick	(event: MouseEvent) => void	—	—	—	—
children	Snippet	Content rendered inside the component.	—	✓	—