# Components \[Reference for the public React components exported from Vocs]
Reference for the public React components exported from `vocs`.
## Badge
Use `Badge` to add a small status label inline with content.
:::code-group
Stable
```tsx [Code]
import { Badge } from 'vocs'
export function ReleaseStatus() {
return Stable
}
```
:::
## Callout
Use `Callout` when you want a callout component in JSX instead of Markdown directives.
:::code-group
Breaking change: update your config before upgrading.
```tsx [Code]
import { Callout } from 'vocs'
export function UpgradeNotice() {
return Breaking change: update your config before upgrading.
}
```
:::
## Card
Use `Card` to create a linked card with a title, description, and optional icon.
:::code-group
```tsx [Code]
import { Card } from 'vocs'
export function QuickLink() {
return (
)
}
```
:::
## Cards
Use `Cards` as a responsive grid wrapper for multiple `Card` children.
:::code-group
```tsx [Code]
import { Card, Cards } from 'vocs'
export function QuickLinks() {
return (
)
}
```
:::
## HomePage
`HomePage` is a namespace export with helpers for building landing pages, including `HomePage.Root`, `HomePage.Logo`, `HomePage.Tagline`, `HomePage.Description`, `HomePage.Buttons`, `HomePage.Button`, `HomePage.InstallPackage`, and `HomePage.CreatePackage`.
:::code-group
Portable docs powered by Vite and{' '}
Waku.
Build a documentation site with Vocs.
Get started
```tsx [Code]
import { HomePage } from 'vocs'
export function LandingPage() {
return (
Portable docs powered by Vite and{' '}
Waku.
Build a documentation site with Vocs.
Get started
)
}
```
:::
## FeedbackWidget
Use `FeedbackWidget` to render the built-in feedback UI manually.
:::code-group
```tsx [Code]
import { FeedbackWidget } from 'vocs'
export function PageFeedback() {
return
}
```
:::
`FeedbackWidget` only renders when `feedback` is configured in `vocs.config.ts`.
## Head
Use `Head` when you are composing your own page shell and still want Vocs to emit its metadata.
```tsx
import { Head } from 'vocs'
export function CustomShell(props: { children: React.ReactNode }) {
return (
<>
{props.children}
)
}
```
## Layout
Use `Layout` to render the built-in Vocs shell around custom page content.
```tsx
import { Layout } from 'vocs'
export default function Page(props: { children: React.ReactNode }) {
return