API Endpoint

FreeNew

A collapsible card that documents one HTTP endpoint with its parameters, request example and responses.

The full demo as documented.

Customize

Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.

method

path

summary

description

baseUrl

auth

requestExample

defaultOpen

Guide and examples

Installation


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/api-endpoint.json

Usage

import { ApiEndpoint } from "@/components/ui/api-endpoint"

<ApiEndpoint
  method="GET"
  path="/v1/customers/{id}"
  baseUrl="https://api.example.com"
  summary="Retrieve a customer"
  parameters={[{ name: "id", in: "path", type: "string", required: true }]}
  responses={[
    {
      status: 200,
      description: "The customer.",
      example: '{ "id": "cus_42" }',
    },
  ]}
/>

Props

ApiEndpoint

Prop	Type	Default	Description
`method`	`"GET" \| "POST" \| "PUT" \| "PATCH" \| "DELETE"`	-	HTTP method.
`path`	`string`	-	Path, with `{name}` for path parameters.
`summary`	`string`	-	Short name of the operation.
`description`	`string`	-	Longer explanation.
`baseUrl`	`string`	-	Prepended to `path` by the copy URL button.
`auth`	`string`	-	Authentication needed, shown as a lock chip.
`parameters`	`EndpointParameter[]`	`[]`	Request fields, grouped by location.
`requestExample`	`string`	-	Example request body.
`requestLanguage`	`HighlightLanguage`	`json`	Highlighter for the request body.
`responses`	`EndpointResponse[]`	`[]`	Possible responses, one tab each.
`defaultOpen`	`boolean`	`true`	Open at first.
`open`	`boolean`	-	Controlled open state.
`onOpenChange`	`(open: boolean) => void`	-	Called when the card opens or closes.

Also accepts all <div> props except title and children.

EndpointParameter

Prop	Type	Default	Description
`name`	`string`	-	Parameter name.
`in`	`"path" \| "query" \| "header" \| "body"`	-	Where it goes.
`type`	`string`	-	Type, such as `string`.
`required`	`boolean`	-	Shows a required chip.
`description`	`string`	-	What it means.
`default`	`string`	-	Default value when omitted.

EndpointResponse

Prop	Type	Default	Description
`status`	`number`	-	HTTP status code.
`description`	`string`	-	Short meaning.
`example`	`string`	-	Example body.
`language`	`HighlightLanguage`	`json`	Highlighter for the example.

Guide and examples

Installation


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/api-endpoint.json

Usage

import { ApiEndpoint } from "@/components/ui/api-endpoint"

<ApiEndpoint
  method="GET"
  path="/v1/customers/{id}"
  baseUrl="https://api.example.com"
  summary="Retrieve a customer"
  parameters={[{ name: "id", in: "path", type: "string", required: true }]}
  responses={[
    {
      status: 200,
      description: "The customer.",
      example: '{ "id": "cus_42" }',
    },
  ]}
/>

Props

ApiEndpoint

Prop	Type	Default	Description
`method`	`"GET" \| "POST" \| "PUT" \| "PATCH" \| "DELETE"`	-	HTTP method.
`path`	`string`	-	Path, with `{name}` for path parameters.
`summary`	`string`	-	Short name of the operation.
`description`	`string`	-	Longer explanation.
`baseUrl`	`string`	-	Prepended to `path` by the copy URL button.
`auth`	`string`	-	Authentication needed, shown as a lock chip.
`parameters`	`EndpointParameter[]`	`[]`	Request fields, grouped by location.
`requestExample`	`string`	-	Example request body.
`requestLanguage`	`HighlightLanguage`	`json`	Highlighter for the request body.
`responses`	`EndpointResponse[]`	`[]`	Possible responses, one tab each.
`defaultOpen`	`boolean`	`true`	Open at first.
`open`	`boolean`	-	Controlled open state.
`onOpenChange`	`(open: boolean) => void`	-	Called when the card opens or closes.

Also accepts all <div> props except title and children.

EndpointParameter

Prop	Type	Default	Description
`name`	`string`	-	Parameter name.
`in`	`"path" \| "query" \| "header" \| "body"`	-	Where it goes.
`type`	`string`	-	Type, such as `string`.
`required`	`boolean`	-	Shows a required chip.
`description`	`string`	-	What it means.
`default`	`string`	-	Default value when omitted.

EndpointResponse

Prop	Type	Default	Description
`status`	`number`	-	HTTP status code.
`description`	`string`	-	Short meaning.
`example`	`string`	-	Example body.
`language`	`HighlightLanguage`	`json`	Highlighter for the example.