Components

Production-ready UI components

Browse our component library. All components are built with accessibility and customization in mind.

Grid System

A flexible 12-column grid system with responsive breakpoints.

Basic Grid

Use the container, row, and column classes to create layouts:

12 columns

6 columns

4 columns

3 columns

Responsive Grid

Use responsive column classes to change layout at different breakpoints:

12/6/4

12/12/4

Offset Columns

Use offset classes to push columns to the right:

6 columns, offset 3

4 columns, offset 4

Breakpoints

Breakpoint	Min Width	Class Prefix
Small	640px	`eco-col-sm-*`
Medium	768px	`eco-col-md-*`
Large	1024px	`eco-col-lg-*`
Extra Large	1280px	`eco-col-xl-*`
2X Large	1536px	`eco-col-2xl-*`

Buttons

Click any button to see its code

Cards

Click any card to see its code

Default Card

This is a default card with standard styling.

Elevated Card

This card has elevated shadow for emphasis.

Outlined Card

This card uses an outline instead of shadow.

Inputs

Click any input to see its code

Email Address Message Error State

Badges

Click any badge to see its code

Primary Success Warning Error Neutral Outline

Score Badges

500 A+ A B- C D

Notifications

Click any notification to see its code

99+

Alerts

Click any alert to see its code

Info

This is an informational message.

Success

Operation completed successfully.

Warning

Please review this information carefully.

Error

Something went wrong. Please try again.

Tables

Click any table to see its code

Company	Status	Emissions (tCO₂e)
Acme Corp	Verified	1,250
GreenTech Inc	Verified	890
EcoSolutions	Pending	2,100

Lists

Click any list to see its code

Scope 1 Emissions
Scope 2 Emissions
Scope 3 Emissions

Annual Report 2024
Sustainability Goals

Progress Bars

Click any progress bar to see its code

Avatars

Click any avatar to see its code

With Status Indicator

With Image

Accordions

Click any accordion item to expand and see child components. Click the accordion container to see its code.

Buttons Example

Cards Example

You can nest cards inside accordions:

Card Title

This is a card nested inside an accordion panel.

Elevated Card

Another example with elevation.

Form Elements Example

Forms work great inside accordions:

Email Address

Message

Badges & Alerts Example

Show status indicators and alerts:

Success Warning Error 500

Info: This is an alert inside an accordion.

Rating Scale

Hover over stars to preview, click to rate. Click the rating container to see its code.

4.0

Tabs

Click any tab to see its code

This is the overview content.

Form Elements

Click any form element to see its code

Radio Buttons

Option 1 Option 2 Disabled

Checkboxes

Checkbox 1 Checkbox 2 Indeterminate

Dropdowns

Use EcoKit dropdowns for selecting categories, facilities, suppliers, and other options.

Basic Dropdown

Calendar & Date

Use date inputs and ranges to capture reporting periods and activity windows.

Date Range

Start date

End date

Toggle Buttons

Click any toggle to see its code

Toggle Group

Switches

Click any switch to see its code

Enable notifications Dark mode Small switch Large switch Disabled

Pagination

Click any pagination to see its code

Small Size

Modals

Click the button below to see a modal in action

Breadcrumbs

Click any breadcrumb to see its code

With Chevron Separator

With Arrow Separator

Data Grid

A powerful data grid component built on TanStack Table with sorting, filtering, pagination, and custom cell renderers. Styled to match EcoKit design tokens.

Basic Data Grid

Category ↕	Activity Type ↕	Quantity ↓	Status
Electricity	Grid electricity	1,250 kWh	Verified
Fuel	Diesel	890 L	Pending
Water	Municipal water	320 m³	Verified
Waste	Landfill	450 kg	Review

Showing 1 to 4 of 4 entries

Page 1 of 1

Financial Data Grid with Deltas

Category	Spend	Savings	Net
Electricity	$45,000	-$12,000	+$33,000
Fuel	$32,000	-$8,500	+$23,500
Supply Chain	$125,000	-$35,000	+$90,000
Total	$202,000	-$55,500	+$146,500

Compact Data Grid

Supplier	Emissions	Progress
Acme Logistics	1,250 tCO₂e	75%
Global Materials	890 tCO₂e	45%
EcoShip Inc	320 tCO₂e	90%

Data Grid Features

The EcoDataGrid React component provides a full-featured data grid built on TanStack Table.

Props:

data - Array of data objects
columns - TanStack Table column definitions
enableSorting - Enable column sorting (default: true)
enableFiltering - Enable global search filter
enablePagination - Enable pagination (default: true)
enableEditing - Enable inline cell editing
pageSize - Initial page size (default: 10)
striped - Alternating row colors
bordered - Cell borders
compact - Reduced padding
stickyHeader - Fixed header on scroll
onRowClick - Callback when row is clicked
onCellEdit - Callback when cell is edited (inline editing)

Inline Editing:

Enable enableEditing and define editable columns using column meta:

meta.editable - Make column editable (default: true when enableEditing is on)
meta.editInputType - 'text' | 'number' | 'select' | 'date' | 'checkbox'
meta.selectOptions - Options for select type: [{ value, label }]
meta.validate - Validation function: (value) => true | "Error message"
meta.min/max/step - For number inputs

Keyboard: Enter to save, Escape to cancel, Tab to save and move to next cell.

Cell Renderers:

CellRenderers.currency(value, currency?) - Format as currency
CellRenderers.delta(value) - Show +/- with color
CellRenderers.percentage(value, decimals?) - Format as percentage
CellRenderers.badge(value, variant) - Status badge
CellRenderers.date(value, format?) - Format date
CellRenderers.progress(value, max?) - Progress bar

React Usage:

import { EcoDataGrid, CellRenderers } from '@/components/EcoDataGrid';

const columns = [
  { accessorKey: 'category', header: 'Category' },
  { accessorKey: 'spend', header: 'Spend',
    cell: ({ row }) => CellRenderers.currency(row.original.spend)
  },
  { accessorKey: 'savings', header: 'Savings',
    cell: ({ row }) => CellRenderers.delta(row.original.savings)
  },
];

<EcoDataGrid
  data={data}
  columns={columns}
  enableFiltering
  striped
/>

Inline Editing Example:

const columns = [
  { 
    accessorKey: 'category', 
    header: 'Category',
    meta: {
      editable: true,
      editInputType: 'select',
      selectOptions: [
        { value: 'electricity', label: 'Electricity' },
        { value: 'fuel', label: 'Fuel' },
        { value: 'water', label: 'Water' },
      ]
    }
  },
  { 
    accessorKey: 'quantity', 
    header: 'Quantity',
    meta: {
      editable: true,
      editInputType: 'number',
      min: 0,
      validate: (v) => v >= 0 || 'Must be positive'
    }
  },
  { 
    accessorKey: 'verified', 
    header: 'Verified',
    meta: {
      editable: true,
      editInputType: 'checkbox'
    }
  },
];

<EcoDataGrid
  data={data}
  columns={columns}
  enableEditing
  onCellEdit={({ rowIndex, columnId, newValue }) => {
    // Update your data source
    setData(prev => {
      const updated = [...prev];
      updated[rowIndex][columnId] = newValue;
      return updated;
    });
  }}
/>

<div class="eco-datagrid__wrapper">
  <div class="eco-datagrid__container">
    <table class="eco-datagrid eco-datagrid--striped">
      <thead class="eco-datagrid__head">
        <tr class="eco-datagrid__row eco-datagrid__row--header">
          <th class="eco-datagrid__cell eco-datagrid__cell--header eco-datagrid__cell--sortable">
            <div class="eco-datagrid__header-content">
              Column Name
              <span class="eco-datagrid__sort-indicator">↕</span>
            </div>
          </th>
        </tr>
      </thead>
      <tbody class="eco-datagrid__body">
        <tr class="eco-datagrid__row">
          <td class="eco-datagrid__cell">Cell value</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="eco-datagrid__pagination">
    <!-- Pagination controls -->
  </div>
</div>

Charts

EcoKit provides chart components built on Recharts (React) and Chart.js (vanilla JS), fully themed with EcoKit design tokens.

Line Chart

Monthly CO2 Emissions

Emissions tracking over 12 months

Bar Chart

Emissions by Category

Breakdown of emissions sources

Area Chart

Energy Consumption

Renewable vs fossil fuel energy

Pie Chart

Energy Mix Distribution

Percentage breakdown by source

Chart Components

EcoKit charts are React components that wrap Recharts with EcoKit theming. They automatically use EcoKit colors, typography, and spacing tokens.

Available Chart Types:

EcoLineChart - Line charts for trends over time
EcoAreaChart - Area charts for cumulative data
EcoBarChart - Vertical and horizontal bar charts
EcoPieChart - Pie and donut charts for proportions

Features:

✅ Fully themed with EcoKit design tokens
✅ Responsive and accessible
✅ Customizable colors and styling
✅ Multiple height presets (compact, standard, large, tall)
✅ Built-in tooltips and legends

Installation:

npm install recharts

View Documentation & Examples

Show React code example

import { EcoLineChart } from '@/assets/EcoKit/components/charts';

const data = [
  { month: 'Jan', emissions: 4000 },
  { month: 'Feb', emissions: 3000 },
  { month: 'Mar', emissions: 2000 },
];

<EcoLineChart
  title="Monthly Emissions"
  data={data}
  dataKey="month"
  lines={[
    { dataKey: 'emissions', name: 'Emissions (tons)' }
  ]}
/>

Dividers

Show code

Content above

Content below

<hr class="eco-divider" />

Grid System

Basic Grid

Responsive Grid

Offset Columns

Breakpoints

Buttons

Cards

Default Card

Elevated Card

Outlined Card

Inputs

Badges

Score Badges

Notifications

Alerts

Tables

Lists

Progress Bars

Avatars

With Status Indicator

With Image

Accordions

Rating Scale

Tabs

Form Elements

Radio Buttons

Checkboxes

Dropdowns

Basic Dropdown

Calendar & Date

Date Range

Toggle Buttons

Toggle Group

Switches

Pagination

Small Size

Modals

Breadcrumbs

With Chevron Separator

With Arrow Separator

Data Grid

Basic Data Grid

Financial Data Grid with Deltas

Compact Data Grid

Data Grid Features

Props:

Inline Editing:

Cell Renderers:

React Usage:

Inline Editing Example:

Charts

Line Chart

Monthly CO2 Emissions

Bar Chart

Emissions by Category

Area Chart

Energy Consumption

Pie Chart

Energy Mix Distribution

Chart Components

Available Chart Types:

Features:

Dividers

Modal Title