{"id":33314829,"url":"https://github.com/phucbm/ui.phucbm.com","last_synced_at":"2025-11-19T13:01:30.921Z","repository":{"id":324890224,"uuid":"1074822334","full_name":"phucbm/ui.phucbm.com","owner":"phucbm","description":"A collection of modern React UI components with GSAP animations, built with TypeScript, Tailwind CSS, and Nextra documentation.","archived":false,"fork":false,"pushed_at":"2025-11-18T11:30:23.000Z","size":7601,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-11-18T15:19:39.472Z","etag":null,"topics":["component","gsap","nextra","shadcn"],"latest_commit_sha":null,"homepage":"https://ui.phucbm.com","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/phucbm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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":null,"dco":null,"cla":null}},"created_at":"2025-10-12T14:46:37.000Z","updated_at":"2025-11-18T11:30:27.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/phucbm/ui.phucbm.com","commit_stats":null,"previous_names":["phucbm/ui.phucbm.com"],"tags_count":null,"template":false,"template_full_name":"shadcn-ui/registry-template","purl":"pkg:github/phucbm/ui.phucbm.com","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phucbm%2Fui.phucbm.com","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phucbm%2Fui.phucbm.com/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phucbm%2Fui.phucbm.com/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phucbm%2Fui.phucbm.com/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/phucbm","download_url":"https://codeload.github.com/phucbm/ui.phucbm.com/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phucbm%2Fui.phucbm.com/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":285249460,"owners_count":27139375,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-11-19T02:00:05.673Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["component","gsap","nextra","shadcn"],"created_at":"2025-11-19T13:00:31.771Z","updated_at":"2025-11-19T13:01:30.909Z","avatar_url":"https://github.com/phucbm.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ui.phucbm.com\n\nA collection of modern React UI components with smooth GSAP animations. Built with TypeScript, Tailwind CSS, Next.js 16, and Nextra for a component-driven documentation experience.\n\n\u003cimg width=\"1624\" height=\"1056\" alt=\"Screenshot 2025-11-18 at 10 14 34\" src=\"https://github.com/user-attachments/assets/72f39562-a883-4db1-a221-853967d8ebfd\" /\u003e\n\n## Features\n\n- **Production-Ready Components** – Fully reusable React components optimized for real-world projects\n- **GSAP Animations** – Smooth, performant animations powered by GreenSock Animation Platform\n- **TypeScript** – Complete type safety for all components and utilities\n- **Tailwind CSS** – Utility-first styling with full customization support\n- **Interactive Documentation** – Live component previews and code examples using Sandpack\n- **Copy-to-Install** – Instantly add components to your project via shadcn CLI\n- **Full-Text Search** – Fast search across documentation using Pagefind\n- **Responsive \u0026 Accessible** – Mobile-first design with accessibility best practices\n\n## Tech Stack\n\n- **Framework**: Next.js 16 with App Router\n- **Documentation**: Nextra 4.6\n- **Animations**: GSAP 3.13\n- **Styling**: Tailwind CSS 4 with PostCSS\n- **Code Editor**: Sandpack 2.20\n- **Component Library**: shadcn/ui components\n- **Icons**: Lucide React, Tabler Icons\n- **Search**: Pagefind 1.4\n- **Language**: TypeScript 5.9\n\n## Quick Start\n\n### Prerequisites\n\n- Node.js 18+\n- pnpm (recommended) or npm\n\n### Installation\n\n```bash\n# Clone the repository\ngit clone https://github.com/phucbm/ui.phucbm.com.git\ncd ui.phucbm.com\n\n# Install dependencies\npnpm install\n```\n\n### Development\n\nStart the development server with Turbopack for fast refresh:\n\n```bash\npnpm dev\n```\n\nVisit `http://localhost:3000` to view the site locally.\n\n### Building\n\nBuild the site for production:\n\n```bash\npnpm build\n```\n\nThis command:\n1. Runs Next.js build\n2. Generates the component registry (`public/r/`)\n3. Creates a search index with Pagefind\n4. Cleans up temporary files\n\nStart the production server:\n\n```bash\npnpm start\n```\n\n## Project Structure\n\n```\n.\n├── app/                          # Next.js App Router pages\n│   ├── (docs)/                  # Documentation routes\n│   ├── api/                     # API endpoints\n│   └── layout.tsx               # Root layout\n├── components/                   # React components\n│   ├── ui/                      # shadcn UI components\n│   ├── registry-*.tsx           # Registry-specific components\n│   └── ...\n├── registry/phucbm/blocks/       # Source component definitions\n│   ├── {component-name}/\n│   │   ├── registry-item.json   # Component metadata\n│   │   ├── {name}.tsx           # Main component\n│   │   ├── example.tsx          # Default example\n│   │   └── lib/                 # Component utilities\n│   └── ...\n├── content/components/           # MDX documentation files\n├── lib/                          # Utility functions\n├── scripts/                      # Build-time scripts\n├── public/                       # Static assets\n│   ├── r/                       # Generated registry (build output)\n│   └── _pagefind/               # Search index (build output)\n└── CLAUDE.md                     # Architecture \u0026 development guide\n```\n\n## Available Scripts\n\n```bash\n# Development\npnpm dev                    # Start dev server with Turbopack\n\n# Building\npnpm build                  # Full build (Next.js + registry + search)\npnpm start                  # Production server\n\n# Registry Operations\npnpm index-registry         # Generate registry.json and publish to public/r/\npnpm index-registry:dry     # Preview registry generation without writing files\npnpm clean-example-registry # Remove temporary .transformed.tsx files\n\n# Individual Build Steps (run via postbuild)\npnpm build:pagefind        # Generate search index\npnpm build:registry        # Build registry (index + shadcn + clean)\n```\n\n## Registry System\n\nThe project uses a **three-layer registry system** for managing components:\n\n1. **Source Registry** (`registry/phucbm/blocks/`) – Component source files\n2. **Build-Time Processing** (`scripts/index-registry.ts`) – Transforms and aggregates components\n3. **Published Registry** (`public/r/`) – Generated JSON files for distribution\n\nEach component can be installed directly via shadcn CLI:\n\n```bash\npnpm dlx shadcn@latest add https://ui.phucbm.com/r/{component-name}.json\n```\n\n## Adding Components\n\nTo add a new component to the registry:\n\n1. Create a directory in `registry/phucbm/blocks/`\n2. Add `registry-item.json` with component metadata\n3. Create the main component file (name must match directory)\n4. Add example files (`example.tsx`, `example-02.tsx`, etc.)\n5. Create MDX documentation in `content/components/`\n6. Run `pnpm build` to regenerate the registry\n\nSee [CLAUDE.md](./CLAUDE.md) for detailed architecture documentation.\n\n## Documentation\n\n- **[CLAUDE.md](./CLAUDE.md)** – Complete architecture guide, build pipeline, key files reference\n- **[QUICK_REFERENCE.md](./QUICK_REFERENCE.md)** – Quick lookup for common files and commands\n- **[ARCHITECTURE_DIAGRAMS.md](./ARCHITECTURE_DIAGRAMS.md)** – Visual diagrams of system flow\n\n## Live Demo\n\nVisit the live documentation site: **[ui.phucbm.com](https://ui.phucbm.com)**\n\n## Components\n\nThe registry currently includes 11+ production-ready components:\n\n- Draw SVG\n- Text Ripple\n- Text Flower\n- Magnetic Button\n- Moving Border\n- Infinite Grid\n- Shimmer Layer\n- Infinite Image Carousel\n- Spotlight Content\n- Word by Word\n- Nextra Search Dialog\n\nBrowse all components with interactive previews at [ui.phucbm.com](https://ui.phucbm.com).\n\n## License\n\nMIT License - see [LICENSE](./LICENSE) file for details\n\n## Author\n\n**PHUCBM** – [@phucbm](https://github.com/phucbm)\n\n---\n\n**This is an open-source project showcasing modern web development practices.** Feel free to explore the codebase, learn from the architecture, and adapt patterns for your own projects.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphucbm%2Fui.phucbm.com","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphucbm%2Fui.phucbm.com","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphucbm%2Fui.phucbm.com/lists"}