Primitive

Button

Interactive button component with multiple variants, sizes, and states. Accessible by default.

Live Preview
Primary Action Secondary Ghost Small Large
Usage 
<webui-button variant="primary" size="md">
  Click me
</webui-button>

Props

PropTypeDefaultDescription
variantstringprimaryprimary | secondary | ghost | outline
sizestringmdsm | md | lg
disabledbooleanfalseDisables interaction
Layout

Card

Container component with elevation and border variants. Use for grouping related content.

Elevated Card

This card uses a subtle shadow for depth perception.

Bordered Card

Clean 1px border with flat background.
Usage 
<webui-card variant="elevated">
  <!-- Your content here -->
</webui-card>
Form

Input

Text input field with label, placeholder, and validation states.

Live Preview
Usage 
<webui-input label="Username" placeholder="johndoe">
</webui-input>
Form

Toggle

On/off switch component with smooth transitions and accessible states.

Live Preview
Usage 
<webui-toggle checked>
</webui-toggle>