@fabrk/components

109+ production-ready UI components and charts for the FABRK framework. Built on Radix UI with a terminal-inspired design system, fully accessible and theme-aware.

Installation

npm install @fabrk/components @fabrk/design-system

Usage

Dashboard Shell

Build a complete dashboard in minutes:

import { DashboardShell, DashboardHeader, StatsGrid, KPICard } from '@fabrk/components'

export default function Dashboard() {
  return (
    <DashboardShell
      sidebarItems={[
        { id: 'overview', label: 'Overview', href: '/dashboard', icon: '>' },
        { id: 'analytics', label: 'Analytics', href: '/dashboard/analytics', icon: '#' },
      ]}
      user={{ name: 'Jason', email: '[email protected]', tier: 'pro' }}
      logo={<span className="text-accent text-xl">#</span>}
      onSignOut={() => signOut()}
    >
      <DashboardHeader title="OVERVIEW" subtitle="Your activity summary" />
      <StatsGrid
        items={[
          { label: 'Total Revenue', value: '$12,450', change: '+12.5%', trend: 'up' },
          { label: 'Active Users', value: '1,234', change: '+5.2%', trend: 'up' },
          { label: 'Conversion Rate', value: '3.2%', change: '-0.8%', trend: 'down' },
        ]}
      />
    </DashboardShell>
  )
}

KPI Cards and Charts

Display metrics and visualizations:

import { KPICard, LineChart, BarChart } from '@fabrk/components'

function Metrics() {
  const weekTrend = [
    { date: '2025-01-01', value: 120 },
    { date: '2025-01-02', value: 145 },
    { date: '2025-01-03', value: 132 },
  ]

  return (
    <div className="grid grid-cols-3 gap-4">
      <KPICard
        title="API Calls"
        value="15,234"
        change="+8.2%"
        trend="up"
        icon=">"
      />
      <div className="col-span-2">
        <LineChart
          data={weekTrend}
          xKey="date"
          yKey="value"
          title="Weekly Activity"
        />
      </div>
      <BarChart
        data={[
          { category: 'Monday', value: 45 },
          { category: 'Tuesday', value: 52 },
          { category: 'Wednesday', value: 48 },
        ]}
        xKey="category"
        yKey="value"
      />
    </div>
  )
}

AI Chat Interface

Add conversational AI to your app:

import { AiChat } from '@fabrk/components'

function ChatInterface() {
  return (
    <AiChat
      models={[{ id: 'claude-3', name: 'Claude 3' }]}
      conversations={conversations}
      onSendMessage={(msg) => handleSendMessage(msg)}
      onNewConversation={() => createConversation()}
    />
  )
}

Component Categories

UI Controls (60+ components)

Button, Input, Select, Checkbox, Switch, RadioGroup, Slider, Textarea, DatePicker, Calendar, InputOTP, InputPassword, InputSearch, InputNumber, CodeBlock, Form, Label

Layout & Navigation (15+ components)

Card, Container, Separator, Tabs, StyledTabs, Accordion, Sheet, Dialog, AlertDialog, Breadcrumb, DropdownMenu, Command, Sidebar, Popover, Tooltip

Feedback & Display (15+ components)

Alert, Badge, TierBadge, Avatar, Progress, AsciiProgressBar, Loading, Toast, EmptyState, NotificationBadge, NotificationList, StatusPulse, TerminalSpinner, Typewriter, Toaster

Data & Tables (5+ components)

Table, DataTable, Pagination, ScrollArea, Heatmap

Dashboard & Metrics (10+ components)

DashboardShell, DashboardHeader, PageHeader, KPICard, StatCard, StatsGrid, SystemHealthWidget, AdminMetricsCard, UsageBar, TokenCounter

Charts (8 components)

AreaChart, BarChart, LineChart, PieChart, DonutChart, FunnelChart, Gauge, Sparkline

AI Components (5 components)

AiChat, AiChatInput, AiChatMessageList, AiChatSidebar, AiChatAttachmentPreview

Security (3 components)

MfaCard, MfaSetupDialog, BackupCodesModal

Organization (3 components)

OrgSwitcher, MemberCard, TeamActivityFeed

Admin (3 components)

AuditLog, AdminMetricsCard, SystemHealthWidget

User Engagement (7+ components)

StarRating, NpsSurvey, FeedbackWidget, UpgradeCta, CookieConsent, OnboardingChecklist, PricingCard

SEO (2 components)

SchemaScript, Breadcrumbs

Design System Integration

All components use the mode object from @fabrk/design-system for theme-aware styling:

import { mode } from '@fabrk/design-system'
import { Card, Button } from '@fabrk/components'

// Components automatically apply mode.radius, mode.font
<Card className={cn("border", mode.radius)}>
  <Button className={cn(mode.radius, mode.font)}>
    SUBMIT
  </Button>
</Card>

Rules:

• Full borders (border, border-2) require mode.radius
• Partial borders (border-t, border-b) never use mode.radius
• Use semantic tokens (bg-primary, text-foreground) instead of hardcoded colors

Features

• 109+ Components - Comprehensive UI library covering forms, navigation, data display, charts, and specialized features
• Terminal Aesthetic - Monospace fonts, uppercase buttons, bracket labels, and ASCII art inspired design
• Design System - 18 built-in themes with runtime CSS variable switching via @fabrk/design-system
• Radix UI Primitives - Built on battle-tested, accessible component primitives
• Fully Typed - Complete TypeScript definitions for all components and props
• Callback-Based - Components accept callbacks instead of making API calls (composable, testable)
• Tree-Shakeable - Import only what you need for optimal bundle size
• Accessible - WCAG 2.1 Level AA compliance with ARIA attributes
• Next.js App Router - Client components with "use client" directive for Server Component compatibility

Documentation

View full documentation

License

MIT