Docyrus App UI Design

Build polished, accessible UI components for Docyrus React applications using a curated set of 127+ pre-built components from shadcn, diceui, animate-ui, docyrus-ui, and reui libraries.

Component Library Preferences

Primary component libraries (in order of preference):

1. shadcn — 43 core components (buttons, forms, dialogs, tables, charts)
2. diceui — 42 advanced components (data grids, kanban, file upload, color picker)
3. animate-ui — 21 animated components (sidebar, dialogs, cards, menus)
4. docyrus — 19 Docyrus-specific components (data grid, form fields, value renderers)
5. reui — 2 utility components (file upload, sortable)

Total available: 127 components

Critical Design Rules

1. Always check preferred components first — Before implementing any new component, search the preferred components reference to find an existing match.
2. Use AwesomeCard for dashboards — Unless the user specifically requests a different card design, use @docyrus/ui-awesome-card for dashboard stat cards and metrics.
3. Use animate-ui Sidebar for layouts — Unless the user requests a different layout, use @animate-ui/sidebar for app navigation.
4. Prefer Recharts for charting — Use Recharts as the first choice for all data visualization needs. shadcn Chart components are built on Recharts.
5. Icon library preference order:
   • First choice: hugeicons
   • Second choice: fontawesome light
   • Third choice: lucide-icons

Quick Start Patterns

Dashboard with AwesomeCard

import { AwesomeCard } from '@/components/ui/awesome-card'
import { HugeIcon } from '@/components/ui/icons'

<AwesomeCard
  title="Total Revenue"
  value="$124,500"
  icon={<HugeIcon name="dollar-circle" />}
  trend={{ value: 12.5, direction: 'up' }}
/>

App Layout with animate-ui Sidebar

import { Sidebar, SidebarContent, SidebarHeader } from '@/components/ui/sidebar'

<Sidebar>
  <SidebarHeader>
    <AppLogo />
  </SidebarHeader>
  <SidebarContent>
    <NavItems />
  </SidebarContent>
</Sidebar>

Data Table with diceui

import { DataTable } from '@/components/ui/data-table'

<DataTable
  columns={columns}
  data={projects}
  enableFiltering
  enableSorting
  enablePagination
/>

Charts with shadcn + Recharts

import { ChartContainer, ChartTooltip } from '@/components/ui/chart'
import { LineChart, Line, XAxis, YAxis } from 'recharts'

<ChartContainer>
  <LineChart data={chartData}>
    <XAxis dataKey="month" />
    <YAxis />
    <ChartTooltip />
    <Line type="monotone" dataKey="revenue" />
  </LineChart>
</ChartContainer>

Component Selection Strategy

When the user requests a UI component:

1. Search the reference — Check references/preferred-components-catalog.md for existing components by name, category, or functionality
2. Match by use case — If multiple options exist, prefer:
   • shadcn for basic/common components
   • diceui for advanced/specialized components
   • animate-ui for components requiring animation/transitions
   • docyrus for Docyrus-specific data handling
3. Install the component — Use the registry install command from the catalog
4. Reference the docs — Point to the component's doc file for detailed usage

Installation Pattern

All components follow the shadcn registry pattern:

# shadcn components
pnpm dlx shadcn@latest add button

# diceui components
pnpm dlx shadcn@latest add @diceui/data-table

# animate-ui components
pnpm dlx shadcn@latest add @animate-ui/sidebar

# docyrus components
pnpm dlx shadcn@latest add @docyrus/ui-awesome-card

# reui components
pnpm dlx shadcn@latest add @reui/file-upload-default

Common Use Cases

References

Read these files for detailed component information:

• references/preferred-components-catalog.md — Complete catalog of all 127 components with descriptions, install commands, and doc paths
• references/component-selection-guide.md — Decision trees and guidelines for choosing the right component for each use case
• references/icon-usage-guide.md — Icon library integration patterns and usage examples for hugeicons, fontawesome, and lucide

Integration with docyrus-app-dev

This skill works alongside docyrus-app-dev for full-stack app development:

• docyrus-app-dev handles data fetching, collections, queries, auth
• docyrus-app-ui-design handles component selection, UI design, layout

When building a feature:

1. Use docyrus-app-dev to set up data queries and mutations
2. Use docyrus-app-ui-design to select and implement UI components
3. Combine them for complete, polished features