React components for OpenPkg specs
npm install @openpkg-ts/reactReact components for rendering OpenPkg API documentation. Built on @openpkg-ts/ui.
``bash`
npm install @openpkg-ts/react
Peer deps: react@^18 || ^19, tailwindcss@^4 (optional, for styled)
Unstyled, logic-only components for custom styling.
`tsx`
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 |
Pre-styled with Tailwind v4.
`tsx
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';
`
Two-column layout with synchronized scrolling:
`tsx
import { StripeAPIReferencePage } from '@openpkg-ts/react/styled';
import spec from './openpkg.json';
export default function APIReference() {
return
}
`
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
`tsx
import {
APIReferenceLayout,
SyncScrollProvider,
MethodSectionFromSpec,
ExampleSection,
} from '@openpkg-ts/react/styled';
export default function CustomAPIPage({ spec }) {
return (
leftWidth="55%"
rightWidth="45%"
>
{spec.exports.map(exp => (
))}
);
}
`
`tsx
import { FullAPIReferencePage } from '@openpkg-ts/react/styled';
import spec from './openpkg.json';
export default function APIReference() {
return
}
`
`tsx
import { FunctionPage } from '@openpkg-ts/react/styled';
export default function CreateClientPage() {
const fn = spec.exports.find(e => e.name === 'createClient');
return
}
`
`tsx
import { ExportCard, ParameterItem } from '@openpkg-ts/react/styled';
import { buildSignatureString } from '@openpkg-ts/sdk';
export default function CustomExport({ exp }) {
return (
kind={exp.kind}
signature={buildSignatureString(exp)}
description={exp.description}
>
{exp.signatures?.[0]?.parameters?.map(param => (
))}
);
}
`
Convert spec data to component props:
`tsx
import {
// Original adapters
specParamToAPIParam,
specSchemaToAPISchema,
specExamplesToCodeExamples,
buildImportStatement,
getLanguagesFromExamples,
// New Stripe-style adapters
specParamToNestedParam,
specParamsToNestedParams,
resolveSchemaRef,
specExampleToCodeExample,
generateDefaultExample,
} from '@openpkg-ts/react/styled';
`
Extract method data from spec:
`tsx
import {
useMethodFromSpec,
useMethodsFromSpec,
extractMethodData,
} from '@openpkg-ts/react/styled';
// In component
const method = useMethodFromSpec(spec, 'createClient');
// Returns: { title, signature, description, parameters, examples, returnType, isAsync }
`
`tsx`
import {
cleanCode,
getExampleCode,
getExampleLanguage,
getExampleTitle,
groupMembersByKind,
} from '@openpkg-ts/react';
Install components via CLI (shadcn-compatible):
`bashList available components
openpkg docs list
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-tableReact Layout Generation
Generate a single layout file that uses registry components:
`bash
openpkg docs generate spec.json -f react -o ./app/api
`Creates:
-
layout.tsx - Main layout with navigation
- spec.json - Bundled spec dataThen add components:
`bash
openpkg docs add function-section class-section
``MIT