Section Harga
Section harga selebar penuh — layout kolom tiga tingkat, tabel perbandingan paket, dan toggle paket tunggal.
Section harga siap pakai untuk halaman landing atau marketing. Masing-masing adalah Svelte
<section> mandiri selebar penuh yang dibangun hanya dari token semantik, sehingga gayanya
berganti di setiap tema — warna brand dipetakan ke --primary. Coba pengalih tema di atas preview.
Preview
Simple, transparent pricing
Start free and upgrade as you grow. No hidden fees, cancel anytime.
Starter
For side projects and getting started.
- Up to 3 projects
- Community support
- 1 GB storage
- Basic analytics
Pro
Most popularFor growing teams that ship often.
- Unlimited projects
- Priority support
- 50 GB storage
- Advanced analytics
- Custom domains
Enterprise
For organisations with scale and controls.
- SSO & SAML
- Dedicated support
- Unlimited storage
- Audit logs
- SLA
Find the plan that fits
| Features | Starter $0 | Pro $24 | Enterprise Custom |
|---|---|---|---|
| Projects | 3 | Unlimited | Unlimited |
| Storage | 1 GB | 50 GB | Unlimited |
| Advanced analytics | |||
| Custom domains | |||
| Priority support | |||
| SSO & SAML | |||
| Audit logs |
One plan, everything included
Billed monthly · cancel anytime
- Unlimited projects
- Priority support
- 50 GB storage
- Advanced analytics
- Custom domains
- Team roles & permissions
Install
bun x bosia@latest add block pricing/columns
bun x bosia@latest add block pricing/comparison
bun x bosia@latest add block pricing/simpleSemuanya menarik @lucide/svelte untuk ikon.
Blok-bloknya
columns— tiga kartu tingkat dengan paket "Paling populer" yang terangkat, checklist fitur, dan CTA.comparison— tabel berkolom-paket dengan header harga serta baris check / minus / nilai.simple— satu paket terpusat dengan toggle bulanan / tahunan, checklist dua kolom, dan CTA lebar.
Usage
<script lang="ts">
import Pricing from "$lib/blocks/pricing/columns/block.svelte";
</script>
<Pricing />Konten berada di array hardcoded di bagian atas masing-masing block.svelte — sunting tingkat,
harga, dan fitur agar sesuai produk Anda. Tingkat unggulan dan setiap aksen memakai primary,
jadi section mengikuti tema mana pun yang aktif.
Source
src/lib/blocks/pricing/*/block.svelte