Heros — Apparel
Apparel hero with color swatches and a size picker beside a model.
bun x bosia@latest add block heros/apparelApparel hero with color swatches and a size picker beside a model. A self-contained, full-width <section> built from semantic tokens only, so it restyles across all 18 themes — the brand colour maps to --primary.
Preview
B
BrandNew arrivals Organic cotton
The everyday tee, finally done right.
Heavyweight 240gsm jersey, pre-shrunk and built to keep its shape after wash one hundred. Cut for a clean, boxy fit.
Color
Size
Free returns within 30 days
In stock · ships today
Order before 4pm
240gsm · pre-shrunk
Install
bun x bosia@latest add block heros/apparelPulls the @lucide/svelte npm package for icons.
Usage
<script lang="ts">
import Apparel from "$lib/blocks/heros/apparel/block.svelte";
</script>
<Apparel />Drop it at the top of a route. Any interactive bits (size / color / age pickers, address or email inputs) are cosmetic local $state — wire them to your own data. Edit block.svelte to swap copy and the Unsplash images.
Source
src/lib/blocks/heros/apparel/block.svelte