Components
Main
A semantic main element for the primary content of a page.
Props
Native attributes and event handlers are forwarded to the underlying main 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 | HTMLElement | 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 Main from sveltewind/components. This example shows its default styling in a usable context.
Loading...Examples
Theme variants
Every variant available for Main in the built-in themes is shown below.
center — Apply the center variant.
Loading...column — Apply the column variant.
Loading...grid — Apply the grid variant.
Loading...row — Apply the row variant.
Loading...stack — Apply the stack variant.
Loading...Class overrides
Apply rounded-xl border border-primary-500/40 p-4 locally.
Loading...Props and behavior
Bind isVisible and toggle it with a button to control whether the component is rendered.
Loading...Content and values
Provide different text, child content, or definitions inside the required parent context.
Loading...Custom classes
Use class to merge Tailwind utilities with the component theme.
Loading...