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 ▼

Highlight & Informasi
Konten Interaktif
Layout & Struktur
Media & Marketing
Data & Profil

1. Highlight & Informasi

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>

<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).

<Tabs>
  <TabItem label="Tab 1"> Konten 1 </TabItem>
  <TabItem label="Tab 2"> Konten 2 </TabItem>
</Tabs>

<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.

Kiri

Kanan

<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" />

<Divider type="dots" />

<Divider type="line" />

4. Media & Marketing

Lead Magnet (CTA)

Komponen penawaran produk atau link pendaftaran.

Siap Cuan di Era AI?

Dapatkan akses ke 100+ prompt premium.

Download Sekarang →

<LeadMagnet 
  title="Judul" 
  description="Deskripsi" 
  buttonText="Tombol" 
  buttonLink="#" 
/>

Ebook: Tiktok Affiliate

Strategi 7 langkah menghasilkan komisi pertama.

Ambil Ebook →

<LeadMagnet 
  layout="grid"
  bgColor="#064e3b"
  title="Judul" 
  description="Deskripsi" 
  buttonText="Tombol" 
  buttonLink="#" 
/>

5. Data & Profil

Comparison Table

Tabel perbandingan responsif.

Fitur	Free	Pro
Speed	1x	10x

<ComparisonTable>
| Fitur | A | B |
|---|---|---|
| Baris | ... | ... |
</ComparisonTable>

Fitur	Low	High
Power	20	100

<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"
/>

💡 Kesimpulan

Poin A
Poin B

<KeyTakeaways title="TL;DR">
- Poin
</KeyTakeaways>