apiframeworks-api-docs

A reusable React component library for rendering OpenAPI documentation UIs. Easily embed beautiful, interactive API docs in your React or Next.js projects.

Features

• Sidebar navigation grouped by tags
• Endpoint details with parameters, request/response info
• Customizable and theme-friendly
• TypeScript support

Installation

npm install apiframeworks-api-docs

Note: react, next, clsx, js-yaml, next-themes, @radix-ui/*, and shadcn/ui are required as peer dependencies. Install them in your project if not already present.

Tailwind CSS Setup

This package requires Tailwind CSS for styling. If you don't already have it set up, follow these steps:

1. Install Tailwind CSS

npm install tailwindcss @tailwindcss/postcss postcss

2. Configure PostCSS Plugins

Create a postcss.config.mjs file in the root of your project and add the @tailwindcss/postcss plugin:

// postcss.config.mjs
const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};
export default config;

3. Import Tailwind CSS

Add an @import to your ./src/styles/globals.css (or ./src/app/globals.css if using app directory) to import Tailwind CSS:

@import "tailwindcss";

Usage

import { ApiFrameworksDoc } from 'apiframeworks-api-docs';

const openApiSpec = {/* ...your OpenAPI spec object... */};

export default function ApiDocsPage() {
  return <ApiFrameworksDoc spec={openApiSpec} isExpanded={true} />;
}

Sidebar Only

import { ApiDocsSidebar } from 'apiframeworks-api-docs';

// ...
<ApiDocsSidebar tags={/* see below */} onNavigate={id => { /* scroll logic */ }} />

Endpoint Section Only

import { EndpointSection } from 'apiframeworks-api-docs';

// ...
<EndpointSection path="/pets" method="get" operation={/* OpenAPI operation object */} />

Exports

• ApiFrameworksDoc – Main documentation UI
• ApiDocsSidebar – Sidebar navigation
• EndpointSection – Endpoint details
• ApiComponentSection, ComponentsSection, HttpMethodBadge, Button (UI)

Peer Dependencies

Make sure to install these in your app:

npm install react next clsx js-yaml next-themes @radix-ui/react-accordion @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-label @radix-ui/react-navigation-menu @radix-ui/react-progress @radix-ui/react-scroll-area @radix-ui/react-select @radix-ui/react-separator @radix-ui/react-slot @radix-ui/react-tabs @radix-ui/react-tooltip shadcn/ui

Troubleshooting

• Import errors: Ensure your app's tsconfig.json includes src in baseUrl or uses correct import paths.
• Styles: Import src/styles/globals.css in your app if needed.
• Component not found: Check the Exports section for available components.

Contributing

PRs and issues welcome!

License

MIT