Components
H1
A themed native h1 heading with snippets, bindable visibility, and transitions.
Props
Native attributes and event handlers are forwarded to the underlying h element unless
handled by the component.
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | undefined | Content snippet rendered by the component. |
class | string | '' | Tailwind classes merged with the theme and variants. |
element | HTMLHeadingElement | null | null | Bindable reference to the underlying DOM element. |
inTransition | TransitionProps | undefined | Overrides the opening transition. |
isVisible | boolean | true | Bindable visibility state. |
outTransition | TransitionProps | undefined | Overrides the closing transition. |
theme | Theme | global theme | Optional local theme override. |
transition | TransitionProps | [noopTransition, {}] | A Svelte transition function and its options. |
variants | string[] | [] | Local variant names or theme references such as button.base. |
Default usage
Import H1 from sveltewind/components. This example shows its default styling in a usable context.
Section heading
Loading...Examples
Theme variants
Every variant available for H1 in the built-in themes is shown below.
accent — Apply the accent variant.
Section heading
Loading...muted — Apply the muted variant.
Section heading
Loading...uppercase — Apply the uppercase variant.
Section heading
Loading...Class overrides
Apply font-semibold tracking-wide text-primary-600 dark:text-primary-400 locally.
Section heading
Loading...Props and behavior
Bind isVisible and toggle it with a button to control whether the component is rendered.
Section heading
Loading...Content and values
Provide different text, child content, or definitions inside the required parent context.
Your own content
Loading...Custom classes
Use class to merge Tailwind utilities with the component theme.
Section heading
Loading...