OSS-first docs

These docs teach the open system first: contracts, generated surfaces, runtimes, governance, and incremental adoption. Studio shows up as the operating layer on top, not as the source of truth.

AI index

@lssm-tech/lib.ui-kit

Universal UI components for React Native and Web, built on top ofnativewind and @rn-primitives.

Installation

bun add @lssm-tech/lib.ui-kit

Key Features

  • Universal: Components render natively on iOS/Android and as standard HTML on web
  • Styled with NativeWind: Uses Tailwind CSS classes for styling
  • Accessible: Leverages @rn-primitives (Radix UI for Native)
  • Atomic Design: Exports atoms, molecules, and organisms

Data table example

The canonical Data Grid Showcase uses @lssm-tech/lib.ui-kit/ui/data-table as the native-first primitive lane. It shares the same controller model as the web renderer while keeping the React Native / Expo surface explicit.

import { DataTable } from '@lssm-tech/lib.ui-kit/ui/data-table';
import { useContractTable } from '@lssm-tech/lib.presentation-runtime-react';

import { SHOWCASE_ROWS } from '@lssm-tech/example.data-grid-showcase/ui/data-grid-showcase.data';
import { useShowcaseColumns } from '@lssm-tech/example.data-grid-showcase/ui/data-grid-showcase.columns';
import {
  ExpandedRowContent,
  ShowcaseToolbar,
} from '@lssm-tech/example.data-grid-showcase/ui/data-grid-showcase.parts';

export function NativeAccountGrid() {
  const columns = useShowcaseColumns();

  const controller = useContractTable({
    data: SHOWCASE_ROWS,
    columns,
    selectionMode: 'single',
    initialState: {
      sorting: [{ id: 'arr', desc: true }],
      pagination: { pageIndex: 0, pageSize: 4 },
      columnVisibility: { notes: false },
      columnPinning: { left: ['account'], right: [] },
    },
    renderExpandedContent: (row) => <ExpandedRowContent row={row} />,
    getCanExpand: () => true,
  });

  return (
    <DataTable
      controller={controller}
      toolbar={
        <ShowcaseToolbar
          controller={controller}
          label="Native primitive"
          primaryColumnId="account"
          toggleColumnId="notes"
          pinColumnId="owner"
          sortColumnIds={['arr', 'renewalDate']}
        />
      }
      loading={false}
      footer={`Rows ${controller.rows.length}`}
    />
  );
}

Core Components

Form Controls

  • Button
  • Input
  • Checkbox
  • Switch
  • Select

Layout

  • Card
  • Stack
  • Separator
  • Sheet

Feedback

  • Alert
  • Skeleton
  • Progress
  • Tooltip

Where this layer fits

Read Cross-platform UI for the full React and React Native compatibility model around this native-first primitive lane.

Previous: SchemaNext: UI Kit Web