Docyrus UI — React Components

@docyrus/ui is the Docyrus web component library (React 19 + Tailwind v4, distributed via a self-hosted shadcn registry). This skill is the master index: every web component and hook, with a one-line description, its import path, and a link to its llms.txt documentation page.

How to use this skill

1. Find the component in the categorized tables below (or the [hooks catalog](references/hooks-catalog.md)).
2. Fetch its llms.txt page (the link in each row) with WebFetch (or curl) before writing code. The catalog descriptions are intentionally short; the llms.txt page is the source of truth for props, types, variants, sizes, usage snippets, and dependencies. Never guess a component's API — read the page.
3. Install it into a consuming project with the Docyrus CLI:

- Component: docyrus add @docyrus/ui-<slug> (e.g. docyrus add @docyrus/ui-data-grid) - Hook: docyrus add @docyrus/hooks-<slug> (e.g. docyrus add @docyrus/hooks-use-docyrus-data-grid)

1. Import from the package export:

- Component: import { DataGrid } from '@docyrus/ui/components/data-grid'; - Hook: import { useDocyrusDataGrid } from '@docyrus/ui/library/hooks/use-docyrus-data-grid'; - Primitive: import { Button } from '@docyrus/ui/primitives/ui/button';

Docs base URL is https://ui.docy.app. The per-page LLM doc lives at …/docs/web/<section>/<slug>/llms.txt; the human page drops the /llms.txt suffix.

Master documentation indexes

Fetch these when you need the full library at once instead of a single component:

• All web components & hooks (index): https://ui.docy.app/llms-web.txt
• All web components & hooks (full text, concatenated): https://ui.docy.app/llms-full-web.txt
• Everything (web + native, index): https://ui.docy.app/llms.txt
• Everything (web + native, full text): https://ui.docy.app/llms-full.txt

Connection model

• Standalone components work with local props/state — no backend needed.
• Docyrus-connected components (the "Docyrus" section + most useDocyrus hooks) need an authenticated @docyrus/api-client. The pattern is: pick the presentational component, then wire it with its useDocyrus hook, which fetches data and returns ready-to-spread props.
• For tenant-aware date/number formatting across grids, calendars, filters, and value renderers, mount <DocyrusTenantProvider client={...} enabled={authReady} userTimezone={tz}> once near the app root (see useDocyrusTenant).

When to also load another skill

• Full data-grid / record-list pages (saved views, toolbar, filtering, paging) → docyrus-data-grid-page-design.
• Record forms / detail / inline-edit UIs → docyrus-record-detail-form-design.
• CRM-style two-pane detail pages → docyrus-crm-like-detail-page-design.
• Query payloads / API calls (filters, aggregations, child queries) → docyrus-api-dev.

Component catalog (web)

Each row links to the component's llms.txt — read it before implementing.

Data grids, tables, galleries & pivots

Records, forms, schemas & values

Scheduling, time & boards

Inputs, pickers & buttons

Panels, activity, cards & notifications

Messaging, chat & AI

Editors, code workbenches & media

Adaptive Cards (Microsoft)

Dialogs & data wizards

Docyrus-connected components

These require an authenticated @docyrus/api-client (passed as a client prop or wired through the matching useDocyrus* hook). Their docs live under web/docyrus/.

Hooks

@docyrus/ui ships generic context hooks (formatting, i18n, click-outside, export) and a large family of useDocyrus* data hooks that wire a component to a Docyrus data source in one call. The full catalog — descriptions, imports, and llms.txt links — is in [references/hooks-catalog.md](references/hooks-catalog.md).

Quick map of the highest-value data hooks:

• useDocyrusDataGrid / useDocyrusDataTable / useDocyrusDataGallery → list pages.
• useDocyrusFormView → create/edit/view record forms.
• useDocyrusKanban, useDocyrusCalendar, useDocyrusMapView, useDocyrusPivotGrid, useDocyrusPivotCalendar, useDocyrusPivotFilter → the matching visualization components.
• useDocyrusTenant → mount once to enable tenant-aware date/number formatting everywhere.
• useDocyrusFieldComponent → resolve the right input/renderer/cell for any field type.

Notes

• This catalog is web (@docyrus/ui) only. React Native components ship from @docyrus/ui-native (@docyrus/rn-<name>) and are documented under https://ui.docy.app/docs/native/… (see https://ui.docy.app/llms-native.txt).
• Descriptions are mirrored from each page's docs frontmatter. A terse "X component with multiple variants and sizes." line means the page itself carries the detailed API — always fetch the llms.txt page before implementing.
• Components are distributed via a self-hosted shadcn registry; in a Docyrus app you typically already have @docyrus/ui as a dependency, so import directly. Use docyrus add … when copying source into a standalone shadcn-style project.