| name | onyx-components |
| description | Best practices and dynamic API lookup instructions for Onyx UI components. Use when implementing UI features, forms, or building Vue templates. |
| license | Apache-2.0 |
Onyx Components
Implement and configure Onyx Vue 3 UI components using authoritative API definitions.
Rule: Mandatory Dynamic API Lookups (MCP)
Onyx component APIs are dynamic and change across versions. NEVER guess or assume props, events, or slots.
Action Components (Buttons & Links)
- Props-based Links: Components like
OnyxButton, OnyxIconButton, OnyxSystemButton, OnyxMenuItem, and OnyxNavItem support a link prop. Do not wrap these components in raw <a> tags; pass the URL to the link prop.
- Headless Links: Use the
useLink composable (const { navigate, isActive } = useLink()) or OnyxRouterLink for custom unstyled navigation components.
Form Elements
- Labels & Messages: Always configure standard
Message and LabelPositions properties consistently.
- Loading State: Implement built-in
Skeleton loading states when loading form data.
- Accessibility: Use proper labels and fieldsets for complex multi-input forms (
date-picker, radio-group, checkbox-group).
Cards & Layout Structure
- Nest and structure basic components (
Accordion, Cards, Badge, Tag) inside the Onyx grid layout (see onyx-foundation) to prevent layout breaking.
Validation & Quality Check
After writing or updating components, you MUST run the following verification steps:
- Type Check: Run TypeScript verification (e.g.,
npx vue-tsc --noEmit or npm run type-check) to confirm no invalid props or event bindings exist.
- Linter Check: Run standard project linters (e.g.,
npm run lint or eslint .) to confirm code style and rules are respected.
- Manual Verification: Confirm all slots and custom events mapped conform to the authoritative API fetched from the MCP.
