# Components

Render API operations with focused request, response, schema, and security components.

import { Card, CardGrid } from '@prosefly/astro-components';

Astro OpenAPI components are designed to compose inside an operation page.
They receive the generated operation entry and keep the API reference layout
close to the documentation content.

<CardGrid>
  <Card icon="lucide:send" title="Requests">
    Render parameters, request bodies, media types, and generated examples.
  </Card>
  <Card icon="lucide:check-check" title="Responses">
    Show response status codes, headers, media types, and schema details.
  </Card>
  <Card icon="lucide:shield-check" title="Security">
    Explain authentication schemes and the security requirements of an operation.
  </Card>
  <Card icon="lucide:braces" title="Schemas">
    Display nested object fields, arrays, enums, and reusable schema details.
  </Card>
</CardGrid>

## Render an operation page

```astro
---
import {
  ApiReferenceAside,
  ApiRequestSection,
  ApiResponsesSection,
  ApiSecuritySection,
} from '@prosefly/astro-openapi/components';

const { entry } = Astro.props;
---

<ApiSecuritySection operation={entry} />
<ApiRequestSection operation={entry} />
<ApiResponsesSection operation={entry} />

<Fragment slot="aside">
  <ApiReferenceAside entry={entry} />
</Fragment>
```

The package also provides `ApiAuthenticationSection`, `ApiMarkdown`,
`ApiMethodBadge`, `ApiOperationAside`, `ApiRequestExamples`,
`ApiResponseExamples`, `ApiSchema`, and `ApiWebhookAside` for more specific
layouts.