Spacer

@sushindustries/ui

Vertical space on the scale, optionally with a rule and a label. Built for Markdown.

5 min read
View as MarkdownEdit on GitHub
Viewport width
Phone22remthe floor, the narrowest this promises to work at
tanstacktanstack add https://adamjurek.com/r/tanstack/spacer.jsonshadcnpnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/spacer.json

The argument against this component

Space should come from the things being spaced. A component that sets its own bottom margin knows how far it sits from the next thing, and a separate element whose only job is to be empty is usually a sign that something above it is missing a rule.

Inside a component, that argument is right, and this is the wrong tool.

Where this is used

WhereWhat for
Any .md on this sitethe ::start:spacer block
packages/ui/docs/nav-bar/index.mdthe labelled break before "Where it is used"
templates/post.mdin the template, so a new post starts with it available

Install

tanstack add https://adamjurek.com/r/tanstack/spacer.json
shell
pnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/spacer.json
shell
pnpm add @sushindustries/ui @sushindustries/atoms
shell

What you get

Version0.1.0
Categorylayout · Page structure
Filesspacer.tsx, grid.tsx
DependenciesNone
Tagsmarkdown, spacing, no-deps

No runtime dependencies

It brings nothing with it beyond the stylesheet.

Used byGridGridA responsive grid with no breakpoints in it. One number decides the column count at every width.@sushindustries/ui · layout