Mar 28, 2026
Demonstrasi Komponen MDX Selamat datang di panduan komponen MDX Bisnix! Halaman ini berfungsi sebagai referensi visual dan galeri kode (copy-paste) untuk semua elemen interaktif yang bisa Anda gunakan.
[!TIP]
Global Components : Anda tidak perlu lagi menulis baris import di atas file MDX. Semua komponen di bawah ini sudah tersedia secara otomatis di seluruh artikel blog Anda.
Daftar Isi Dokumentasi ▼
Attention Box
Kotak informasi untuk memberikan penekanan pada poin tertentu.
ℹ️ Informasi
Gunakan tipe info untuk tips atau catatan tambahan yang santai.
<AttentionBox type="info" title="Informasi">
Isi pesan Anda di sini.
</AttentionBox> ⚠️ Peringatan
Gunakan tipe warning untuk hal yang perlu diwaspadai pembaca.
<AttentionBox type="warning" title="Peringatan">
Isi pesan Anda di sini.
</AttentionBox> ✅ Berhasil
Gunakan tipe success untuk kabar baik atau konfirmasi hasil.
<AttentionBox type="success" title="Berhasil">
Isi pesan Anda di sini.
</AttentionBox> 🚫 Bahaya
Gunakan tipe danger untuk kesalahan fatal atau hal yang harus dihindari.
<AttentionBox type="danger" title="Bahaya">
Isi pesan Anda di sini.
</AttentionBox>
Quote (Kutipan)
Komponen kutipan dengan desain premium.
Inovasi adalah hal yang membedakan antara pemimpin dan pengikut.
— Steve Jobs <Quote type="gradient" cite="Nama Tokoh">
Isi kutipan masukan di sini.
</Quote> Kegagalan adalah sebuah pilihan di sini. Jika hal-hal tidak gagal, Anda tidak cukup inovatif.
Elon Musk <Quote type="profile" cite="Nama Tokoh" avatar="URL_FOTO">
Isi kutipan di sini.
</Quote> Sukses bukan akhir, kegagalan bukan fatal: keberanian untuk melanjutkanlah yang penting.
— Winston Churchill QUOTE <Quote type="box" cite="Nama Tokoh">
Isi kutipan di sini.
</Quote>
2. Konten Interaktif
Collapse (Accordion)
Menyembunyikan konten panjang agar halaman lebih ringkas.
Klik untuk Pertanyaan Dasar ▼ Ini adalah konten yang disembunyikan. Bisa berisi teks, gambar, atau komponen lain.
<Collapse title="Judul Pertanyaan">
Jawaban atau konten detail di sini.
</Collapse> Klik untuk Detail Teknis ▼ Varian outline ini lebih bersih dengan garis tipis dan teks konten 15px.
<Collapse title="Judul" variant="outline">
Isi konten di sini.
</Collapse>
Tabs (Tab Sistem)
Mengatur konten ke dalam kategori yang bisa diklik. Tersedia dalam mode horizontal (default) dan menyamping (vertical).
Judul Tab 1 Isi konten untuk tab pertama.
Judul Tab 2 Isi konten untuk tab kedua.
<Tabs>
<TabItem label="Tab 1"> Konten 1 </TabItem>
<TabItem label="Tab 2"> Konten 2 </TabItem>
</Tabs> Mulai Setup Deskripsi langkah pertama dalam mode vertikal.
Konfigurasi Deskripsi langkah kedua dalam mode vertikal.
<Tabs type="vertical">
<TabItem label="Langkah 1"> Konten 1 </TabItem>
<TabItem label="Langkah 2"> Konten 2 </TabItem>
</Tabs>
3. Layout & Struktur
Columns
Membagi konten menjadi beberapa kolom.
<Columns>
<Column> Konten 1 </Column>
<Column> Konten 2 </Column>
</Columns> <Columns>
<Column> 1 </Column>
<Column> 2 </Column>
<Column> 3 </Column>
</Columns>
Divider (Pemisah)
Garis pemisah antar section.
<Divider type="gradient" />
Lead Magnet (CTA)
Komponen penawaran produk atau link pendaftaran.
<LeadMagnet
title="Judul"
description="Deskripsi"
buttonText="Tombol"
buttonLink="#"
/> <LeadMagnet
layout="grid"
bgColor="#064e3b"
title="Judul"
description="Deskripsi"
buttonText="Tombol"
buttonLink="#"
/>
5. Data & Profil
Comparison Table
Tabel perbandingan responsif.
<ComparisonTable>
| Fitur | A | B |
|---|---|---|
| Baris | ... | ... |
</ComparisonTable> <ComparisonTable type="emerald">
...content...
</ComparisonTable>
Author Profile & Takeaways
Komponen pendukung konten lainnya.
Admin Bisnix AI Guide
Helping you master AI workflows.
<AuthorProfile
name="Admin"
role="Role"
bio="Bio"
/> <KeyTakeaways title="TL;DR">
- Poin
</KeyTakeaways>