Composition and API
Pass the endpoint details as props: method drives the HTTP method badge color, path displays the route pattern, description provides context, and authenticated toggles an authentication badge. The method prop accepts GET, POST, PUT, PATCH, DELETE, HEAD, and OPTIONS.
Accessibility
The card renders with semantic markup and data-slot attributes for styling and testing. The method badge carries a data-method attribute reflecting the HTTP verb, and the authentication badge uses a data-authenticated attribute. Color is never the only signal — text labels accompany every visual indicator.
Next.js integration notes
The static ApiEndpointCard entry ships no framer-motion and is safe in any Server or Client Component tree. It renders deterministically from the given props, so server and client output match and there is no hydration mismatch. Import it from @zentauri-ui/zentauri-components/ui/api-endpoint-card.
FAQ
How is the method badge color chosen?
Each HTTP method maps to a distinct semantic color: GET is green, POST is blue, PUT is orange, PATCH is purple, DELETE is red, HEAD is cyan, and OPTIONS is slate. These colors route through the --zui-api-endpoint-card-* tokens with light and dark values.
Can I add an authentication indicator?
The component does not include a built-in authenticated prop. Add a description or tags to indicate auth requirements, or wrap the card with your own authentication badge.
Can I customize the path and description styles?
Yes. Override the --zui-api-endpoint-card-* CSS variables (path-fg, description-fg, and the per-method badge colors) on :root, a theme selector, or a wrapper. Each variable ships a light fallback and a paired -dark variant for dark mode.
Does it need framer-motion?
No. The API endpoint card is static and presentational with no animated entry, so it ships zero framer-motion and adds no motion dependency to your bundle.