{"id":42434119,"url":"https://github.com/pittaya-ui/ui-kit","last_synced_at":"2026-02-03T14:15:49.441Z","repository":{"id":316498607,"uuid":"1036193957","full_name":"pittaya-ui/ui-kit","owner":"pittaya-ui","description":"Pittaya UI kit","archived":false,"fork":false,"pushed_at":"2026-01-26T19:44:21.000Z","size":1392,"stargazers_count":11,"open_issues_count":2,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-27T03:56:18.321Z","etag":null,"topics":["nextjs","react","shadcn","shadcn-ui","taildwindcss","typescript","ui-library","uikit"],"latest_commit_sha":null,"homepage":"https://ui.pittaya.org/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pittaya-ui.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-08-11T17:40:18.000Z","updated_at":"2026-01-26T19:44:26.000Z","dependencies_parsed_at":"2025-09-25T01:14:10.434Z","dependency_job_id":"864e590d-bebd-452f-b937-f6366b1ced14","html_url":"https://github.com/pittaya-ui/ui-kit","commit_stats":null,"previous_names":["pittaya-ui/ui","pittaya-ui/ui-kit"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/pittaya-ui/ui-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pittaya-ui%2Fui-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pittaya-ui%2Fui-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pittaya-ui%2Fui-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pittaya-ui%2Fui-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pittaya-ui","download_url":"https://codeload.github.com/pittaya-ui/ui-kit/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pittaya-ui%2Fui-kit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28886880,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-29T21:06:44.224Z","status":"ssl_error","status_checked_at":"2026-01-29T21:06:42.160Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nextjs","react","shadcn","shadcn-ui","taildwindcss","typescript","ui-library","uikit"],"created_at":"2026-01-28T05:01:25.403Z","updated_at":"2026-01-29T22:00:51.765Z","avatar_url":"https://github.com/pittaya-ui.png","language":"TypeScript","funding_links":[],"categories":["Libs and Components"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"public/pittaya-logo.png\" alt=\"Pittaya UI Logo\" width=\"120\" height=\"120\" /\u003e\n  \n  # Pittaya UI\n  \n  ### Components that scale with your ideas\n  \n  A fully open-source UI library for React, powered by TypeScript and Tailwind CSS. Fast, composable, and ready for production.\n\n[![Stars](https://img.shields.io/github/stars/pittaya-ui/ui-kit?style=for-the-badge\u0026logo=github\u0026color=fb7185)](https://github.com/pittaya-ui/ui-kit)\n[![Contributors](https://img.shields.io/github/contributors/pittaya-ui/ui-kit?style=for-the-badge\u0026logo=github\u0026color=fb7185)](https://github.com/pittaya-ui/ui-kit/graphs/contributors)\n[![License](https://img.shields.io/github/license/pittaya-ui/ui-kit?style=for-the-badge\u0026color=fb7185)](./LICENSE)\n[![Last Commit](https://img.shields.io/github/last-commit/pittaya-ui/ui-kit?style=for-the-badge\u0026color=fb7185)](https://github.com/pittaya-ui/ui-kit/commits/main)\n\n[Components](https://ui.pittaya.org/docs/components) · [Report Bug](https://github.com/pittaya-ui/ui-kit/issues) · [Request Feature](https://github.com/pittaya-ui/ui-kit/issues)\n\n\u003c/div\u003e\n\n---\n\n## 🌟 Overview\n\n**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**.\n\nOur mission is to provide developers with production-ready components that are:\n\n- ⚡ **Fast** — Optimized for performance with Server Components\n- 🎨 **Beautiful** — Modern design with smooth animations\n- ♿ **Accessible** — Built with accessibility in mind (ARIA compliant)\n- 🔧 **Customizable** — Full TypeScript support with flexible variants\n- 📱 **Responsive** — Mobile-first approach for all screen sizes\n\n---\n\n## 🚀 Quick Start\n\n### Prerequisites\n\n- Node.js 18+\n- npm, yarn or pnpm\n\n### Installation\n\n1. **Clone the repository**\n\n```bash\ngit clone https://github.com/pittaya-ui/ui-kit.git\ncd ui-kit\n```\n\n2. **Install dependencies**\n\n```bash\nnpm install\n```\n\n3. **Run the development server**\n\n```bash\nnpm run dev\n```\n\n4. **Open your browser**\n   Navigate to [http://localhost:3000](http://localhost:3000)\n\n---\n\n## 📦 Available Components\n\n| Component                | Status    | Category      | Description                                                       |\n| ------------------------ | --------- | ------------- | ----------------------------------------------------------------- |\n| **Announcement Badge**   | ✅ Stable | Components    | Displays a badge with an icon and a title                         |\n| **Button**               | ✅ Stable | Actions       | Displays a button or a component that looks like a button         |\n| **Card**                 | ✅ Stable | Components    | Displays a card with a title, description, content and footer     |\n| **Carousel**             | ✅ Stable | Components    | Displays a carousel of images or content                          |\n| **Copy Button**          | ✅ Stable | Actions       | Displays a copy button that copies text to clipboard when clicked |\n| **Installation Section** | ✅ Stable | Documentation | Displays installation instructions with code snippets             |\n| **Orbit Images**         | ✅ Stable | Components    | Displays a set of images in an orbiting motion                    |\n| **Tabs**                 | ✅ Stable | Navigation    | A set of layered sections of content displayed one at a time      |\n\n\u003e 🚧 More components coming soon! Check our [roadmap](https://github.com/pittaya-ui/ui-kit/issues) for planned features.\n\n---\n\n## 🏗️ Project Architecture\n\n```\npittaya-ui/\n├── src/\n│   ├── app/                          # Next.js App Router\n│   │   ├── docs/                     # Documentation pages\n│   │   │   ├── components/[slug]/    # Dynamic component docs\n│   │\n│   ├── components/                   # React components\n│   │   ├── ui/                       # UI primitives\n│   │   ├── docs/                     # Documentation components\n│   │\n│   ├── lib/                          # Utility functions\n│   │   ├── docs/                     # Documentation system\n│   │   ├── utils.ts                  # Helper functions\n│   │   └── query-client.ts           # React Query config\n│   │\n│   ├── hooks/                        # Custom React hooks\n│   │\n│   ├── services/                     # API services\n│   │\n│   ├── providers/                    # Context providers\n│   │\n│   └── constants/                    # Constants \u0026 config\n│\n├── public/                           # Static assets\n│\n├── docs/                             # Internal documentation\n│\n├── package.json\n├── tsconfig.json\n├── next.config.ts\n└── README.md\n```\n\n---\n\n## 🔧 Tech Stack\n\n### Core\n\n- **[Next.js 15](https://nextjs.org/)** - React framework with App Router\n- **[React 19](https://react.dev/)** - UI library\n- **[TypeScript 5](https://www.typescriptlang.org/)** - Type safety\n\n### Styling\n\n- **[Tailwind CSS 4](https://tailwindcss.com/)** - Utility-first CSS\n- **[Radix UI](https://www.radix-ui.com/)** - Unstyled, accessible components\n  - `@radix-ui/react-slot` - Composition utility\n  - `@radix-ui/react-separator` - Separator component\n  - `@radix-ui/react-tabs` - Tabs component\n- **[Class Variance Authority](https://cva.style/)** - Component variants\n- **[Tailwind Merge](https://github.com/dcastil/tailwind-merge)** - Merge Tailwind classes\n\n### UI Components\n\n- **[Lucide React](https://lucide.dev/)** - Icon library\n- **[Sonner](https://sonner.emilkowal.ski/)** - Toast notifications\n- **[React Syntax Highlighter](https://react-syntax-highlighter.github.io/react-syntax-highlighter/)** - Code highlighting\n- **[Unicorn Studio](https://unicornstudio.io/)** - Animated backgrounds\n- **[clsx](https://github.com/lukeed/clsx)** - Utility for constructing className strings\n\n### State \u0026 Data\n\n- **[TanStack Query](https://tanstack.com/query/)** - Server state management\n- **[Next Themes](https://github.com/pacocoursey/next-themes)** - Theme management\n\n### Development\n\n- **[ESLint](https://eslint.org/)** - Code linting\n- **[Prettier](https://prettier.io/)** - Code formatting\n- **[Vercel Analytics](https://vercel.com/analytics)** - Performance monitoring\n- **[Vercel Speed Insights](https://vercel.com/docs/speed-insights)** - Real user metrics\n\n---\n\n## 📚 Documentation System\n\nPittaya UI features a comprehensive documentation system built with:\n\n### Key Features\n\n- **Live Code Preview** - See components in action\n- **Copy-Paste Code** - One-click code snippets\n- **API Reference** - Complete props documentation\n- **Best Practices** - Usage guidelines and patterns\n- **Accessibility** - A11y notes for each component\n- **Table of Contents** - Easy navigation within docs\n- **Responsive Layout** - Mobile-friendly documentation\n\n### Adding New Components\n\nFollow these steps to document a new component:\n\n**1. Add to Component Index** (`src/lib/docs/components-index.ts`)\n\n```typescript\n{\n  slug: \"your-component\",\n  name: \"Your Component\",\n  description: \"Brief description of what the component does.\",\n  category: \"Components\", // or \"Actions\", \"Documentation\", etc.\n  status: \"stable\",\n  tags: [\"feature\", \"interaction\"],\n  dependencies: [\"@radix-ui/react-slot\"], // Optional: external dependencies\n  internalDependencies: [\"button\"] // Optional: other UI components used\n}\n```\n\n**2. Create Documentation** (`src/lib/docs/component-details.tsx`)\n\n- Import the component\n- Define metadata, sections, props, examples, and TOC\n- Add to the `docs` registry\n\n**3. Test the Documentation**\n\n- Navigate to `/docs/components/your-component`\n- Verify all sections render correctly\n\n\u003e 📖 **For complete step-by-step instructions**, including examples and troubleshooting, see [COMPONENT_DOCS_GUIDE.md](./docs/COMPONENT_DOCS_GUIDE.md)\n\n---\n\n## 🎨 Design Principles\n\n### 1. Accessibility First\n\nAll components follow WCAG guidelines and are keyboard navigable with proper ARIA attributes.\n\n### 2. Composability\n\nComponents are designed to work together seamlessly with consistent APIs and behavior.\n\n### 3. Performance\n\nServer Components by default, minimal client-side JavaScript, and optimized bundle sizes.\n\n### 4. Developer Experience\n\nTypeScript support, IntelliSense autocomplete, and clear documentation.\n\n### 5. Customization\n\nEvery component supports custom classes and can be styled with Tailwind utilities.\n\n---\n\n## 🛠️ Development\n\n### Available Scripts\n\n| Command              | Description                             |\n| -------------------- | --------------------------------------- |\n| `npm run dev`        | Start development server with Turbopack |\n| `npm run build`      | Build for production                    |\n| `npm run start`      | Start production server                 |\n| `npm run lint`       | Run ESLint                              |\n| `npm run type-check` | Run TypeScript type checking            |\n| `npm run analyze:ci` | Analyze bundle size                     |\n\n### Code Style\n\nThis project follows strict code style guidelines:\n\n- **Functional Components** - Use function keyword\n- **TypeScript** - Interfaces over types\n- **Named Exports** - For better tree-shaking\n- **Lowercase Directories** - Use kebab-case\n- **Descriptive Names** - Use auxiliary verbs (isLoading, hasError)\n\nSee `.eslintrc` and `prettier.config.js` for details.\n\n---\n\n## 🤝 Contributing\n\nWe welcome contributions! Here's how you can help:\n\n### Ways to Contribute\n\n- 🐛 Report bugs\n- 💡 Suggest new features\n- 📖 Improve documentation\n- 🎨 Add new components\n- ✅ Write tests\n- 🌍 Translate documentation\n\n### Contribution Process\n\n1. **Fork the repository**\n2. **Create a feature branch**\n   ```bash\n   git checkout -b feature/amazing-feature\n   ```\n3. **Make your changes**\n4. **Commit with conventional commits**\n   ```bash\n   git commit -m \"feat: add amazing feature\"\n   ```\n5. **Push to your branch**\n   ```bash\n   git push origin feature/amazing-feature\n   ```\n6. **Open a Pull Request**\n\n### Commit Convention\n\nWe follow [Conventional Commits](https://www.conventionalcommits.org/):\n\n- `feat:` - New feature\n- `fix:` - Bug fix\n- `docs:` - Documentation changes\n- `style:` - Code style changes (formatting)\n- `refactor:` - Code refactoring\n- `test:` - Adding tests\n- `chore:` - Maintenance tasks\n\n---\n\n## 📄 License\n\nThis project is licensed under the **MIT License** - see the [LICENSE](./LICENSE) file for details.\n\n---\n\n## 🙏 Acknowledgments\n\n- **[Shadcn UI](https://ui.shadcn.com/)** - For component inspiration and architecture\n- **[Radix UI](https://www.radix-ui.com/)** - For accessible primitives\n- **[Vercel](https://vercel.com/)** - For hosting and deployment\n- **[Tailwind CSS](https://tailwindcss.com/)** - For the utility-first CSS framework\n\n---\n\n## 📞 Contact \u0026 Links\n\n\u003cdiv align=\"center\"\u003e\n\n**Website**: [pittaya-ui.vercel.app](https://pittaya-ui.vercel.app)\n\n**GitHub**: [@pittaya-ui](https://github.com/pittaya-ui)\n\n**Issues**: [Report a bug or request a feature](https://github.com/pittaya-ui/ui-kit/issues)\n\n---\n\n\u003csub\u003eBuilt with ❤️ by the Pittaya team\u003c/sub\u003e\n\n\u003csub\u003e⭐ Star us on GitHub — it motivates us a lot!\u003c/sub\u003e\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpittaya-ui%2Fui-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpittaya-ui%2Fui-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpittaya-ui%2Fui-kit/lists"}