tremor-ui-mcp-server
Version:
A Model Context Protocol (MCP) server providing AI assistants with access to Tremor UI components, blocks, and templates for React dashboard development
761 lines • 158 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TremorService = void 0;
const github_1 = require("./github");
class TremorService {
constructor(githubApiKey) {
this.cache = null;
this.cacheExpiry = 0;
this.cacheTimeout = 30 * 60 * 1000; // 30 minutes
this.github = new github_1.GitHubService(githubApiKey);
}
async loadRegistry() {
const now = Date.now();
if (this.cache && now < this.cacheExpiry) {
return this.cache;
}
console.log('Loading Tremor registry...');
try {
const registry = {
components: await this.loadComponents(),
blocks: await this.loadBlocks(),
templates: await this.loadTemplates(),
lastUpdated: new Date().toISOString()
};
this.cache = registry;
this.cacheExpiry = now + this.cacheTimeout;
return registry;
}
catch (error) {
console.error('Error loading registry:', error);
// Return cached data if available, even if expired
if (this.cache) {
return this.cache;
}
throw error;
}
}
async loadComponents() {
const components = {};
try {
// Get components from the src/components directory
const componentsDir = await this.github.getDirectoryContents('src/components');
for (const item of componentsDir) {
if (item.type === 'dir' && !item.name.startsWith('.')) {
const component = await this.parseComponent(item.name, item.path);
if (component) {
components[component.name] = component;
}
}
}
// Add some predefined components based on Tremor documentation
const predefinedComponents = this.getPredefinedComponents();
Object.assign(components, predefinedComponents);
}
catch (error) {
console.error('Error loading components:', error);
}
return components;
}
async parseComponent(name, path) {
try {
// Try to get the main component file
const componentFile = await this.github.getFileContent(`${path}/index.tsx`) ||
await this.github.getFileContent(`${path}/${name}.tsx`) ||
await this.github.getFileContent(`${path}/${name}.ts`);
if (!componentFile) {
return null;
}
// Extract component information from the file
const category = this.extractCategory(path);
const description = this.extractDescription(componentFile);
const props = this.extractProps(componentFile);
return {
name,
description: description || `Tremor ${name} component`,
category,
props,
source: componentFile,
dependencies: this.extractDependencies(componentFile)
};
}
catch (error) {
console.error(`Error parsing component ${name}:`, error);
return null;
}
}
getPredefinedComponents() {
return {
'AreaChart': {
name: 'AreaChart',
description: 'A responsive area chart component for displaying time-series data',
category: 'Charts',
props: [
{ name: 'data', type: 'Array<object>', required: true, description: 'Chart data array' },
{ name: 'categories', type: 'string[]', required: true, description: 'Data categories to display' },
{ name: 'index', type: 'string', required: true, description: 'Key for x-axis values' },
{ name: 'colors', type: 'string[]', required: false, description: 'Colors for chart areas' },
{ name: 'valueFormatter', type: 'function', required: false, description: 'Function to format values' }
],
dependencies: ['@tremor/react', 'react']
},
'BarChart': {
name: 'BarChart',
description: 'A responsive bar chart component for categorical data visualization',
category: 'Charts',
props: [
{ name: 'data', type: 'Array<object>', required: true, description: 'Chart data array' },
{ name: 'categories', type: 'string[]', required: true, description: 'Data categories to display' },
{ name: 'index', type: 'string', required: true, description: 'Key for x-axis values' },
{ name: 'colors', type: 'string[]', required: false, description: 'Colors for chart bars' }
],
dependencies: ['@tremor/react', 'react']
},
'LineChart': {
name: 'LineChart',
description: 'A responsive line chart component for trend visualization',
category: 'Charts',
props: [
{ name: 'data', type: 'Array<object>', required: true, description: 'Chart data array' },
{ name: 'categories', type: 'string[]', required: true, description: 'Data categories to display' },
{ name: 'index', type: 'string', required: true, description: 'Key for x-axis values' },
{ name: 'colors', type: 'string[]', required: false, description: 'Colors for chart lines' }
],
dependencies: ['@tremor/react', 'react']
},
'Card': {
name: 'Card',
description: 'A container component with padding and shadow for content grouping',
category: 'Layout',
props: [
{ name: 'children', type: 'ReactNode', required: true, description: 'Content to display in the card' },
{ name: 'className', type: 'string', required: false, description: 'Additional CSS classes' },
{ name: 'decoration', type: 'string', required: false, description: 'Decoration style for the card' }
],
dependencies: ['@tremor/react', 'react']
},
'Metric': {
name: 'Metric',
description: 'Display large numbers or key performance indicators',
category: 'Text',
props: [
{ name: 'children', type: 'ReactNode', required: true, description: 'The metric value to display' },
{ name: 'className', type: 'string', required: false, description: 'Additional CSS classes' }
],
dependencies: ['@tremor/react', 'react']
},
'Text': {
name: 'Text',
description: 'Typography component for displaying text with consistent styling',
category: 'Text',
props: [
{ name: 'children', type: 'ReactNode', required: true, description: 'Text content to display' },
{ name: 'className', type: 'string', required: false, description: 'Additional CSS classes' },
{ name: 'color', type: 'string', required: false, description: 'Text color' }
],
dependencies: ['@tremor/react', 'react']
},
'ProgressBar': {
name: 'ProgressBar',
description: 'Visual indicator of progress or completion percentage',
category: 'Input',
props: [
{ name: 'value', type: 'number', required: true, description: 'Progress value (0-100)' },
{ name: 'className', type: 'string', required: false, description: 'Additional CSS classes' },
{ name: 'color', type: 'string', required: false, description: 'Progress bar color' }
],
dependencies: ['@tremor/react', 'react']
},
'DonutChart': {
name: 'DonutChart',
description: 'A circular chart for displaying parts of a whole',
category: 'Charts',
props: [
{ name: 'data', type: 'Array<object>', required: true, description: 'Chart data array' },
{ name: 'category', type: 'string', required: true, description: 'Data category to display' },
{ name: 'index', type: 'string', required: true, description: 'Key for segment labels' },
{ name: 'colors', type: 'string[]', required: false, description: 'Colors for chart segments' }
],
dependencies: ['@tremor/react', 'react']
},
'Badge': {
name: 'Badge',
description: 'Small status indicators and labels',
category: 'Display',
props: [
{ name: 'children', type: 'ReactNode', required: true, description: 'Badge content' },
{ name: 'color', type: 'string', required: false, description: 'Badge color' },
{ name: 'size', type: 'string', required: false, description: 'Badge size' }
],
dependencies: ['@tremor/react', 'react']
},
'Callout': {
name: 'Callout',
description: 'Component for highlighting important information',
category: 'Display',
props: [
{ name: 'children', type: 'ReactNode', required: true, description: 'Callout content' },
{ name: 'title', type: 'string', required: false, description: 'Callout title' },
{ name: 'icon', type: 'ReactNode', required: false, description: 'Icon to display' },
{ name: 'color', type: 'string', required: false, description: 'Callout color theme' }
],
dependencies: ['@tremor/react', 'react']
},
'Button': {
name: 'Button',
description: 'Interactive button component with multiple variants and loading states',
category: 'Input',
props: [
{ name: 'children', type: 'ReactNode', required: true, description: 'Button content' },
{ name: 'variant', type: 'string', required: false, description: 'Button variant (primary, secondary, light, ghost, destructive)' },
{ name: 'disabled', type: 'boolean', required: false, description: 'Whether the button is disabled' },
{ name: 'isLoading', type: 'boolean', required: false, description: 'Whether the button is in loading state' },
{ name: 'loadingText', type: 'string', required: false, description: 'Text to show when loading' },
{ name: 'asChild', type: 'boolean', required: false, description: 'Render as child component' }
],
dependencies: ['@tremor/react', 'react', '@radix-ui/react-slot']
},
'Input': {
name: 'Input',
description: 'Text input component with support for various types including password and search',
category: 'Input',
props: [
{ name: 'type', type: 'string', required: false, description: 'Input type (text, password, email, search, etc.)' },
{ name: 'placeholder', type: 'string', required: false, description: 'Placeholder text' },
{ name: 'disabled', type: 'boolean', required: false, description: 'Whether the input is disabled' },
{ name: 'hasError', type: 'boolean', required: false, description: 'Whether the input has an error state' },
{ name: 'enableStepper', type: 'boolean', required: false, description: 'Enable stepper for number inputs' }
],
dependencies: ['@tremor/react', 'react']
},
'Select': {
name: 'Select',
description: 'Dropdown select component with searchable options',
category: 'Input',
props: [
{ name: 'children', type: 'ReactNode', required: true, description: 'Select options and content' },
{ name: 'disabled', type: 'boolean', required: false, description: 'Whether the select is disabled' },
{ name: 'defaultValue', type: 'string', required: false, description: 'Default selected value' },
{ name: 'value', type: 'string', required: false, description: 'Controlled selected value' },
{ name: 'onValueChange', type: 'function', required: false, description: 'Callback when value changes' }
],
dependencies: ['@tremor/react', 'react', '@radix-ui/react-select']
},
'Table': {
name: 'Table',
description: 'Data table component with header, body, and footer sections',
category: 'Display',
props: [
{ name: 'children', type: 'ReactNode', required: true, description: 'Table content (TableHead, TableBody, etc.)' },
{ name: 'className', type: 'string', required: false, description: 'Additional CSS classes' }
],
dependencies: ['@tremor/react', 'react']
},
'Accordion': {
name: 'Accordion',
description: 'Collapsible content sections',
category: 'Layout',
props: [
{ name: 'children', type: 'ReactNode', required: true, description: 'Accordion items' },
{ name: 'type', type: 'string', required: false, description: 'Single or multiple items can be open' },
{ name: 'collapsible', type: 'boolean', required: false, description: 'Whether items can be collapsed' }
],
dependencies: ['@tremor/react', 'react', '@radix-ui/react-accordion']
},
'BarList': {
name: 'BarList',
description: 'Horizontal bar list for displaying ranked data',
category: 'Charts',
props: [
{ name: 'data', type: 'Array<object>', required: true, description: 'Data array for the bar list' },
{ name: 'valueFormatter', type: 'function', required: false, description: 'Function to format values' },
{ name: 'color', type: 'string', required: false, description: 'Color theme for bars' }
],
dependencies: ['@tremor/react', 'react']
},
'Calendar': {
name: 'Calendar',
description: 'Date picker calendar component',
category: 'Input',
props: [
{ name: 'selected', type: 'Date', required: false, description: 'Selected date' },
{ name: 'onSelect', type: 'function', required: false, description: 'Callback when date is selected' },
{ name: 'disabled', type: 'boolean | function', required: false, description: 'Disabled dates' },
{ name: 'mode', type: 'string', required: false, description: 'Selection mode (single, multiple, range)' }
],
dependencies: ['@tremor/react', 'react', 'react-day-picker']
},
'CategoryBar': {
name: 'CategoryBar',
description: 'Horizontal bar showing category proportions',
category: 'Charts',
props: [
{ name: 'values', type: 'number[]', required: true, description: 'Array of values for each category' },
{ name: 'colors', type: 'string[]', required: false, description: 'Colors for each category' },
{ name: 'markerValue', type: 'number', required: false, description: 'Value to mark on the bar' }
],
dependencies: ['@tremor/react', 'react']
},
'Checkbox': {
name: 'Checkbox',
description: 'Checkbox input component',
category: 'Input',
props: [
{ name: 'checked', type: 'boolean', required: false, description: 'Whether checkbox is checked' },
{ name: 'onCheckedChange', type: 'function', required: false, description: 'Callback when checked state changes' },
{ name: 'disabled', type: 'boolean', required: false, description: 'Whether checkbox is disabled' },
{ name: 'id', type: 'string', required: false, description: 'Checkbox ID for label association' }
],
dependencies: ['@tremor/react', 'react', '@radix-ui/react-checkbox']
},
'ComboChart': {
name: 'ComboChart',
description: 'Combination chart with multiple chart types (bar, line, area)',
category: 'Charts',
props: [
{ name: 'data', type: 'Array<object>', required: true, description: 'Chart data array' },
{ name: 'index', type: 'string', required: true, description: 'Key for x-axis values' },
{ name: 'categories', type: 'string[]', required: true, description: 'Data categories to display' },
{ name: 'colors', type: 'string[]', required: false, description: 'Colors for chart elements' }
],
dependencies: ['@tremor/react', 'react']
},
'DatePicker': {
name: 'DatePicker',
description: 'Date picker input with calendar popup',
category: 'Input',
props: [
{ name: 'value', type: 'Date', required: false, description: 'Selected date value' },
{ name: 'onChange', type: 'function', required: false, description: 'Callback when date changes' },
{ name: 'placeholder', type: 'string', required: false, description: 'Placeholder text' },
{ name: 'disabled', type: 'boolean', required: false, description: 'Whether date picker is disabled' }
],
dependencies: ['@tremor/react', 'react', 'react-day-picker']
},
'Dialog': {
name: 'Dialog',
description: 'Modal dialog component',
category: 'Layout',
props: [
{ name: 'open', type: 'boolean', required: false, description: 'Whether dialog is open' },
{ name: 'onOpenChange', type: 'function', required: false, description: 'Callback when open state changes' },
{ name: 'children', type: 'ReactNode', required: true, description: 'Dialog content' }
],
dependencies: ['@tremor/react', 'react', '@radix-ui/react-dialog']
},
'Divider': {
name: 'Divider',
description: 'Visual separator line',
category: 'Layout',
props: [
{ name: 'orientation', type: 'string', required: false, description: 'Horizontal or vertical orientation' },
{ name: 'className', type: 'string', required: false, description: 'Additional CSS classes' }
],
dependencies: ['@tremor/react', 'react']
},
'Drawer': {
name: 'Drawer',
description: 'Slide-out panel component',
category: 'Layout',
props: [
{ name: 'open', type: 'boolean', required: false, description: 'Whether drawer is open' },
{ name: 'onOpenChange', type: 'function', required: false, description: 'Callback when open state changes' },
{ name: 'children', type: 'ReactNode', required: true, description: 'Drawer content' },
{ name: 'side', type: 'string', required: false, description: 'Side to slide from (left, right, top, bottom)' }
],
dependencies: ['@tremor/react', 'react', '@radix-ui/react-dialog']
},
'DropdownMenu': {
name: 'DropdownMenu',
description: 'Dropdown menu with items and actions',
category: 'Navigation',
props: [
{ name: 'children', type: 'ReactNode', required: true, description: 'Menu trigger and content' },
{ name: 'open', type: 'boolean', required: false, description: 'Whether menu is open' },
{ name: 'onOpenChange', type: 'function', required: false, description: 'Callback when open state changes' }
],
dependencies: ['@tremor/react', 'react', '@radix-ui/react-dropdown-menu']
},
'Label': {
name: 'Label',
description: 'Form label component',
category: 'Text',
props: [
{ name: 'children', type: 'ReactNode', required: true, description: 'Label text' },
{ name: 'htmlFor', type: 'string', required: false, description: 'ID of associated form element' },
{ name: 'className', type: 'string', required: false, description: 'Additional CSS classes' }
],
dependencies: ['@tremor/react', 'react']
},
'Popover': {
name: 'Popover',
description: 'Floating content container',
category: 'Layout',
props: [
{ name: 'children', type: 'ReactNode', required: true, description: 'Popover trigger and content' },
{ name: 'open', type: 'boolean', required: false, description: 'Whether popover is open' },
{ name: 'onOpenChange', type: 'function', required: false, description: 'Callback when open state changes' }
],
dependencies: ['@tremor/react', 'react', '@radix-ui/react-popover']
},
'ProgressCircle': {
name: 'ProgressCircle',
description: 'Circular progress indicator',
category: 'Display',
props: [
{ name: 'value', type: 'number', required: true, description: 'Progress value (0-100)' },
{ name: 'size', type: 'string', required: false, description: 'Size of the progress circle' },
{ name: 'color', type: 'string', required: false, description: 'Progress circle color' }
],
dependencies: ['@tremor/react', 'react']
},
'RadioGroup': {
name: 'RadioGroup',
description: 'Radio button group component',
category: 'Input',
props: [
{ name: 'value', type: 'string', required: false, description: 'Selected radio value' },
{ name: 'onValueChange', type: 'function', required: false, description: 'Callback when value changes' },
{ name: 'children', type: 'ReactNode', required: true, description: 'Radio items' },
{ name: 'disabled', type: 'boolean', required: false, description: 'Whether radio group is disabled' }
],
dependencies: ['@tremor/react', 'react', '@radix-ui/react-radio-group']
},
'Slider': {
name: 'Slider',
description: 'Range slider input component',
category: 'Input',
props: [
{ name: 'value', type: 'number[]', required: false, description: 'Slider value(s)' },
{ name: 'onValueChange', type: 'function', required: false, description: 'Callback when value changes' },
{ name: 'min', type: 'number', required: false, description: 'Minimum value' },
{ name: 'max', type: 'number', required: false, description: 'Maximum value' },
{ name: 'step', type: 'number', required: false, description: 'Step increment' }
],
dependencies: ['@tremor/react', 'react', '@radix-ui/react-slider']
},
'SparkChart': {
name: 'SparkChart',
description: 'Small inline chart for showing trends',
category: 'Charts',
props: [
{ name: 'data', type: 'Array<object>', required: true, description: 'Chart data array' },
{ name: 'categories', type: 'string[]', required: true, description: 'Data categories to display' },
{ name: 'index', type: 'string', required: true, description: 'Key for x-axis values' },
{ name: 'colors', type: 'string[]', required: false, description: 'Colors for chart elements' }
],
dependencies: ['@tremor/react', 'react']
},
'Switch': {
name: 'Switch',
description: 'Toggle switch component',
category: 'Input',
props: [
{ name: 'checked', type: 'boolean', required: false, description: 'Whether switch is checked' },
{ name: 'onCheckedChange', type: 'function', required: false, description: 'Callback when checked state changes' },
{ name: 'disabled', type: 'boolean', required: false, description: 'Whether switch is disabled' },
{ name: 'id', type: 'string', required: false, description: 'Switch ID for label association' }
],
dependencies: ['@tremor/react', 'react', '@radix-ui/react-switch']
},
'TabNavigation': {
name: 'TabNavigation',
description: 'Navigation tabs component',
category: 'Navigation',
props: [
{ name: 'children', type: 'ReactNode', required: true, description: 'Tab items' },
{ name: 'defaultValue', type: 'string', required: false, description: 'Default active tab' },
{ name: 'value', type: 'string', required: false, description: 'Controlled active tab' },
{ name: 'onValueChange', type: 'function', required: false, description: 'Callback when tab changes' }
],
dependencies: ['@tremor/react', 'react']
},
'Tabs': {
name: 'Tabs',
description: 'Content tabs with panels',
category: 'Navigation',
props: [
{ name: 'children', type: 'ReactNode', required: true, description: 'Tab list and panels' },
{ name: 'defaultValue', type: 'string', required: false, description: 'Default active tab' },
{ name: 'value', type: 'string', required: false, description: 'Controlled active tab' },
{ name: 'onValueChange', type: 'function', required: false, description: 'Callback when tab changes' }
],
dependencies: ['@tremor/react', 'react', '@radix-ui/react-tabs']
},
'Textarea': {
name: 'Textarea',
description: 'Multi-line text input component',
category: 'Input',
props: [
{ name: 'placeholder', type: 'string', required: false, description: 'Placeholder text' },
{ name: 'disabled', type: 'boolean', required: false, description: 'Whether textarea is disabled' },
{ name: 'rows', type: 'number', required: false, description: 'Number of visible rows' },
{ name: 'resize', type: 'string', required: false, description: 'Resize behavior (none, both, horizontal, vertical)' }
],
dependencies: ['@tremor/react', 'react']
},
'Toast': {
name: 'Toast',
description: 'Notification toast component',
category: 'Display',
props: [
{ name: 'title', type: 'string', required: false, description: 'Toast title' },
{ name: 'description', type: 'string', required: false, description: 'Toast description' },
{ name: 'variant', type: 'string', required: false, description: 'Toast variant (default, destructive)' },
{ name: 'action', type: 'ReactNode', required: false, description: 'Action button' }
],
dependencies: ['@tremor/react', 'react', '@radix-ui/react-toast']
},
'Toggle': {
name: 'Toggle',
description: 'Toggle button component',
category: 'Input',
props: [
{ name: 'pressed', type: 'boolean', required: false, description: 'Whether toggle is pressed' },
{ name: 'onPressedChange', type: 'function', required: false, description: 'Callback when pressed state changes' },
{ name: 'disabled', type: 'boolean', required: false, description: 'Whether toggle is disabled' },
{ name: 'children', type: 'ReactNode', required: true, description: 'Toggle content' }
],
dependencies: ['@tremor/react', 'react', '@radix-ui/react-toggle']
},
'Tooltip': {
name: 'Tooltip',
description: 'Hover tooltip component',
category: 'Display',
props: [
{ name: 'children', type: 'ReactNode', required: true, description: 'Tooltip trigger' },
{ name: 'content', type: 'ReactNode', required: true, description: 'Tooltip content' },
{ name: 'side', type: 'string', required: false, description: 'Tooltip position (top, right, bottom, left)' }
],
dependencies: ['@tremor/react', 'react', '@radix-ui/react-tooltip']
},
'Tracker': {
name: 'Tracker',
description: 'Progress tracker with multiple steps',
category: 'Display',
props: [
{ name: 'data', type: 'Array<object>', required: true, description: 'Tracker data with steps and status' },
{ name: 'color', type: 'string', required: false, description: 'Tracker color theme' }
],
dependencies: ['@tremor/react', 'react']
},
'RadioCardGroup': {
name: 'RadioCardGroup',
description: 'Radio button group with card-style layout',
category: 'Input',
props: [
{ name: 'value', type: 'string', required: false, description: 'Selected radio value' },
{ name: 'onValueChange', type: 'function', required: false, description: 'Callback when value changes' },
{ name: 'children', type: 'ReactNode', required: true, description: 'Radio card items' },
{ name: 'disabled', type: 'boolean', required: false, description: 'Whether radio group is disabled' }
],
dependencies: ['@tremor/react', 'react', '@radix-ui/react-radio-group']
},
'SelectNative': {
name: 'SelectNative',
description: 'Native HTML select dropdown component',
category: 'Input',
props: [
{ name: 'children', type: 'ReactNode', required: true, description: 'Option elements' },
{ name: 'disabled', type: 'boolean', required: false, description: 'Whether the select is disabled' },
{ name: 'hasError', type: 'boolean', required: false, description: 'Whether the select has an error state' },
{ name: 'value', type: 'string', required: false, description: 'Selected value' },
{ name: 'onChange', type: 'function', required: false, description: 'Callback when value changes' }
],
dependencies: ['@tremor/react', 'react']
}
};
}
async loadBlocks() {
const blocks = {};
// Add predefined blocks based on Tremor documentation
const predefinedBlocks = this.getPredefinedBlocks();
Object.assign(blocks, predefinedBlocks);
return blocks;
}
getPredefinedBlocks() {
return {
// KPI Card Examples
'kpi-card-01': {
name: 'kpi-card-01',
title: 'Basic KPI Cards',
description: 'Simple KPI cards with metrics and change indicators',
category: 'KPI Cards',
source: 'ui/kpi-card-01.tsx',
dependencies: ['@tremor/react', 'react', 'tailwindcss'],
files: [{ name: 'kpi-card-01.tsx', content: 'KPI card implementation', path: 'components/kpi-card-01.tsx' }]
},
// Area Chart Examples
'area-chart-01': {
name: 'area-chart-01',
title: 'Follower Metrics Area Chart',
description: 'Area chart showing organic vs sponsored follower metrics with summary',
category: 'Charts',
source: 'ui/area-chart-01.tsx',
dependencies: ['@tremor/react', 'react', 'tailwindcss'],
files: [{ name: 'area-chart-01.tsx', content: 'Area chart with metrics', path: 'components/area-chart-01.tsx' }]
},
// Bar Chart Examples
'bar-chart-01': {
name: 'bar-chart-01',
title: 'Sales Overview Bar Chart',
description: 'Interactive bar chart with year-over-year comparison toggle',
category: 'Charts',
source: 'ui/bar-chart-01.tsx',
dependencies: ['@tremor/react', 'react', 'tailwindcss'],
files: [{ name: 'bar-chart-01.tsx', content: 'Interactive bar chart', path: 'components/bar-chart-01.tsx' }]
},
// Line Chart Examples
'line-chart-01': {
name: 'line-chart-01',
title: 'Basic Line Chart',
description: 'Simple line chart for trend visualization',
category: 'Charts',
source: 'ui/line-chart-01.tsx',
dependencies: ['@tremor/react', 'react', 'tailwindcss'],
files: [{ name: 'line-chart-01.tsx', content: 'Basic line chart', path: 'components/line-chart-01.tsx' }]
},
// Donut Chart Examples
'donut-chart-01': {
name: 'donut-chart-01',
title: 'Basic Donut Chart',
description: 'Simple donut chart for categorical data visualization',
category: 'Charts',
source: 'ui/donut-chart-01.tsx',
dependencies: ['@tremor/react', 'react', 'tailwindcss'],
files: [{ name: 'donut-chart-01.tsx', content: 'Basic donut chart', path: 'components/donut-chart-01.tsx' }]
},
// Bar List Examples
'bar-list-01': {
name: 'bar-list-01',
title: 'Basic Bar List',
description: 'Horizontal bar list for ranking data',
category: 'Charts',
source: 'ui/bar-list-01.tsx',
dependencies: ['@tremor/react', 'react', 'tailwindcss'],
files: [{ name: 'bar-list-01.tsx', content: 'Basic bar list', path: 'components/bar-list-01.tsx' }]
},
// Spark Chart Examples (removed - duplicates handled in comprehensive section below)
// Badge Examples
'badge-01': {
name: 'badge-01',
title: 'Basic Badges',
description: 'Simple status badges with different variants',
category: 'Display',
source: 'ui/badge-01.tsx',
dependencies: ['@tremor/react', 'react', 'tailwindcss'],
files: [{ name: 'badge-01.tsx', content: 'Basic badges', path: 'components/badge-01.tsx' }]
},
// Table Examples (removed - duplicates handled in comprehensive section below)
// Dialog Examples (removed - duplicates handled in comprehensive section below)
// Form Layout Examples
'form-layout-01': {
name: 'form-layout-01',
title: 'Basic Form Layout',
description: 'Form with input fields and validation',
category: 'Forms',
source: 'ui/form-layout-01.tsx',
dependencies: ['@tremor/react', 'react', 'tailwindcss'],
files: [{ name: 'form-layout-01.tsx', content: 'Basic form layout', path: 'components/form-layout-01.tsx' }]
},
// Grid List Examples
'grid-list-01': {
name: 'grid-list-01',
title: 'Basic Grid List',
description: 'Grid layout for displaying items',
category: 'Layout',
source: 'ui/grid-list-01.tsx',
dependencies: ['@tremor/react', 'react', 'tailwindcss'],
files: [{ name: 'grid-list-01.tsx', content: 'Basic grid list', path: 'components/grid-list-01.tsx' }]
},
// Filter Bar Examples
'filterbar-01': {
name: 'filterbar-01',
title: 'Basic Filter Bar',
description: 'Filter controls for data tables',
category: 'Navigation',
source: 'ui/filterbar-01.tsx',
dependencies: ['@tremor/react', 'react', 'tailwindcss'],
files: [{ name: 'filterbar-01.tsx', content: 'Basic filter bar', path: 'components/filterbar-01.tsx' }]
},
// Pagination Examples (removed - duplicates handled in comprehensive section below)
// Page Shell Examples
'page-shell-01': {
name: 'page-shell-01',
title: 'Basic Page Layout',
description: 'Page layout with header and sidebar',
category: 'Layout',
source: 'ui/page-shell-01.tsx',
dependencies: ['@tremor/react', 'react', 'tailwindcss'],
files: [{ name: 'page-shell-01.tsx', content: 'Basic page layout', path: 'components/page-shell-01.tsx' }]
},
// Tracker Examples
'tracker-01': {
name: 'tracker-01',
title: 'Progress Tracker',
description: 'Multi-step progress tracker',
category: 'Display',
source: 'ui/tracker-01.tsx',
dependencies: ['@tremor/react', 'react', 'tailwindcss'],
files: [{ name: 'tracker-01.tsx', content: 'Progress tracker', path: 'components/tracker-01.tsx' }]
},
// Chart Composition Examples
'chart-composition-01': {
name: 'chart-composition-01',
title: 'Multi-Chart Dashboard',
description: 'Dashboard with multiple chart types',
category: 'Dashboard',
source: 'ui/chart-composition-01.tsx',
dependencies: ['@tremor/react', 'react', 'tailwindcss'],
files: [{ name: 'chart-composition-01.tsx', content: 'Multi-chart dashboard', path: 'components/chart-composition-01.tsx' }]
},
// File Upload Examples (removed - duplicates handled in comprehensive section below)
// Banner Examples (removed - duplicates handled in comprehensive section below)
// Onboarding Examples
'onboarding-feed-01': {
name: 'onboarding-feed-01',
title: 'Onboarding Feed',
description: 'User onboarding flow with steps',
category: 'Onboarding',
source: 'ui/onboarding-feed-01.tsx',
dependencies: ['@tremor/react', 'react', 'tailwindcss'],
files: [{ name: 'onboarding-feed-01.tsx', content: 'Onboarding feed', path: 'components/onboarding-feed-01.tsx' }]
},
// Chart Tooltip Examples
'chart-tooltip-01': {
name: 'chart-tooltip-01',
title: 'Custom Chart Tooltip',
description: 'Chart with custom tooltip formatting',
category: 'Charts',
source: 'ui/chart-tooltip-01.tsx',
dependencies: ['@tremor/react', 'react', 'tailwindcss'],
files: [{ name: 'chart-tooltip-01.tsx', content: 'Custom chart tooltip', path: 'components/chart-tooltip-01.tsx' }]
},
// Table Action Examples (removed - duplicates handled in comprehensive section below)
// ALL Area Chart Examples (02-16)
'area-chart-02': { name: 'area-chart-02', title: 'Area Chart 02', description: 'Area chart variant 02', category: 'Charts', source: 'ui/area-chart-02.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'area-chart-02.tsx', content: 'Area chart 02', path: 'components/area-chart-02.tsx' }] },
'area-chart-03': { name: 'area-chart-03', title: 'Area Chart 03', description: 'Area chart variant 03', category: 'Charts', source: 'ui/area-chart-03.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'area-chart-03.tsx', content: 'Area chart 03', path: 'components/area-chart-03.tsx' }] },
'area-chart-04': { name: 'area-chart-04', title: 'Area Chart 04', description: 'Area chart variant 04', category: 'Charts', source: 'ui/area-chart-04.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'area-chart-04.tsx', content: 'Area chart 04', path: 'components/area-chart-04.tsx' }] },
'area-chart-05': { name: 'area-chart-05', title: 'Area Chart 05', description: 'Area chart variant 05', category: 'Charts', source: 'ui/area-chart-05.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'area-chart-05.tsx', content: 'Area chart 05', path: 'components/area-chart-05.tsx' }] },
'area-chart-06': { name: 'area-chart-06', title: 'Area Chart 06', description: 'Area chart variant 06', category: 'Charts', source: 'ui/area-chart-06.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'area-chart-06.tsx', content: 'Area chart 06', path: 'components/area-chart-06.tsx' }] },
'area-chart-07': { name: 'area-chart-07', title: 'Area Chart 07', description: 'Area chart variant 07', category: 'Charts', source: 'ui/area-chart-07.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'area-chart-07.tsx', content: 'Area chart 07', path: 'components/area-chart-07.tsx' }] },
'area-chart-08': { name: 'area-chart-08', title: 'Area Chart 08', description: 'Area chart variant 08', category: 'Charts', source: 'ui/area-chart-08.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'area-chart-08.tsx', content: 'Area chart 08', path: 'components/area-chart-08.tsx' }] },
'area-chart-09': { name: 'area-chart-09', title: 'Area Chart 09', description: 'Area chart variant 09', category: 'Charts', source: 'ui/area-chart-09.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'area-chart-09.tsx', content: 'Area chart 09', path: 'components/area-chart-09.tsx' }] },
'area-chart-10': { name: 'area-chart-10', title: 'Area Chart 10', description: 'Area chart variant 10', category: 'Charts', source: 'ui/area-chart-10.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'area-chart-10.tsx', content: 'Area chart 10', path: 'components/area-chart-10.tsx' }] },
'area-chart-11': { name: 'area-chart-11', title: 'Area Chart 11', description: 'Area chart variant 11', category: 'Charts', source: 'ui/area-chart-11.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'area-chart-11.tsx', content: 'Area chart 11', path: 'components/area-chart-11.tsx' }] },
'area-chart-12': { name: 'area-chart-12', title: 'Area Chart 12', description: 'Area chart variant 12', category: 'Charts', source: 'ui/area-chart-12.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'area-chart-12.tsx', content: 'Area chart 12', path: 'components/area-chart-12.tsx' }] },
'area-chart-13': { name: 'area-chart-13', title: 'Area Chart 13', description: 'Area chart variant 13', category: 'Charts', source: 'ui/area-chart-13.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'area-chart-13.tsx', content: 'Area chart 13', path: 'components/area-chart-13.tsx' }] },
'area-chart-14': { name: 'area-chart-14', title: 'Area Chart 14', description: 'Area chart variant 14', category: 'Charts', source: 'ui/area-chart-14.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'area-chart-14.tsx', content: 'Area chart 14', path: 'components/area-chart-14.tsx' }] },
'area-chart-15': { name: 'area-chart-15', title: 'Area Chart 15', description: 'Area chart variant 15', category: 'Charts', source: 'ui/area-chart-15.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'area-chart-15.tsx', content: 'Area chart 15', path: 'components/area-chart-15.tsx' }] },
'area-chart-16': { name: 'area-chart-16', title: 'Area Chart 16', description: 'Area chart variant 16', category: 'Charts', source: 'ui/area-chart-16.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'area-chart-16.tsx', content: 'Area chart 16', path: 'components/area-chart-16.tsx' }] },
// ALL Bar Chart Examples (02-12)
'bar-chart-02': { name: 'bar-chart-02', title: 'Bar Chart 02', description: 'Bar chart variant 02', category: 'Charts', source: 'ui/bar-chart-02.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'bar-chart-02.tsx', content: 'Bar chart 02', path: 'components/bar-chart-02.tsx' }] },
'bar-chart-03': { name: 'bar-chart-03', title: 'Bar Chart 03', description: 'Bar chart variant 03', category: 'Charts', source: 'ui/bar-chart-03.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'bar-chart-03.tsx', content: 'Bar chart 03', path: 'components/bar-chart-03.tsx' }] },
'bar-chart-04': { name: 'bar-chart-04', title: 'Bar Chart 04', description: 'Bar chart variant 04', category: 'Charts', source: 'ui/bar-chart-04.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'bar-chart-04.tsx', content: 'Bar chart 04', path: 'components/bar-chart-04.tsx' }] },
'bar-chart-05': { name: 'bar-chart-05', title: 'Bar Chart 05', description: 'Bar chart variant 05', category: 'Charts', source: 'ui/bar-chart-05.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'bar-chart-05.tsx', content: 'Bar chart 05', path: 'components/bar-chart-05.tsx' }] },
'bar-chart-06': { name: 'bar-chart-06', title: 'Bar Chart 06', description: 'Bar chart variant 06', category: 'Charts', source: 'ui/bar-chart-06.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'bar-chart-06.tsx', content: 'Bar chart 06', path: 'components/bar-chart-06.tsx' }] },
'bar-chart-07': { name: 'bar-chart-07', title: 'Bar Chart 07', description: 'Bar chart variant 07', category: 'Charts', source: 'ui/bar-chart-07.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'bar-chart-07.tsx', content: 'Bar chart 07', path: 'components/bar-chart-07.tsx' }] },
'bar-chart-08': { name: 'bar-chart-08', title: 'Bar Chart 08', description: 'Bar chart variant 08', category: 'Charts', source: 'ui/bar-chart-08.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'bar-chart-08.tsx', content: 'Bar chart 08', path: 'components/bar-chart-08.tsx' }] },
'bar-chart-09': { name: 'bar-chart-09', title: 'Bar Chart 09', description: 'Bar chart variant 09', category: 'Charts', source: 'ui/bar-chart-09.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'bar-chart-09.tsx', content: 'Bar chart 09', path: 'components/bar-chart-09.tsx' }] },
'bar-chart-10': { name: 'bar-chart-10', title: 'Bar Chart 10', description: 'Bar chart variant 10', category: 'Charts', source: 'ui/bar-chart-10.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'bar-chart-10.tsx', content: 'Bar chart 10', path: 'components/bar-chart-10.tsx' }] },
'bar-chart-11': { name: 'bar-chart-11', title: 'Bar Chart 11', description: 'Bar chart variant 11', category: 'Charts', source: 'ui/bar-chart-11.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'bar-chart-11.tsx', content: 'Bar chart 11', pat