@omnikit-js/ui

React component library for OmniKit serverless platform. Provides both server and client components for building data-driven applications.

Installation

npm install @omnikit-js/ui
# or
pnpm add @omnikit-js/ui
# or
yarn add @omnikit-js/ui

Components

DataList

A server-side component that fetches and displays data from OmniKit API with zero client JavaScript.

Features:

• Server-side rendering (SSR)
• Automatic data fetching from OmniKit /data/{table} endpoints
• Support for filtering, sorting, pagination
• Tailwind CSS styling (customizable)
• TypeScript support

Usage:

import { DataList } from '@omnikit-js/ui'

export default async function UsersPage() {
  return (
    <DataList
      table="users"
      baseUrl={process.env.OMNIKIT_BASE_URL!}
      apiKey={process.env.OMNIKIT_API_KEY!}
      columns={['name', 'email', 'created_at']}
      filter={{ active: true }}
      limit={20}
    />
  )
}

Props:

| Prop | Type | Required | Description | |------|------|----------|-------------| | table | string | Yes | Table name to query | | baseUrl | string | Yes | OmniKit API base URL (e.g., http://localhost:3000/omnikit) | | apiKey | string | No | API Key for authentication | | jwt | string | No | JWT token (alternative to apiKey) | | columns | Column[] | Yes | Columns to display | | keyField | string | No | Row key field (default: 'id') | | filter | object | No | Query filter | | sort | string | No | Sort order (e.g., 'name:asc') | | limit | number | No | Max records to fetch | | offset | number | No | Pagination offset | | className | string | No | Custom container class | | emptyMessage | string | No | Message when no data | | errorMessage | string | No | Error message |

Custom Columns:

<DataList
  table="users"
  baseUrl={baseUrl}
  apiKey={apiKey}
  columns={[
    'name',
    'email',
    {
      key: 'created_at',
      label: 'Joined',
      render: (value) => new Date(value).toLocaleDateString(),
    },
    {
      key: 'active',
      label: 'Status',
      render: (value) => value ? '✓ Active' : '✗ Inactive',
    },
  ]}
/>

API Client

Use the OmniKit client for custom data fetching:

import { createOmniKitClient } from '@omnikit-js/ui'

const client = createOmniKitClient({
  baseUrl: 'http://localhost:3000/omnikit',
  apiKey: 'your-api-key',
})

// Query data
const users = await client.query('users', {
  filter: { active: true },
  sort: 'name:asc',
  limit: 10,
})

// Find by ID
const user = await client.findById('users', '123')

// Insert
await client.insert('users', { name: 'John', email: '[email protected]' })

// Update
await client.update('users', '123', { name: 'Jane' })

// Delete
await client.delete('users', '123')

Development

Quick Start

Run library watch build + demo app:

cd /Users/marcoschwartz/Documents/code/frontends/omnikit/omnikit-ui
./dev.sh

Visit: http://localhost:3060

See QUICKSTART.md for detailed instructions.

Tech Stack

• React 18/19 - Peer dependency
• TypeScript - Full type safety
• Tailwind CSS v4 - Styling (requires Tailwind in your project)
• tsup - Build tooling

License

MIT