@fayz-ai/ui

Radix + Tailwind primitives, a CRUD engine, and the admin shell every Fayz app wears.

Status: beta — published to npm and used across Fayz dogfood apps. Pre-1.0: minor APIs may change before 1.0.

A composed Fayz app needs to look like one product, not a pile of plugins. @fayz-ai/ui is the design layer that makes that true: accessible Radix-backed primitives, a data table, layout shells (app shell, sidebar, module pages), a themeable token system, and a dashboard widget kit that plugins contribute KPIs, charts, and tables into. Salon, restaurant, clinic — same shell, same widgets, different brand.

The philosophy: plugins describe behavior, the UI renders it consistently. Define a KPI widget once and it lands in the dashboard grid with layout, ranges, and customization already wired. Drop in AppShell and Sidebar and the navigation a plugin declared just appears.

What's inside

• Primitives — Button, Input, Badge, Card, Modal, Sheet, Dropdown, Select, Tabs, Tooltip, Popover, DataTable (TanStack), Checkbox, DatePicker, TimePicker, SearchSelect, CurrencyInput, ConfirmDialog, SegmentedControl, toast (sonner)
• Layout — AppShell, Sidebar, Topbar, ModulePage, SubpageHeader, SaveBar, page transitions, and the module header/back-button slots
• Dashboard kit — DashboardCanvas, WidgetGrid, DashboardGrid, range controls, and defineKpiWidget / defineChartWidget / defineTableWidget / defineOnboardingWidget / defineCustomWidget with KpiCard, ChartWidget, TableWidget
• Theme — ThemeProvider, useTheme, createFayzTheme, fayzThemePresets, light/dark tokens
• Stores + utils — useLayoutStore, useThemeStore, cn, Avatar

Install

npm install @fayz-ai/ui

Peer deps: react, react-dom (^18/^19), tailwindcss (^3.4). Import @fayz-ai/ui/styles.css.

Usage

import { Button, KpiCard, defineKpiWidget } from '@fayz-ai/ui'
import '@fayz-ai/ui/styles.css'

export const revenueWidget = defineKpiWidget({
  id: 'revenue',
  title: 'Revenue',
  value: { format: 'currency', amount: 12400, currency: 'BRL' },
})

export function Demo() {
  return <Button variant="default">Save</Button>
}

Part of the Fayz SDK

The presentation layer on top of @fayz-ai/core; the admin surface in @fayz-ai/admin is built from it.

Roadmap & contributing

Built and evolving in the open. See the Fayz SDK roadmap for current gaps, missing features, and good first issues.