Components

Pre

A native pre element for preserving whitespace.

Props

Native attributes and event handlers are forwarded to the underlying pre 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`	HTMLPreElement \| 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.

Import Pre from sveltewind/components. This example shows its default styling in a usable context.

const hello = 'world';

+page.svelte

Loading...

Every variant available for Pre in the built-in themes is shown below.

wrap — Apply the wrap variant.

const hello = 'world';

+page.svelte

Loading...

compact — Apply the compact variant.

const hello = 'world';

+page.svelte

Loading...

scrollable — Apply the scrollable variant.

const hello = 'world';

+page.svelte

Loading...

Apply rounded-xl border border-primary-500/40 p-4 locally.

const hello = 'world';

+page.svelte

Loading...

Bind isVisible and toggle it with a button to control whether the component is rendered.

const hello = 'world';

+page.svelte

Loading...

Provide different text, child content, or definitions inside the required parent context.

Your project content

+page.svelte

Loading...

Use class to merge Tailwind utilities with the component theme.

const hello = 'world';

+page.svelte

Loading...