Heros — App

SaaS app hero with a feature list and a phone mockup.

bun x bosia@latest add block heros/app

SaaS app hero with a feature list and a phone mockup. 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

Brand

Personal finance, finally calm

Every account, one honest number.

Connect your banks and watch the noise turn into a plan. Budgets that adjust, bills that never surprise you.

Auto-categorized spending

Smart rules learn how you spend

Bills predicted ahead

See what’s due before it lands

4.8 18k ratings

Total balance

$12,480

+$420 this week

Groceries -$84.20

Salary +$3,200

Subscriptions -$48.00

Dining out -$36.50

Install

bun x bosia@latest add block heros/app

Pulls the @lucide/svelte npm package for icons.

Usage

<script lang="ts">
	import App from "$lib/blocks/heros/app/block.svelte";
</script>

<App />

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/app/block.svelte