Docyrus UI React Components

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).
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)
4. 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.

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.