Cards — Utility & System

Notification, weather, event, file, task, storage, code, map, integration, poll, stepper, and chat cards.

The widest category — system and product UI cards. Status colours follow the shadcn convention (emerald success, amber warning, blue info, destructive danger) so they read correctly in light and dark, while the brand colour maps to --primary and follows the active theme.

Preview

Payment received 2m

Invoice #2041 was paid by Northwind Studio.

Lisbon

Mostly sunny

24°

Mon 24°

Tue 21°

Wed 18°

Thu 19°

Jun

In-person

Design Systems Meetup

6:30 PM · 2h Second Home, Lisbon

ARLPPS

+38 going

Brand Guidelines.pdf

4.2 MB · PDF

Downloading…78%

In progress

Launch Bosia v2

2/3

82%

Storage

164 GB of 200 GB

Documents 42 GB

Media 28 GB

Other 12 GB

theme.css

:root {
  --primary: 263 100% 74%;
  --radius:  0.875rem;
}

Second Home

Mercado, Lisbon · 0.8 km

GitHub Connected

Sync issues to cards

Turn pull requests and issues into live task cards on your board.

Enabled

Live poll

Favourite theme?

1,284 votes · 2h left

Get set up

2 of 4 complete

Create workspace

Pick a theme

In progress

Invite the team

Ship your first card

Ana Ruiz

Active now

Did the new theme tokens land?

Yep — all eighteen skins from one stylesheet now.

Incredible. Shipping it.

Message…

Install

Each card installs on its own:

bun x bosia@latest add block cards/notification
bun x bosia@latest add block cards/weather
bun x bosia@latest add block cards/event
bun x bosia@latest add block cards/file
bun x bosia@latest add block cards/task
bun x bosia@latest add block cards/storage
bun x bosia@latest add block cards/code
bun x bosia@latest add block cards/map
bun x bosia@latest add block cards/integration
bun x bosia@latest add block cards/poll
bun x bosia@latest add block cards/stepper
bun x bosia@latest add block cards/chat

Each pulls the @lucide/svelte npm package for icons.

Usage

<script lang="ts">
	import Task from "$lib/blocks/cards/task/block.svelte";
</script>

<Task />

The task checklist, integration switch, and poll selection are cosmetic local $state — wire them to your own data and handlers.