@persona-framework/ui

Shared UI components for Persona Framework built with Radix UI primitives and Tailwind CSS.

Installation

pnpm add @persona-framework/ui

Usage

import { Button, Card, Input } from '@persona-framework/ui'
import '@persona-framework/ui/styles.css'

Component Categories

Layout

• ThemeProvider - Theme context with dark/light mode support
• Card - Container with header, content, footer sections
• Divider / Separator - Visual separation between content
• ScrollArea - Custom scrollable container

Typography

• Text - Text component with semantic variants (h1-h6, body, caption)

Form

• Button - Primary action element with variants
• Input - Text input field
• Label - Form field label
• Checkbox - Toggle checkbox
• Switch - Toggle switch
• Textarea - Multi-line text input
• SearchBox - Search input with icon
• RadioGroup - Radio button group
• Select - Dropdown select

Feedback

• Spinner - Loading indicator
• Badge - Status indicator labels
• Alert - Contextual feedback messages
• Progress - Progress bar
• Toast / Toaster - Notification system

Overlay

• Dialog - Modal dialog
• Menu - Dropdown menu
• Tooltip - Hover tooltip

Navigation

• Tabs - Tab navigation
• Accordion - Collapsible sections
• Breadcrumb - Breadcrumb navigation
• Sidebar - Side navigation panel
• Command - Command palette (Cmd+K)

Data Display

• Avatar - User avatar with fallback
• Skeleton - Loading placeholder
• Table - Data table

Editor Module

For Monaco Editor integration:

import { MonacoEditorWrapper } from '@persona-framework/ui/editor'

Requires peer dependencies:

• @monaco-editor/react
• monaco-editor

Storybook

pnpm --filter @persona-framework/ui storybook

Styling

Components use Tailwind CSS with design tokens defined in tailwind.config.ts. Import the base styles:

import '@persona-framework/ui/styles.css'

Or extend the Tailwind config in your app:

// tailwind.config.js
export default {
  presets: [require('@persona-framework/ui/tailwind.config')],
}