Components
The module registers every component in src/components/ under the Ryder prefix, so they auto-import into pages and app components. Each component has its own page below — with props, emits, slots and a live example you can edit in the playground.
Import
Auto-imported under the Ryder prefix (no folder segment):
vue
<template>
<RyderButton>Save</RyderButton>
<RyderEmptyState title="Nothing here" description="Try again later." />
</template>Explicit imports use the folder path:
ts
import RyderSideNav from "@opeolluwa/ryder/components/navigation/SideNav.vue"Pages by folder
| Folder | Import path after @opeolluwa/ryder/components/ | Components |
|---|---|---|
| primitives | primitives/ | Button Card Input Logo Select Textarea |
| feedback | feedback/ | BottomSheet CreateDialog Dialog EmptyState PageHeader PageLoader |
| navigation | navigation/ | BottomNav Fab SideNav |
| typography | typography/ | LeadingText SubText |
| auth | auth/ | AuthHeader |
| complaints | complaints/ | ComplaintList ComplaintListItem ComplaintHeader ComplaintThread ComplaintPreview ComplaintForm ComplaintCreateForm ComplaintCreateDialog ComplaintDialog |
| orders | orders/ | OrderList OrderListItem OrderPreview OrderStatusBadge CancelOrderDialog |
| notes | notes/ | Editor EditorToolBar PullToRefresh ToolBarWrapper |
Gotcha — layouts vs. auto-imports
Nuxt auto-imports the Ryder* components into pages and app components, but not into app layout files (app/layouts/*.vue). A layout that renders a shared component must import it explicitly:
vue
<script setup lang="ts">
import RyderShell from "@opeolluwa/ryder/layouts/RyderShell.vue"
import RyderSideNav from "@opeolluwa/ryder/components/navigation/SideNav.vue"
</script>Domain types & helpers
The order and complaint components share the domain types and helpers in @opeolluwa/ryder/types and @opeolluwa/ryder/utils (status colours, totals, customer labels, …) — each page links the ones it uses.