Skip to main content

Media & Content

Gallery, video players, code editors, and content display widgets

Image Gallery

Mountain landscape
Ocean sunset
City skyline
Forest path
Desert dunes
Northern lights
Waterfall
Snow mountains

Video Player

Image Carousel

File Browser

📁

Reports

2026-09-04
📁

Images

2026-09-03
📄

presentation.pptx

2.4 MB

2026-09-04
📄

budget.xlsx

156 KB

2026-09-02
📄

notes.md

8 KB

2026-09-01
📄

logo.svg

12 KB

2026-08-30

Code Editor

typescript
import { StatsCard } from '@/components/widgets';

interface DashboardProps {
  stats: StatItem[];
  title: string;
}

export function Dashboard({ stats, title }: DashboardProps) {
  return (
    <div className="grid grid-cols-4 gap-4">
      {stats.map((stat) => (
        <StatsCard
          key={stat.id}
          label={stat.label}
          value={stat.value}
          trend={stat.trend}
          icon={stat.icon}
        />
      ))}
    </div>
  );
}

Markdown Preview

Widget System Documentation

Overview

The widget system provides 213+ interactive components for building modern dashboards.

Features

  • 68 chart types
  • Responsive design
  • Dark mode support
  • Full TypeScript types

Quick Start

import { Chart } from '@/components/widgets';

<Chart type="bar" data={data} height={300} />

Categories

CategoryCount
Charts72
Tables10
Forms24
Metrics22

Audio Player

Audio Waveform

PDF Viewer