UI ComponentsOpen-source component library

Accessible, Themed Components Built for Docyrus Apps

Build consistent Docyrus interfaces with accessible primitives, ready-made blocks, and data-aware components.

New Data Source
Source name
Customer Invoices
What this source stores
Optional summary…
Extract fields with AIPull fields from uploaded documents
Cancel
Create
Processing VolumeThis week
2,012+12%
Invoices1,284
Contracts842
Reports721
UI PrimitivesPreview
Dark mode
Notifications
Role
Admin
JDSKMR+4
Active
Recent Extractions
Search…
InvoiceAmountStatus
INV-0847Acme Corp
$12,480Verified
INV-0848Globex Inc
$8,340Pending
INV-0849Stark Ltd
$23,100Verified
INV-0850Wayne Ent
$5,720Review
Notifications
3 new
Batch upload complete47 documents processed
2m ago
New team membersarah@acme.com joined
15m ago
Scheduled exportWeekly report ready
1h ago
Type a command or search…⌘K
Quick Actions
Search documents…⌘K
Upload files⌘U
Invite team member⌘I
View all components

The cost of building UI without a shared system.

Skipping a shared library slows teams down, creates accessibility debt, and makes every screen feel slightly different.

Building from Scratch

Teams keep rebuilding dialogs, menus, and toasts before they ship the product work that actually matters.

Accessibility Gaps

Custom components often miss keyboard support, labels, and focus states, which creates compliance risk later.

Design Inconsistency

Without shared components, every screen ends up with different spacing, color, and interaction patterns.

Theming Nightmares

When colors are hard-coded, every brand update turns into a slow file-by-file cleanup.

Undocumented Patterns

Libraries without docs or examples turn into tribal knowledge that new teammates cannot use with confidence.

Framework Churn

Components tied to one UI stack are expensive to move when your framework or tooling changes.

Three layers of the Docyrus UI library.

From basic controls to data-aware components, the library covers the parts teams usually rebuild by hand.

One library for the full stack.

Start with primitives, move up to ready-made blocks, and connect data when you need it.

Form Primitives
Email
jane@acme.com
Start date
Mar 10, 2026
Required field
Read only
Reset
Submit
Theming & Tokens
Color tokens
Primary
Secondary
Muted
Danger
Card
Light
Dark
--primary: hsl(222 47% 11%)
--radius: 0.625rem
--border: hsl(240 6% 90%)
radius scale

Primitives & Forms

Reusable inputs, selects, checkboxes, date pickers, and upload fields with built-in validation and error states.

Data Display & Navigation

Tables, charts, metric cards, sidebars, breadcrumbs, and command menus that stay consistent across the app.

Theming & Integration

Token-based theming with light and dark support, plus Docyrus data bindings where you need them.

Headless Primitives, Polished Blocks

Confirm Action

Are you sure you want to delete this data source? This action cannot be undone.

Cancel
Delete
Focus trap·ESC to close·aria-modal
Dropdown Menu
Edit
Duplicate
Archive
Delete
Badges & Tooltip
DefaultSecondaryOutlineDestructive
Keyboard accessible tooltip

Use low-level primitives when you need control, or start with ready-made blocks when you need speed.

Accessible by Default Built on Radix UI primitives, so keyboard support, roles, and focus management are already in place.

Composable API Swap slots, variants, and classes without fighting the component internals.

Premium Block Library Start with polished dashboards, forms, and marketing blocks instead of blank files.


One Token File, Infinite Brand Variants

Light Mode
Dark Mode
globals.csssingle source
@theme {
--color-primary: hsl(222 47% 11%);
--color-secondary: hsl(240 5% 96%);
--color-accent: hsl(240 5% 96%);
--radius: 0.625rem;
}
Tailwind Utilities
bg-primarytext-muted-foregroundborder-borderrounded-lg
No build step · No runtime overhead · Just CSS

Keep color, spacing, radius, and type in one token file. Rebrand once and the whole library updates with it.

CSS Variable Tokens Core decisions like primary, background, border, and muted live in CSS variables.

Light & Dark Mode Components ship with both themes and follow system preference out of the box.

Tailwind Native Tokens map to Tailwind classes, so you can theme the library without extra tooling.


Components That Know Your Data

InvoicesLive
Pagination included
VendorAmountStatus
Acme Corp$12,480Extracted
Globex Inc$8,340Processing
Stark Ltd$23,100Extracted
Page 1 of 12
Create InvoiceConnected
Vendor name
$0.00
Select category…
Validated · Typed · No API wiring
Revenue Trend
Real-time
$84.2k+18%
Live query connection

Connect components to Docyrus data sources for tables, forms, and charts without rebuilding the plumbing each time.

Data-Bound Tables Connect a Docyrus source and get sorting, filtering, and pagination without extra table state.

Form-to-Endpoint Wiring Send form data to a Docyrus collection with validated, typed create and update flows.

Live Chart Subscriptions Keep charts in sync with query results so dashboards update as the data changes.

Frequently asked questions about UI Components

What is UI Components?+

UI Components is the Docyrus UI toolkit for building consistent applications with accessible, data-aware interface building blocks.

When should developers use UI Components?+

Developers should use it when they want to ship tables, forms, layouts, and operational interfaces faster without rebuilding them from scratch.

What can teams ship with UI Components?+

Teams can ship product interfaces, admin surfaces, dashboards, and workflow UIs with a more consistent front-end system.

How does UI Components fit with other Docyrus developer tools?+

It complements the API, auth helpers, and open-source packages as the front-end layer of the Docyrus developer stack.

Stop Rebuilding the Same UI

Install @docyrus/ui, choose the pieces you need, connect your data, and ship faster with one consistent system.