TakaUI

A modern, customizable React UI component library built with TypeScript, Tailwind CSS, and Radix UI primitives.

Current Version: 0.1.0

✨ What's New in 0.1.0

• 🎯 Table Alignment Fixed - Table cells now properly align horizontally with headers
• 📐 Consistent Padding - Checkbox columns and all table content use matching padding (px-3 py-2)
• ✨ Previous Features - All v0.0.9 features (no CSS imports, pure Tailwind, original design preserved)

📦 Installation

Quick Setup (Recommended)

Run the automatic setup wizard:

npm install @ttianqii/takaui
npx takaui-setup

This will:

• ✅ Configure your Tailwind config automatically
• ✅ Verify your setup is correct

No CSS imports needed! Components work with pure Tailwind CSS.

Manual Installation

If you prefer manual setup:

# npm
npm install @ttianqii/takaui

# yarn
yarn add @ttianqii/takaui

# pnpm
pnpm add @ttianqii/takaui

# bun
bun add @ttianqii/takaui

That's it! Just make sure you have Tailwind CSS configured in your project.

Peer Dependencies

TakaUI requires React 18+ or React 19+:

# npm
npm install react react-dom

# yarn
yarn add react react-dom

# pnpm
pnpm add react react-dom

# bun
bun add react react-dom

Tailwind CSS Setup

Important: TakaUI uses Tailwind CSS for styling (no CSS imports needed!). You must have Tailwind CSS configured in your project.

1. Install Tailwind CSS (if not already installed)

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

2. Configure Tailwind

Add TakaUI to your tailwind.config.js content paths:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@ttianqii/takaui/dist/**/*.{js,mjs,cjs}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. Add Tailwind directives

In your main CSS file (e.g., src/index.css):

@tailwind base;
@tailwind components;
@tailwind utilities;

That's it! No CSS imports needed from TakaUI. 🎉

🚀 Quick Start

import { DatePicker, TimePicker, DataTable } from '@ttianqii/takaui'
import '@ttianqii/takaui/styles.css'
import { useState } from 'react'

function App() {
  const [date, setDate] = useState<Date | undefined>(new Date())
  const [dateRange, setDateRange] = useState<{ from: Date; to?: Date }>()
  
  // DataTable example - No TanStack required!
  const columns = [
    { key: 'name', header: 'Name', sortable: true },
    { key: 'email', header: 'Email' },
    { 
      key: 'status', 
      header: 'Status',
      cell: (value) => (
        <span className="px-2 py-1 bg-green-100 text-green-800 rounded">
          {value}
        </span>
      )
    },
  ]
  
  const data = [
    { id: 1, name: 'John', email: '[email protected]', status: 'Active' },
    { id: 2, name: 'Jane', email: '[email protected]', status: 'Active' },
  ]
  
  return (
    <div>
      {/* Single Date Picker */}
      <DatePicker
        date={date}
        onDateChange={setDate}
      />
      
      {/* Date Range Picker - NEW! */}
      <DatePicker
        mode="range"
        dateRange={dateRange}
        onDateRangeChange={setDateRange}
        numberOfMonths={2}
      />
      
      <DataTable 
        data={data} 
        columns={columns}
        showSearch
        searchPlaceholder="Search users..."
      />
    </div>
  )
}

📚 Components

TakaUI includes the following components:

Form & Input Components

• Calendar - Flexible date picker with multiple selection modes
• DatePicker - Date picker with popover and custom formatting
  • ✨ NEW: Range selection with dual month view
  • ✨ NEW: Enhanced hover states for better UX
• TimePicker - Time picker with 12h/24h formats and timezone support
• DropdownMenu - Accessible dropdown menu component

Data Display Components

• DataTable - Independent table with sorting, filtering, and pagination (No TanStack!)
  • ✅ Zero external dependencies (except icons)
  • ✅ Built-in sorting, pagination, search
  • ✅ Custom cell rendering
  • ✅ Loading states
  • Quick Reference - Cheat sheet
• DataGrid System - ✨ NEW! Modular table components for custom layouts
  • DataGrid, DataGridTable, DataGridPagination
  • DataGridColumnHeader, DataGridRowSelect
  • Perfect for complex table compositions
• Schedule - Weekly schedule component with custom fields
  • ✨ NEW: Supports Date type in metadata
• WeekNavigator - Week navigation with date range display

Advanced Table System (Optional)

For advanced users who need TanStack Table features:

• TableRoot, TableContent, TableNavigator - Modular table components
  • Requires: npm install @tanstack/react-table
  • Modular Structure
  • Architecture

Base UI Components

All components are built on top of shadcn/ui primitives:

• Button
• Input
• Label
• Select
• Popover
• Dialog/Modal
• Checkbox
• Card

📖 Documentation

Detailed documentation for each component:

• Calendar Documentation
• DatePicker Documentation
• TimePicker Documentation
• DataTable Documentation
• Schedule Documentation
• WeekNavigator Documentation
• DropdownMenu Documentation

🎨 Customization

Styling with Tailwind

All components accept a className prop for custom styling:

<Calendar 
  className="rounded-lg shadow-lg border-2 border-blue-500"
  mode="single"
  selected={date}
  onSelect={setDate}
/>

Theming

TakaUI components use CSS variables for theming. You can customize colors in your global CSS:

:root {
  --primary: 220 90% 56%;
  --primary-foreground: 0 0% 100%;
  --destructive: 0 84% 60%;
  /* Add more custom variables */
}

🔧 TypeScript Support

TakaUI is built with TypeScript and includes full type definitions. All props are fully typed for excellent IDE support.

import type { CalendarProps, DatePickerProps } from '@ttianqii/takaui'

📦 Tree Shaking

TakaUI supports tree shaking. Import only the components you need:

// Good - Only imports Calendar
import { Calendar } from '@ttianqii/takaui'

// Also works - Named imports
import { Calendar, TimePicker, DataTable } from '@ttianqii/takaui'

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

MIT

🔗 Links

• GitHub Repository
• npm Package

📞 Support

For issues and questions:

• Open an issue on GitHub
• Check the documentation

🎯 Roadmap

• [ ] Additional form components (Switch, Radio, Slider)
• [ ] Chart components
• [ ] Toast notifications
• [ ] Command palette
• [ ] Theme switcher
• [ ] More data display components

Made with ❤️ by @ttianqii