Blocks

Apa itu blocks

Primitif (Button, Card, Input) adalah potongan toolkit tanpa gaya. Mereka memberi fleksibilitas tetapi tanpa opini. Blocks adalah lapisan yang hilang di atasnya — bagian tersusun dengan teks, tata letak, dan ritme tipografi yang dikode keras. Letakkan satu, lalu sunting teksnya langsung di tempat.

Blocks mengikuti filosofi shadcn: salin-tempel sumber, tanpa konfigurasi runtime, Anda memiliki filenya.

Lapisan

Primitives  →  Blocks  →  Pages
(Button)       (FeatureCard)   (Landing)

Install

bun x bosia@latest add block cards/feature

File mendarat di src/lib/blocks/<category>/<name>/. Dependensi primitif (Card, Button, dll.) terinstal otomatis.

Page block tidak menyertakan navbar

Block tingkat halaman (heros, cards, sections) tidak membawa navbar situsnya sendiri — itu disengaja. Navbar, footer, dan sidebar berada di +layout.svelte Anda agar dirender sekali di setiap rute. Pasangkan page block dengan navbar block yang diletakkan di layout; menaruh hero di halaman dan navbar di layout memberi Anda tepat satu navbar, bukan dua.

Block yang tersedia

150+ block dalam sepuluh kategori. Instal apa pun dengan bun x bosia@latest add block <category>/<name>.

Heros (17)

Section hero landing full-bleed, satu per vertikal: agency · app · apparel · bags · bookstore · campus · consulting · course · delivery · home-goods · lookbook · new-drop · product · restaurant · sale · shop-split · toys

Navbars (19)

• Standard — layout terang klasik: centered, split, search-led, minimal, two-tier
• App & Interactive — dashboard, e-commerce, docs, mega-menu, announcement, mobile
• Themes — dark, glass, brutalist, floating pill, gradient, brand bar, overlay

Docks (4)

Bar navigasi bawah untuk mobile — edge, floating, pill, center-FAB.

Footers (12)

• Standard — layout terang klasik: minimal, columns, newsletter, centered, mega, split-brand
• Themes — dark, glass, gradient, brutalist, editorial, terminal

Sections (28)

Section marketing untuk bagian tengah halaman — di antara hero dan footer:

• Pricing — columns, comparison, simple
• Testimonials — grid, spotlight
• FAQ — accordion, grid
• CTA — banner, panel
• Features — grid, split, bento
• Stats — band, cards, sentiment bar
• Logos — row, grid
• Contact — split, simple
• Team — grid, spotlight
• Gallery — grid dengan lightbox, masonry
• Process — steps, timeline
• Newsletter — centered, split
• Consent — banner cookie

Blog (4)

Section editorial untuk situs konten — pasangkan dengan feature blog untuk post berbasis database di baliknya:

• Blog — post-list, post-header, post-body, related

Cards (30)

• People — profile, contact, testimonial
• Data & Dashboard — stat, progress, chart, balance
• Auth & Marketing — login, feature
• Media — article, music, video, gallery
• Commerce — product, pricing, order, review
• Utility & System — notification, weather, event, file, task, storage, code, map, integration, poll, stepper, chat, pick list

Storefront (36)

Block commerce Mercato: Layout · Home Sections · Catalog & Cart · Listing · Product · Cart & Wishlist · Checkout · Account

Auth (9)

Block auth bersama — brand, shell, card, social row, divider, field, password strength, OTP input, form messages.

Files (3)

Upload Area · Crop Image · Image Dialog

Theming

Blocks hanya mengonsumsi token semantik — bg-card, text-foreground, font-display. Ganti tema tanpa menyentuh block:

bun x bosia@latest add theme editorial

Lihat Themes.