Komponen Kustom

Komponen kustom adalah fitur yang memungkinkan kamu menulis konten Markdown dengan sintaks sederhana yang otomatis berubah menjadi elemen HTML yang kaya dan interaktif.

Apa Itu Custom Directives?

Custom directives adalah ekstensi sintaks Markdown yang dimulai dengan:

• Block directives: ::: atau :: (di baris sendiri)
• Inline directives: : (di dalam paragraf)

Saat konten di-render, Sätteri akan mengubah directive tersebut menjadi komponen HTML yang sudah dilengkapi dengan styling dan fungsionalitas.

Kelebihan

• Markdown murni — tidak perlu HTML atau JSX
• Tanpa import — tidak perlu import komponen di setiap file
• Konsisten — semua komponen memiliki tampilan yang seragam
• Cepat — diproses di build time, tidak ada JavaScript di sisi klien
• Fleksibel — bisa digunakan di file .md dan .mdx

Daftar Komponen

Block Components ::: / ::

Komponen yang berdiri sendiri di level blok.

Komponen	Sintaks	Fungsi	Halaman
Callout	> [!NOTE]	Menyorot informasi penting	Callout
Steps	:::steps	Panduan langkah-demi-langkah	Steps
Tabs	::::tabs	Konten dalam tab	Tabs
Filetree	:::filetree	Struktur folder dan file	Filetree
Accordion	:::details	Konten yang bisa dilipat	Accordion
Video	::video[...]	Embed video	Video

Inline Components (:)

Komponen yang bisa digunakan di dalam paragraf atau teks.

Komponen	Sintaks	Fungsi	Halaman
User	:user[...]	Profil pengguna dengan avatar	User
Badge	:badge[...]	Label kecil dengan warna	Badge
Button	:button[...]	Tombol dengan ikon	Button

Media Components

Komponen	Sintaks	Fungsi	Halaman
Figure	{caption}	Gambar dengan caption	Figure

Mulai Menggunakan

Pilih salah satu komponen dari daftar di atas untuk melihat panduan lengkap, sintaks, dan contoh penggunaan.