Card — Utility & System

Kartu notifikasi, cuaca, acara, file, tugas, penyimpanan, kode, peta, integrasi, polling, stepper, dan chat.

Kategori terluas — kartu UI sistem dan produk. Warna status mengikuti konvensi shadcn (emerald sukses, amber peringatan, blue info, destructive bahaya) sehingga terbaca benar di mode terang dan gelap, sementara warna brand dipetakan ke --primary dan mengikuti tema yang aktif.

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

Setiap kartu diinstal sendiri-sendiri:

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

Masing-masing menarik paket npm @lucide/svelte untuk ikon.

Usage

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

<Task />

Daftar centang tugas, switch integrasi, dan pilihan polling hanyalah $state lokal kosmetik — sambungkan ke data dan handler Anda sendiri.