Pittaya UI

Components that scale with your ideas

A fully open-source UI library for React, powered by TypeScript and Tailwind CSS. Fast, composable, and ready for production.

Components · Report Bug · Request Feature

Pittaya UI is a modern, accessible, and highly customizable component library built on top of industry-leading tools like React, TypeScript, Tailwind CSS, Shadcn UI, and Radix UI.

Our mission is to provide developers with production-ready components that are:

• ⚡ Fast — Optimized for performance with Server Components
• 🎨 Beautiful — Modern design with smooth animations
• ♿ Accessible — Built with accessibility in mind (ARIA compliant)
• 🔧 Customizable — Full TypeScript support with flexible variants
• 📱 Responsive — Mobile-first approach for all screen sizes

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

1. Clone the repository

git clone https://github.com/pittaya-ui/ui-kit.git
cd ui-kit

1. Install dependencies

npm install

1. Run the development server

npm run dev

1. Open your browser Navigate to http://localhost:3000

🚧 More components coming soon! Check our roadmap for planned features.

pittaya-ui/
├── src/
│   ├── app/                          # Next.js App Router
│   │   ├── docs/                     # Documentation pages
│   │   │   ├── components/[slug]/    # Dynamic component docs
│   │
│   ├── components/                   # React components
│   │   ├── ui/                       # UI primitives
│   │   ├── docs/                     # Documentation components
│   │
│   ├── lib/                          # Utility functions
│   │   ├── docs/                     # Documentation system
│   │   ├── utils.ts                  # Helper functions
│   │   └── query-client.ts           # React Query config
│   │
│   ├── hooks/                        # Custom React hooks
│   │
│   ├── services/                     # API services
│   │
│   ├── providers/                    # Context providers
│   │
│   └── constants/                    # Constants & config
│
├── public/                           # Static assets
│
├── docs/                             # Internal documentation
│
├── package.json
├── tsconfig.json
├── next.config.ts
└── README.md

• Next.js 15 - React framework with App Router
• React 19 - UI library
• TypeScript 5 - Type safety

• Tailwind CSS 4 - Utility-first CSS
• Radix UI - Unstyled, accessible components
  • @radix-ui/react-slot - Composition utility
  • @radix-ui/react-separator - Separator component
  • @radix-ui/react-tabs - Tabs component
• Class Variance Authority - Component variants
• Tailwind Merge - Merge Tailwind classes

• Lucide React - Icon library
• Sonner - Toast notifications
• React Syntax Highlighter - Code highlighting
• Unicorn Studio - Animated backgrounds
• clsx - Utility for constructing className strings

• TanStack Query - Server state management
• Next Themes - Theme management

• ESLint - Code linting
• Prettier - Code formatting
• Vercel Analytics - Performance monitoring
• Vercel Speed Insights - Real user metrics

Pittaya UI features a comprehensive documentation system built with:

• Live Code Preview - See components in action
• Copy-Paste Code - One-click code snippets
• API Reference - Complete props documentation
• Best Practices - Usage guidelines and patterns
• Accessibility - A11y notes for each component
• Table of Contents - Easy navigation within docs
• Responsive Layout - Mobile-friendly documentation

Follow these steps to document a new component:

1. Add to Component Index (src/lib/docs/components-index.ts)

{
  slug: "your-component",
  name: "Your Component",
  description: "Brief description of what the component does.",
  category: "Components", // or "Actions", "Documentation", etc.
  status: "stable",
  tags: ["feature", "interaction"],
  dependencies: ["@radix-ui/react-slot"], // Optional: external dependencies
  internalDependencies: ["button"] // Optional: other UI components used
}

2. Create Documentation (src/lib/docs/component-details.tsx)

• Import the component
• Define metadata, sections, props, examples, and TOC
• Add to the docs registry

3. Test the Documentation

• Navigate to /docs/components/your-component
• Verify all sections render correctly

📖 For complete step-by-step instructions, including examples and troubleshooting, see COMPONENT_DOCS_GUIDE.md

All components follow WCAG guidelines and are keyboard navigable with proper ARIA attributes.

Components are designed to work together seamlessly with consistent APIs and behavior.

Server Components by default, minimal client-side JavaScript, and optimized bundle sizes.

TypeScript support, IntelliSense autocomplete, and clear documentation.

Every component supports custom classes and can be styled with Tailwind utilities.

This project follows strict code style guidelines:

• Functional Components - Use function keyword
• TypeScript - Interfaces over types
• Named Exports - For better tree-shaking
• Lowercase Directories - Use kebab-case
• Descriptive Names - Use auxiliary verbs (isLoading, hasError)

See .eslintrc and prettier.config.js for details.

We welcome contributions! Here's how you can help:

• 🐛 Report bugs
• 💡 Suggest new features
• 📖 Improve documentation
• 🎨 Add new components
• ✅ Write tests
• 🌍 Translate documentation

1. Fork the repository
2. Create a feature branch

   git checkout -b feature/amazing-feature

3. Make your changes
4. Commit with conventional commits

   git commit -m "feat: add amazing feature"

5. Push to your branch

   git push origin feature/amazing-feature

6. Open a Pull Request

We follow Conventional Commits:

• feat: - New feature
• fix: - Bug fix
• docs: - Documentation changes
• style: - Code style changes (formatting)
• refactor: - Code refactoring
• test: - Adding tests
• chore: - Maintenance tasks

This project is licensed under the MIT License - see the LICENSE file for details.

• Shadcn UI - For component inspiration and architecture
• Radix UI - For accessible primitives
• Vercel - For hosting and deployment
• Tailwind CSS - For the utility-first CSS framework