@kreativa/ui

Shared UI components for Kreativa applications, built with React and Tailwind CSS.

Installation

npm install @kreativa/ui
# or
pnpm add @kreativa/ui

Usage

import { Button, Card, Modal, Table } from '@kreativa/ui'

Tailwind Configuration

Extend your Tailwind config with the Kreativa theme:

// tailwind.config.js
import kreativaConfig from '@kreativa/ui/tailwind'

export default {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@kreativa/ui/dist/**/*.{js,mjs}'
  ],
  theme: {
    extend: {
      ...kreativaConfig.theme.extend
    }
  },
  plugins: []
}

Components

Layout

• Layout - Main app layout with sidebar
• Sidebar - Navigation sidebar
• ServiceSwitcher - Service/project selector

Primitives

• Button - Button with variants (primary, secondary, danger, ghost)
• Input - Text input with label and error support
• Card - Container card with padding options
• LoadingSpinner - Animated spinner
• EmptyState - Empty state placeholder
• Modal - Dialog modal

Forms

• FormInput - Form input with label and help text
• FormTextarea - Form textarea
• FormButtonGroup - Cancel/Submit button pair

Data

• Table - Sortable data table
• Select - Searchable dropdown
• Tabs - Tab navigation

Time

• Timer - Time tracking with play/stop
• DatePicker - Date/date-range picker

Development

# Install dependencies
pnpm install

# Build
pnpm build

# Watch mode
pnpm dev

# Type check
pnpm typecheck

License

MIT