@pontx/shadcn-ui

React components for API documentation and schema viewing with shadcn/ui styling.

Features

• SchemaViewer: A powerful JSON Schema viewer component
• ApiDocumentation: Complete API documentation component with request/response schemas
• Built with shadcn/ui components for consistent styling
• TypeScript support
• Tree-shakable ES modules

Installation

npm install @pontx/shadcn-ui

Development

For developers working on this package:

# Build the npm package
npm run build:lib

# Publish to npm (requires npm login)
npm run publish:lib

Usage

SchemaViewer

import { SchemaViewer } from "@pontx/shadcn-ui";

const schema = {
  type: "object",
  properties: {
    name: { type: "string" },
    age: { type: "number" },
  },
};

function App() {
  return <SchemaViewer schema={schema} name="User Schema" expanded={true} />;
}

ApiDocumentation

import { ApiDocumentation } from "@pontx/shadcn-ui";
import { PontxAPI } from "@pontx/spec";

const apiData: PontxAPI = {
  title: "User API",
  method: "GET",
  path: "/api/users",
  // ... other API data
};

function App() {
  return <ApiDocumentation api={apiData} />;
}

Individual Components

You can also import individual components:

import { SchemaViewer } from "@pontx/shadcn-ui/schema-viewer";
import { ApiDocumentation } from "@pontx/shadcn-ui/api-documentation";

Requirements

• React 18+
• Tailwind CSS (for styling)

Styling

This package includes pre-built styles that you can import:

// Import the styles
import "@pontx/shadcn-ui/styles";

// Or import components with styles
import { SchemaViewer, ApiDocumentation } from "@pontx/shadcn-ui";

The styles include:

• Tailwind CSS base styles
• Custom CSS variables for theming
• Component-specific styles

License

MIT