Quick Start

Purpose

Pass data as a top-level prop and describe the layout in config. Mode-specific settings live under modeConfig.<mode>.

Core Example

Example Widgemo

Team Directory

All employees

Name	Email	Status
Alice	alice@example.com	active
Bob	bob@example.com	pending

Example Code

import { WidgemoThemeProvider, Widgemo } from '@widgemo/widgemo-core';
import '@widgemo/widgemo-core/style.css';

const data = [
  { id: 1, name: 'Alice', email: 'alice@example.com', status: 'active' },
  { id: 2, name: 'Bob', email: 'bob@example.com', status: 'pending' },
];

const config = {
  zones: {
    header: { title: 'Team Directory', subtitle: 'All employees' },
    content: {
      mode: 'table',
      modeConfig: { table: { type: 'traditional' } },
      item: {
        fields: [
          { key: 'name',  label: 'Name',  type: 'text',  sortable: true },
          { key: 'email', label: 'Email', type: 'email' },
          { key: 'status', label: 'Status', renderAs: 'badge',
            renderAsOptions: { colorMap: { active: '#198754', pending: '#ffc107' } } },
        ],
        layout: { type: 'auto' },
      },
    },
  },
};

function App() {
  return (
    <WidgemoThemeProvider theme="light">
      <Widgemo data={data} config={config} />
    </WidgemoThemeProvider>
  );
}

Variants

With a custom theme

Pass a WidgemoTheme object to override tokens or zone styles:

Example Widgemo

Team Directory

All employees

Name	Email	Status
Alice	alice@example.com	active
Bob	bob@example.com	pending

Example Code

<WidgemoThemeProvider theme={{
  colors: {
    actionButtonBg: '#0f172a',
    actionButtonColor: '#f8fafc',
  },
  zone: {
    backgroundColor: '#1e293b',
    titleColor: '#f8fafc',
  },
}}>
  <Widgemo data={data} config={config} />
</WidgemoThemeProvider>

Zero-config table

Fields are inferred from data keys only in table mode (first five keys from the first row). Card-based modes (grid, carousel, board, chart) require zones.content.item.fields.

Example Widgemo

id	name	email	status
1	Alice	alice@example.com	active
2	Bob	bob@example.com	pending

Example Code

const config = {
  zones: {
    content: {
      mode: 'table',
    },
  },
};

<Widgemo data={data} config={config} />

Integration Path

If you are adding Widgemo to an already-running product (instead of starting from scratch), continue with the integration guide:

• Adopting Widgemo

Next Steps

Use this progression to move from first render to production-safe configuration:

1. Your First Widgemo
2. Modes Overview
3. Content Config and Field Config as canonical contracts
4. Common Setup Pitfalls