UI Components v0.6.0

React, Vue, and Web Components for intelligence dashboards. Comprehensive component library with charts, tables, forms, navigation, and specialized intelligence widgets.

Choose Your Framework

All components available for React, Vue, and Web Components

0.6.0

React

Modern React components with TypeScript support

@prismatic/react-components 245KB
TypeScript Hooks Server Components
0.6.0

Vue.js

Composition API components for Vue 3+

@prismatic/vue-components 198KB
Composition API TypeScript Nuxt Ready
0.6.0

Web Components

Framework-agnostic custom elements

@prismatic/web-components 156KB
Custom Elements Shadow DOM Framework Agnostic

Component Library

Comprehensive set of components for intelligence applications

Charts & Visualizations

Interactive data visualization components

LineChart

Time-series data visualization

BarChart

Categorical data comparison

PieChart

Proportional data display

HeatMap

Matrix data visualization

NetworkGraph

Relationship mapping

TreeMap

Hierarchical data display

Code Example

React Example 
import { LineChart, BarChart } from '@prismatic/react-components';

function DashboardCharts() {
  const timeSeriesData = [
    { date: '2024-01', value: 120, category: 'incidents' },
    { date: '2024-02', value: 98, category: 'incidents' },
    { date: '2024-03', value: 145, category: 'incidents' }
  ];

  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
      <LineChart
        data={timeSeriesData}
        xAxis="date"
        yAxis="value"
        theme="dark"
        interactive={true}
        animations={true}
      />

      <BarChart
        data={timeSeriesData}
        xAxis="date"
        yAxis="value"
        color="emerald"
        showTooltip={true}
      />
    </div>
  );
}
Installation
npm install @prismatic/react-components

Theme Customization

Built-in theming system with dark/light mode support

Dark Theme

Light Theme

Emerald Theme

Purple Theme

Amber Theme

Theme Configuration

CSS Variables

:root {
  --primary-color: #3B82F6;
  --background-color: #0F172A;
  --text-color: #F8FAFC;
  --border-color: #334155;
  --accent-color: #10B981;
}

Component Theming

import { ThemeProvider } from '@prismatic/react-components';

<ThemeProvider theme="dark">
  <LineChart theme="dark" />
  <DataTable theme="dark" />
</ThemeProvider>

Key Features

Everything you need for modern intelligence dashboards

TypeScript Ready

Full TypeScript support with comprehensive type definitions

Responsive Design

Mobile-first design that adapts to any screen size

High Performance

Optimized for large datasets and real-time updates

Accessibility

WCAG 2.1 AA compliant with keyboard navigation

Build Beautiful Interfaces

Create stunning intelligence dashboards with our comprehensive component library

Need help? Check our documentation or browse examples