Components / Foundations

Spacer

Component

A customizable spacer component for adding vertical or horizontal space with optional decorative borders.

Preview

Usage

API reference

Live preview

Interactive example

Loading example…

Usage

Import the component, then make it your own.

ComponentSpacer

svelte

<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { Spacer } from "sveltekit-ui"
</script>

<p>Account details</p>
<Spacer mt={2} mb={2} />
<p>Notification preferences</p>

API reference

Props accepted by the component.

8 entries in properties

Property	Type	Default	Description
`is_vert`	`boolean`	`false`	Determines whether the spacer is vertical (true) or horizontal (false).
`ml`	`number`	`0`	Margin left in rem.
`mr`	`number`	`0`	Margin right in rem.
`mt`	`number`	`0`	Margin top in rem.
`mb`	`number`	`0`	Margin bottom in rem.
`sw`	`number`	`0.1`	Stroke width of the spacer's border in rem.
`color`	`string`	`var(--shadow7-t)`	Color of the spacer's border.
`min_length`	`number`	`2`	Minimum length of the spacer in rem.