@openpkg-ts/react

@openpkg-ts/react

React components for rendering OpenPkg API documentation. Built on @openpkg-ts/ui.

Install

npm install @openpkg-ts/react

Peer deps: react@^18 || ^19, tailwindcss@^4 (optional, for styled)

Entry Points

Headless Components

Unstyled, logic-only components for custom styling.

import {
  CollapsibleMethod,
  ExampleBlock,
  ExpandableProperty,
  MembersTable,
  MemberRow,
  NestedProperty,
  ParamTable,
  ParamRow,
  Signature,
  TypeTable,
  // Section components
  FunctionSection,
  ClassSection,
  InterfaceSection,
  EnumSection,
  VariableSection,
  ExportCard,
  ExportIndexPage,
} from '@openpkg-ts/react';

Component	Description
CollapsibleMethod	Expandable method with signature
ExampleBlock	Code example display
ExpandableProperty	Property with nested children
MembersTable	Class/interface members table
MemberRow	Single member row
NestedProperty	Nested property display
ParamTable	Function parameters table
ParamRow	Single parameter row
Signature	Type signature renderer
TypeTable	Type properties table
FunctionSection	Function export section
ClassSection	Class export section
InterfaceSection	Interface export section
EnumSection	Enum export section
VariableSection	Variable/constant section
ExportCard	Single export card
ExportIndexPage	Index page for all exports

Styled Components

Pre-styled with Tailwind v4.

import {
  // Stripe/Supabase-style layout (NEW)
  StripeAPIReferencePage,
  APIReferenceLayout,
  SyncScrollProvider,
  MethodSection,
  MethodSectionFromSpec,

  // Parameter components (Stripe-style)
  APIParameterItem,
  NestedParameterToggle,
  NestedParameterContainer,
  ExpandableParameter,
  EnumValuesSection,

  // Code example components
  ExampleChips,
  CodePanel,
  CollapsiblePanel,
  ExampleSection,

  // Full pages (original)
  APIPage,
  FunctionPage,
  ClassPage,
  InterfacePage,
  EnumPage,
  VariablePage,
  ExportIndexPage,
  FullAPIReferencePage,

  // Sections (for composition)
  FunctionSection,
  ClassSection,
  InterfaceSection,
  EnumSection,
  VariableSection,
  ExportSection,

  // Utilities
  ExportCard,
  ParameterItem,
  CodeTabs,
  ImportSection,
} from '@openpkg-ts/react/styled';

Usage

Stripe/Supabase-Style API Reference (NEW)

Two-column layout with synchronized scrolling:

import { StripeAPIReferencePage } from '@openpkg-ts/react/styled';
import spec from './openpkg.json';

export default function APIReference() {
  return <StripeAPIReferencePage spec={spec} />;
}

Features:

• Two-column layout (docs left, code examples right)
• Sticky right panel with synchronized scrolling
• Stripe-style nested parameters with expandable containers
• Rose Pine syntax highlighting
• Collapsible accordion panels

Custom Stripe-Style Layout

import {
  APIReferenceLayout,
  SyncScrollProvider,
  MethodSectionFromSpec,
  ExampleSection,
} from '@openpkg-ts/react/styled';

export default function CustomAPIPage({ spec }) {
  return (
    <SyncScrollProvider>
      <APIReferenceLayout
        examples={<ExamplesColumn spec={spec} />}
        leftWidth="55%"
        rightWidth="45%"
      >
        {spec.exports.map(exp => (
          <MethodSectionFromSpec key={exp.name} spec={spec} export={exp} />
        ))}
      </APIReferenceLayout>
    </SyncScrollProvider>
  );
}

Full API Page (Original)

import { FullAPIReferencePage } from '@openpkg-ts/react/styled';
import spec from './openpkg.json';

export default function APIReference() {
  return <FullAPIReferencePage spec={spec} />;
}

Single Export Page

import { FunctionPage } from '@openpkg-ts/react/styled';

export default function CreateClientPage() {
  const fn = spec.exports.find(e => e.name === 'createClient');
  return <FunctionPage export={fn} packageName={spec.meta.name} />;
}

Custom Composition

import { ExportCard, ParameterItem } from '@openpkg-ts/react/styled';
import { buildSignatureString } from '@openpkg-ts/sdk';

export default function CustomExport({ exp }) {
  return (
    <ExportCard
      name={exp.name}
      kind={exp.kind}
      signature={buildSignatureString(exp)}
      description={exp.description}
    >
      {exp.signatures?.[0]?.parameters?.map(param => (
        <ParameterItem key={param.name} {...param} />
      ))}
    </ExportCard>
  );
}

Adapters

Convert spec data to component props:

import {
  // Original adapters
  specParamToAPIParam,
  specSchemaToAPISchema,
  specExamplesToCodeExamples,
  buildImportStatement,
  getLanguagesFromExamples,

  // New Stripe-style adapters
  specParamToNestedParam,
  specParamsToNestedParams,
  resolveSchemaRef,
  specExampleToCodeExample,
  generateDefaultExample,
} from '@openpkg-ts/react/styled';

Hooks

Extract method data from spec:

import {
  useMethodFromSpec,
  useMethodsFromSpec,
  extractMethodData,
} from '@openpkg-ts/react/styled';

// In component
const method = useMethodFromSpec(spec, 'createClient');
// Returns: { title, signature, description, parameters, examples, returnType, isAsync }

Headless Utilities

import {
  cleanCode,
  getExampleCode,
  getExampleLanguage,
  getExampleTitle,
  groupMembersByKind,
} from '@openpkg-ts/react';

Component Registry

Install components via CLI (shadcn-compatible):

# List available components
openpkg docs list

# Add Stripe-style components
openpkg docs add stripe-api-reference-page
openpkg docs add method-section-from-spec
openpkg docs add api-reference-layout sync-scroll-provider
openpkg docs add api-parameter-item expandable-property
openpkg docs add example-chips code-panel collapsible-panel

# Add original section components
openpkg docs add function-section class-section interface-section

29 components available:

• Stripe-style Layouts: api-reference-layout, sync-scroll-provider, method-section, stripe-api-reference-page, method-section-from-spec
• Parameter Components: api-parameter-item, nested-parameter-toggle, nested-parameter-container, expandable-property, enum-values-section
• Code Examples: example-chips, code-panel, collapsible-panel, example-section
• Original Sections: function-section, class-section, interface-section, enum-section, variable-section
• Primitives: export-card, param-table, signature, members-table, type-table

React Layout Generation

Generate a single layout file that uses registry components:

openpkg docs generate spec.json -f react -o ./app/api

Creates:

• layout.tsx - Main layout with navigation
• spec.json - Bundled spec data

Then add components:

openpkg docs add function-section class-section

License

MIT