{"id":48865907,"url":"https://github.com/g4rcez/components","last_synced_at":"2026-04-15T18:30:54.084Z","repository":{"id":246978625,"uuid":"383028205","full_name":"g4rcez/components","owner":"g4rcez","description":null,"archived":false,"fork":false,"pushed_at":"2026-04-15T05:08:15.000Z","size":3641,"stargazers_count":2,"open_issues_count":8,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-04-15T07:12:16.020Z","etag":null,"topics":["nextjs","react","reactjs","tailwindcss","tailwindcss-ui","typescript","typescript-react"],"latest_commit_sha":null,"homepage":"https://components.garcez.dev/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/g4rcez.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"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":"AGENTS.md","dco":null,"cla":null}},"created_at":"2021-07-05T05:51:02.000Z","updated_at":"2026-04-15T05:08:10.000Z","dependencies_parsed_at":"2024-08-19T04:25:32.035Z","dependency_job_id":"c043d543-91a9-4b15-b4f4-8f69eb1e5c2f","html_url":"https://github.com/g4rcez/components","commit_stats":null,"previous_names":["g4rcez/components"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/g4rcez/components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/g4rcez%2Fcomponents","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/g4rcez%2Fcomponents/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/g4rcez%2Fcomponents/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/g4rcez%2Fcomponents/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/g4rcez","download_url":"https://codeload.github.com/g4rcez/components/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/g4rcez%2Fcomponents/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31854575,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-15T15:24:51.572Z","status":"ssl_error","status_checked_at":"2026-04-15T15:24:39.138Z","response_time":63,"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","reactjs","tailwindcss","tailwindcss-ui","typescript","typescript-react"],"created_at":"2026-04-15T18:30:53.370Z","updated_at":"2026-04-15T18:30:54.073Z","avatar_url":"https://github.com/g4rcez.png","language":"TypeScript","readme":"# @g4rcez/components\n\nA comprehensive React component library built with TypeScript, Tailwind CSS, and modern web technologies. This library provides a complete set of customizable, accessible, and performant UI components for building modern web applications.\n\n## 📋 Table of Contents\n\n- [Overview](#overview)\n- [Architecture](#architecture)\n- [Installation](#installation)\n- [Quick Start](#quick-start)\n- [Component Categories](#component-categories)\n- [Theming \u0026 Customization](#theming--customization)\n- [Development](#development)\n- [Contributing](#contributing)\n\n## 🎯 Overview\n\nThis is a monorepo containing:\n\n- **`packages/lib/`** - The main component library (`@g4rcez/components`)\n- **`packages/docs/`** - Documentation and examples site built with Next.js\n\n### Key Features\n\n- 🎨 **Fully Customizable** - Theme system with light/dark mode support\n- ♿ **Accessible** - Built with accessibility best practices\n- 🔧 **TypeScript First** - Complete type safety and IntelliSense support\n- 🎯 **Tree Shakeable** - Import only what you need\n- 📱 **Responsive** - Mobile-first design approach\n- 🚀 **Modern Stack** - React 18+, TypeScript, Tailwind CSS\n\n## 🏗️ Architecture\n\n### Project Structure\n\n```\npackages/\n├── lib/                          # Main component library\n│   ├── src/\n│   │   ├── components/           # All UI components\n│   │   │   ├── core/            # Basic components (Button, Tag, etc.)\n│   │   │   ├── form/            # Form components (Input, Select, etc.)\n│   │   │   ├── display/         # Display components (Alert, Card, etc.)\n│   │   │   ├── floating/        # Floating components (Modal, Tooltip, etc.)\n│   │   │   └── table/           # Table components and utilities\n│   │   ├── hooks/               # Custom React hooks\n│   │   ├── lib/                 # Utility functions\n│   │   ├── styles/              # Theme system and design tokens\n│   │   └── config/              # Configuration and context\n│   └── dist/                    # Built library files\n└── docs/                        # Documentation site\n    ├── src/app/docs/            # Component documentation pages\n    └── src/components/examples/ # Live component examples\n```\n\n### Component Organization\n\nComponents are organized into logical categories:\n\n- **Core**: Basic building blocks (`Button`, `Tag`, `Polymorph`)\n- **Form**: Input and form-related components (`Input`, `Select`, `Checkbox`, etc.)\n- **Display**: Information display components (`Alert`, `Card`, `Timeline`, etc.)\n- **Floating**: Overlay components (`Modal`, `Tooltip`, `Dropdown`, etc.)\n- **Table**: Data table components with advanced features\n\n## 📦 Installation\n\n```bash\nnpm install @g4rcez/components\n# or\nyarn add @g4rcez/components\n# or\npnpm add @g4rcez/components\n```\n\n### CSS Import\n\nImport the component styles in your app:\n\n```tsx\nimport \"@g4rcez/components/index.css\";\n```\n\n## 🚀 Quick Start\n\n### Basic Usage\n\n```tsx\nimport { Button, Input, Modal } from \"@g4rcez/components\";\n\nfunction App() {\n  return (\n    \u003cdiv\u003e\n      \u003cButton variant=\"primary\"\u003eClick me\u003c/Button\u003e\n      \u003cInput placeholder=\"Enter text...\" /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### With Provider (Recommended)\n\n```tsx\nimport { ComponentsProvider } from \"@g4rcez/components\";\nimport \"@g4rcez/components/index.css\";\n\nfunction App() {\n  return (\n    \u003cComponentsProvider\u003e\n      \u003cYourApp /\u003e\n    \u003c/ComponentsProvider\u003e\n  );\n}\n```\n\n## 🧩 Component Categories\n\n### Core Components\n\n| Component   | Description                       | Import                                               |\n| ----------- | --------------------------------- | ---------------------------------------------------- |\n| `Button`    | Customizable button with variants | `import { Button } from \"@g4rcez/components/button\"` |\n| `Tag`       | Label/badge component             | `import { Tag } from \"@g4rcez/components/tag\"`       |\n| `Polymorph` | Polymorphic component base        | `import { Polymorph } from \"@g4rcez/components\"`     |\n\n### Form Components\n\n| Component      | Description                        | Import                                                           |\n| -------------- | ---------------------------------- | ---------------------------------------------------------------- |\n| `Input`        | Text input with mask support       | `import { Input } from \"@g4rcez/components/input\"`               |\n| `Select`       | Native select with styling         | `import { Select } from \"@g4rcez/components/select\"`             |\n| `Autocomplete` | Searchable select with floating UI | `import { Autocomplete } from \"@g4rcez/components/autocomplete\"` |\n| `Checkbox`     | Checkbox input                     | `import { Checkbox } from \"@g4rcez/components/checkbox\"`         |\n| `Switch`       | Toggle switch                      | `import { Switch } from \"@g4rcez/components/switch\"`             |\n| `DatePicker`   | Date selection component           | `import { DatePicker } from \"@g4rcez/components/date-picker\"`    |\n| `FileUpload`   | File upload with drag \u0026 drop       | `import { FileUpload } from \"@g4rcez/components/file-upload\"`    |\n| `Form`         | Form wrapper with validation       | `import { Form } from \"@g4rcez/components/form\"`                 |\n\n### Display Components\n\n| Component  | Description                 | Import                                                   |\n| ---------- | --------------------------- | -------------------------------------------------------- |\n| `Alert`    | Alert/notification messages | `import { Alert } from \"@g4rcez/components/alert\"`       |\n| `Card`     | Content container           | `import { Card } from \"@g4rcez/components/card\"`         |\n| `Calendar` | Calendar display            | `import { Calendar } from \"@g4rcez/components/calendar\"` |\n| `Timeline` | Timeline/stepper component  | `import { Timeline } from \"@g4rcez/components/timeline\"` |\n| `Tabs`     | Tab navigation              | `import { Tabs } from \"@g4rcez/components/tabs\"`         |\n| `Stats`    | Statistics display          | `import { Stats } from \"@g4rcez/components/stats\"`       |\n\n### Floating Components\n\n| Component  | Description   | Import                                                   |\n| ---------- | ------------- | -------------------------------------------------------- |\n| `Modal`    | Modal dialog  | `import { Modal } from \"@g4rcez/components/modal\"`       |\n| `Tooltip`  | Hover tooltip | `import { Tooltip } from \"@g4rcez/components/tooltip\"`   |\n| `Dropdown` | Dropdown menu | `import { Dropdown } from \"@g4rcez/components/dropdown\"` |\n| `Menu`     | Context menu  | `import { Menu } from \"@g4rcez/components/menu\"`         |\n\n### Table Components\n\n| Component | Description         | Import                                             |\n| --------- | ------------------- | -------------------------------------------------- |\n| `Table`   | Advanced data table | `import { Table } from \"@g4rcez/components/table\"` |\n\n## 🎨 Theming \u0026 Customization\n\n### Theme System\n\nThe library includes a comprehensive theme system with design tokens:\n\n```tsx\nimport { ComponentsProvider } from \"@g4rcez/components\";\n\n// Custom theme\nconst customTheme = {\n  colors: {\n    primary: \"#your-color\",\n    // ... other colors\n  },\n  // ... other theme properties\n};\n\nfunction App() {\n  return (\n    \u003cComponentsProvider theme={customTheme}\u003e\n      \u003cYourApp /\u003e\n    \u003c/ComponentsProvider\u003e\n  );\n}\n```\n\n### Tailwind Integration\n\nUse the provided Tailwind preset:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  presets: [require(\"@g4rcez/components/preset.tailwind\")],\n  // ... your config\n};\n```\n\n### Design Tokens\n\nAccess design tokens programmatically:\n\n```tsx\nimport { designTokens } from \"@g4rcez/components/styles\";\n```\n\n## 🛠️ Development\n\n### Prerequisites\n\n- Node.js \u003e= 20.14.0\n- pnpm (recommended package manager)\n\n### Setup\n\n```bash\n# Clone the repository\ngit clone https://github.com/g4rcez/components.git\ncd components\n\n# Install dependencies\npnpm install\n\n# Start development server (docs site)\npnpm dev\n\n# Build the library\npnpm build\n```\n\n### Scripts\n\n- `pnpm dev` - Start docs development server\n- `pnpm build` - Build both library and docs\n- `pnpm test` - Run tests\n- `pnpm format` - Format code with Prettier\n\n### Testing\n\n```bash\n# Run tests\ncd packages/lib\npnpm test\n\n# Watch mode\npnpm test:watch\n```\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch: `git checkout -b feature/amazing-feature`\n3. Make your changes\n4. Add tests for new functionality\n5. Run tests: `pnpm test`\n6. Format code: `pnpm format`\n7. Commit changes: `git commit -m 'Add amazing feature'`\n8. Push to branch: `git push origin feature/amazing-feature`\n9. Open a Pull Request\n\n### Component Development Guidelines\n\n1. **TypeScript First** - All components must be fully typed\n2. **Accessibility** - Follow WCAG guidelines\n3. **Testing** - Include unit tests for new components\n4. **Documentation** - Add examples to the docs site\n5. **Consistency** - Follow existing patterns and conventions\n\n## 📄 License\n\nMIT License - see [LICENSE](LICENSE) file for details.\n\n## 🔗 Links\n\n- [GitHub Repository](https://github.com/g4rcez/components)\n- [NPM Package](https://www.npmjs.com/package/@g4rcez/components)\n- [Author](https://garcez.dev)\n\n---\n\nBuilt with ❤️ by [Allan Garcez](https://garcez.dev)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fg4rcez%2Fcomponents","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fg4rcez%2Fcomponents","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fg4rcez%2Fcomponents/lists"}