Component Overview

Built-in Components

DexCode slides are MDX files — Markdown with React components. All built-in components are available directly in your slides without importing.

DexCode ships with 30+ built-in components and 100+ production-ready slide templates covering charts, code blocks, layouts, dashboards, diagrams, and more — all ready to use out of the box.

Available Components

Layout

• Columns / Column — Multi-column layouts with custom widths
• Center — Center content vertically and horizontally

Content

• Card — Styled content card
• Timeline / TimelineItem — Vertical timeline visualization
• Steps / Step — Numbered step sequences
• SummaryBanner — Summary/highlight banner

Data Visualization

• Chart — Charts powered by Recharts (supports type="bar", "line", "pie", "area")
• KpiStrip — Key performance indicator strip with metrics
• ShowcaseStatGrid — Grid of statistics
• ShowcaseMetric — Single metric display

Media & Decorative

• Icon — 1000+ Lucide icons available
• Shape — Decorative SVG shapes
• ShowcaseShapeGrid / ShapeItem — Grid of decorative shapes
• ShowcaseIconGrid — Grid of icons with labels

Showcase Templates

Pre-built slide templates for common presentation patterns:

• ShowcaseCover — Title/cover slide
• ShowcaseSection — Section divider
• ShowcaseEndSlide — Thank you / closing slide
• ShowcaseSplit — Split layout (text + visual)
• ShowcaseColumnText — Multi-column text layout
• ShowcaseComparison — Side-by-side comparison
• ShowcaseComparisonTable — Comparison table
• ShowcaseFeatureGrid — Feature grid cards
• ShowcaseTeamGrid — Team member grid
• ShowcaseQuote — Quotation slide
• ShowcasePricing — Pricing table
• ShowcaseAgenda — Agenda/schedule
• ShowcaseFAQ — FAQ layout
• ShowcaseVideo — Video embed
• ShowcaseDashboard — Dashboard layout
• ShowcaseMatrix — Matrix/grid diagram
• ShowcaseDiagram — Generic diagram
• ShowcaseLayerStack — Layer stack visualization
• FigureShowcase — Image with caption
• ScreenshotCallouts — Screenshot with annotation callouts
• LogoWall — Logo grid

Usage Example

---
type: content
---
 
<Columns widths="60,40">
<Column>
 
# Q3 Revenue Growth
 
Our revenue grew **45% quarter-over-quarter**, driven by
enterprise adoption and the launch of our Pro tier.
 
</Column>
<Column>
 
<Chart
  type="bar"
  data={[
    { name: "Q1", value: 820 },
    { name: "Q2", value: 1200 },
    { name: "Q3", value: 1740 },
  ]}
/>
 
</Column>
</Columns>