DryUI — Svelte 5 Component Library

More than a single circle

Use `Svg` for layered marks, badges, and tiny data visuals.

The wrapper keeps native SVG semantics, so gradients, labels, and crisp viewBox scaling all work without extra ceremony.

Poster mark

Compose gradients, panels, and motion-ready shapes inside a single semantic graphic.

Compass badge

A compact mark with clear direction and contrast.

Mini trend

Charts and diagnostics read cleanly at small sizes.

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

<Svg>Content</Svg>

Import options

Root package

import { Svg } from '@dryui/ui'

Per-component subpath

import { Svg } from '@dryui/ui/svg'

API

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

Prop	Type	Description	Default	Required	Bindable
children	Snippet	Content rendered inside the component.	—	—	—
viewBox	string	—	—	—	—

Use Svg for layered marks, badges, and tiny data visuals.

Styled quick start

Import options

API

Use `Svg` for layered marks, badges, and tiny data visuals.