DryUI — Human-led, agent-assisted UI

Constrained content

Container clamps content to a readable measure. Use it to wrap long-form text, articles, or any section that should stay narrow on wide viewports.

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

<Container>
  <p>Centered content</p>
</Container>

Import options

Root package

import { Container } from '@dryui/ui'

Per-component subpath

import { Container } from '@dryui/ui/container'

API

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

Prop	Type	Description	Default	Required	Bindable
size	smmdlgxlfull Preset container width, not an arbitrary CSS length.	Size preset affecting density, spacing, or typography.	'lg'	—	—
padding	boolean	—	true	—	—
children	Snippet	Content rendered inside the component.	—	✓	—