Pixie Design System

A comprehensive React component library designed specifically for dental practice management applications. Built with modern React, TypeScript support, and Tailwind CSS for consistent, accessible, and beautiful user interfaces.

🚀 Features

- 50+ Components - Complete set of UI components for healthcare applications
- TypeScript Support - Full type definitions for all components
- Responsive Design - Mobile-first approach with tablet and desktop optimizations
- Accessibility First - WCAG compliant with ARIA support and keyboard navigation
- Dark Mode - Built-in dark mode support with CSS variables
- Tree-Shakeable - Import only what you need for optimal bundle size
- Tailwind CSS - Utility-first CSS with custom design tokens
- Storybook Documentation - Interactive component playground

📦 Installation

``bash
npm install @phase3dental/pixie-design-system
`

or with yarn/pnpm:

`bash
yarn add @phase3dental/pixie-design-system


or

`bash
npm install react react-dom
`

🎨 Setup

$3

Import the CSS file in your app's entry point:

`javascript
import '@phase3dental/pixie-design-system/styles'
`

$3

Your consumer project needs Tailwind CSS configured to work with the design system:

`bash


Install Tailwind CSS in your project

Update your tailwind.config.js:

`javascript
/* @type {import('tailwindcss').Config} /
module.exports = {
content: [
'./src/*/.{js,jsx,ts,tsx}',
'./node_modules/@phase3dental/pixie-design-system/dist/*/.{js,jsx}'
],
theme: {
extend: {
colors: {
sky: {
50: '#f0f9ff',
100: '#e0f2fe',
200: '#bae6fd',
300: '#7dd3fc',
400: '#38bdf8',
500: '#0ea5e9',
600: '#0284c7',
700: '#0369a1',
800: '#075985',
900: '#0c4a6e',
}
}
},
},
plugins: [],
}
`

🔧 Usage

$3

`javascript
import {
Navigation,
Button,
Card,
PatientCard,
KPICard
} from '@phase3dental/pixie-design-system'
import '@phase3dental/pixie-design-system/styles'

function App() {
const navigationItems = [
{ label: 'Dashboard', href: '/', active: true },
{ label: 'Patients', href: '/patients' },
{ label: 'Appointments', href: '/appointments' }
]

return (


`javascript
import { cn } from '@phase3dental/pixie-design-system'

// Utility for conditional classNames
const buttonClass = cn(
'base-button-class',
isActive && 'active-class',
variant === 'primary' && 'primary-class'
)
`

📚 Component Library

$3

#### Navigation
Main application navigation bar with user menu and search.
`jsx
import { Navigation } from '@phase3dental/pixie-design-system'

logo="/logo.svg"
items={[
{ label: 'Dashboard', href: '/', active: true },
{ label: 'Patients', href: '/patients' }
]}
user={{ name: 'Dr. Smith', email: 'dr@clinic.com' }}
onSearch={(query) => console.log('Search:', query)}
/>
`

#### SubNav
Secondary navigation with multiple layout variants.
`jsx
import { SubNav } from '@phase3dental/pixie-design-system'

variant="section" // or "accordion", "activities", "activityDetails"
items={[
{ id: '1', label: 'Overview', href: '/overview', active: true },
{ id: '2', label: 'Reports', href: '/reports' }
]}
/>
`

#### Sidebar
Collapsible sidebar navigation.
`jsx
import { Sidebar } from '@phase3dental/pixie-design-system'

items={[
{ label: 'Dashboard', icon: Home, href: '/' },
{ label: 'Patients', icon: Users, href: '/patients' }
]}
collapsed={false}
onToggle={() => setCollapsed(!collapsed)}
/>
`

#### ActivityMenu
Activity tracking and notifications menu.
`jsx
import { ActivityMenu } from '@phase3dental/pixie-design-system'

activities={[
{ id: '1', type: 'appointment', title: 'New Appointment', time: '10:30 AM' },
{ id: '2', type: 'message', title: 'Patient Message', time: '2 hours ago' }
]}
onActivityClick={(activity) => console.log(activity)}
/>
`

$3

#### PatientCard
Display patient information in various layouts.
`jsx
import { PatientCard } from '@phase3dental/pixie-design-system'

patient={{
id: 'P001',
name: 'John Doe',
age: 35,
phone: '(555) 123-4567',
email: 'john@example.com',
lastVisit: '2024-01-15',
nextAppointment: '2024-02-20',
insurance: 'Delta Dental'
}}
variant="detailed" // or "compact", "mini"
onEdit={(patient) => console.log('Edit:', patient)}
onViewDetails={(patient) => console.log('View:', patient)}
/>
`

#### KPICard
Key performance indicator display.
`jsx
import { KPICard } from '@phase3dental/pixie-design-system'

title="Total Revenue"
value="$45,230"
change={12.5}
changeType="increase" // or "decrease"
period="vs last month"
icon={DollarSign}
trend={[20, 35, 30, 45, 50, 65]}
/>
`

#### TaskCard
Task management cards.
`jsx
import { TaskCard } from '@phase3dental/pixie-design-system'

task={{
id: 'T001',
title: 'Review X-rays',
description: 'Review patient X-rays for appointment',
priority: 'high',
dueDate: '2024-01-20',
assignee: 'Dr. Smith',
status: 'in-progress'
}}
onStatusChange={(status) => console.log('Status:', status)}
onEdit={(task) => console.log('Edit:', task)}
/>
`

#### MetricCard
Metric display with charts.
`jsx
import { MetricCard } from '@phase3dental/pixie-design-system'

title="Patient Satisfaction"
value="4.8"
subtitle="out of 5.0"
chart={{
type: 'line',
data: [4.5, 4.6, 4.7, 4.8, 4.8, 4.9]
}}
trend="up"
/>
`

#### DashboardWidget
Customizable dashboard widgets.
`jsx
import { DashboardWidget } from '@phase3dental/pixie-design-system'

title="Upcoming Appointments"
subtitle="Today"
actions={[
{ label: 'View All', onClick: () => console.log('View all') }
]}
>
{/ Widget content /}

`

$3

#### Table
Feature-rich data table.
`jsx
import { Table } from '@phase3dental/pixie-design-system'

columns={[
{ key: 'name', label: 'Patient Name', sortable: true },
{ key: 'age', label: 'Age', sortable: true },
{ key: 'lastVisit', label: 'Last Visit', sortable: true },
{ key: 'status', label: 'Status' }
]}
data={patients}
onRowClick={(row) => console.log('Selected:', row)}
onSort={(column, direction) => console.log('Sort:', column, direction)}
selectable
pagination={{
page: 1,
pageSize: 10,
total: 100
}}
/>
`

#### CardTable
Card + table component with tabs, filters, and insights.
`jsx
import { CardTable, type TabDefinition, Button } from '@phase3dental/pixie-design-system'
import '@phase3dental/pixie-design-system/styles'

const tabs: TabDefinition[] = [
{ id: 'all', label: 'All' },
{ id: 'recall', label: 'Recall Due', predicate: (row) => row.recallDue === true },
{ id: 'vip', label: 'VIP Patients', predicate: (row) => row.isVip === true },
]

title="Patients"
data={patients}
columns={columns}
tabs={tabs}
headerRightActions={New Patient}
/>
`

Custom tabs (segmented pills) with dynamic counts via renderTabs:

`jsx
data={patients}
columns={columns}
tabs={tabs}
renderTabs={({ tabs, activeTab, onTabChange, counts, insightsVisible, onInsightsToggle }) => (


#### ProgressArc
Circular progress indicator.
`jsx
import { ProgressArc } from '@phase3dental/pixie-design-system'

value={75}
max={100}
size="lg" // "sm", "md", "lg", "xl"
label="Complete"
showValue
color="primary"
/>
`

#### WeatherWidget
Weather display widget.
`jsx
import { WeatherWidget } from '@phase3dental/pixie-design-system'

location="New York, NY"
temperature={72}
condition="sunny"
forecast={[
{ day: 'Mon', high: 75, low: 60, condition: 'sunny' },
{ day: 'Tue', high: 73, low: 58, condition: 'cloudy' }
]}
/>
`

$3

#### DatePicker
Date selection component.
`jsx
import { DatePicker } from '@phase3dental/pixie-design-system'

selected={date}
onChange={(date) => setDate(date)}
minDate={new Date()}
maxDate={addMonths(new Date(), 3)}
excludeDates={[new Date('2024-12-25')]}
placeholderText="Select appointment date"
/>
`

$3

All shadcn/ui components are included and can be imported:

`jsx
import {
Button,
Card,
Dialog,
Input,
Select,
Checkbox,
RadioGroup,
Switch,
Tabs,
Alert,
Badge,
Avatar,
Tooltip,
Popover,
DropdownMenu,
Sheet,
Form,
Label,
Textarea,
Slider,
Progress,
Skeleton,
Accordion,
AlertDialog,
AspectRatio,
Breadcrumb,
Calendar,
Carousel,
Collapsible,
Command,
ContextMenu,
Drawer,
HoverCard,
InputOTP,
Menubar,
NavigationMenu,
Pagination,
ResizablePanel,
ScrollArea,
Separator,
Sonner,
Toast,
Toggle,
ToggleGroup
} from '@phase3dental/pixie-design-system'

🎭 Storybook

Explore all components interactively:

`bash
npm run storybook
`

View the live Storybook at: https://phase3dental.github.io/pixie-design-system

🛠 Development

$3

- Node.js 18+
- npm, yarn, or pnpm

$3

`bash


Clone the repository

- npm run build - Build the library for production
- npm run dev - Build in watch mode for development
- npm run storybook - Start Storybook development server
- npm run build-storybook - Build Storybook for deployment
- npm run lint - Run ESLint

🎨 Theming

$3

Customize the theme by overriding CSS variables:

`css
:root {
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--accent: 210 40% 96.1%;
--destructive: 0 84.2% 60.2%;
--border: 214.3 31.8% 91.4%;
--radius: 0.5rem;
}

.dark {
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
/ ... dark mode variables /
}
`

$3

`jsx
import { ThemeProvider } from '@phase3dental/pixie-design-system'

function App() {
return (

{/ Your application /}

)
}
`

🤝 Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/new-component
3. Make your changes and add tests
4. Run tests: npm test`
5. Submit a pull request

$3

- Follow the existing component structure
- Include PropTypes for all props
- Add Storybook stories for new components
- Ensure accessibility compliance
- Write comprehensive documentation

📄 License

MIT License - see LICENSE file for details.

🆘 Support

- 📖 Documentation
- 🐛 Issue Tracker
- 💬 Discussions
- 📚 Storybook

📈 Changelog

See CHANGELOG.md for version history and updates.