{"id":34897299,"url":"https://github.com/pratik20gb/shorilabs","last_synced_at":"2026-01-13T20:53:06.198Z","repository":{"id":330665737,"uuid":"1123026057","full_name":"pratik20gb/shorilabs","owner":"pratik20gb","description":"Beautiful CSS \u0026 Tailwind components for modern web projects. 269+ components including Patterns, Buttons, Cards, Inputs, Badges, Loaders, Avatars, Toggles, and Dividers","archived":false,"fork":false,"pushed_at":"2025-12-27T04:52:37.000Z","size":1570,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-12-28T19:38:45.586Z","etag":null,"topics":["cli","npm","patterns","patterns-design","typescript","ui"],"latest_commit_sha":null,"homepage":"https://www.shorilabs.xyz/","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/pratik20gb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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-12-26T03:46:15.000Z","updated_at":"2025-12-27T04:49:08.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/pratik20gb/shorilabs","commit_stats":null,"previous_names":["pratik20gb/shorilabs"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/pratik20gb/shorilabs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pratik20gb%2Fshorilabs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pratik20gb%2Fshorilabs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pratik20gb%2Fshorilabs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pratik20gb%2Fshorilabs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pratik20gb","download_url":"https://codeload.github.com/pratik20gb/shorilabs/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pratik20gb%2Fshorilabs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28400344,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-13T14:36:09.778Z","status":"ssl_error","status_checked_at":"2026-01-13T14:35:19.697Z","response_time":56,"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":["cli","npm","patterns","patterns-design","typescript","ui"],"created_at":"2025-12-26T07:41:45.480Z","updated_at":"2026-01-13T20:53:06.192Z","avatar_url":"https://github.com/pratik20gb.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/pratik20gb/shorilabs/main/public/og-cover.png\" alt=\"shorilabs\" width=\"100%\" /\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./public/logo-green-dark.svg\" alt=\"shorilabs\" height=\"80\"\u003e\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003eBeautiful CSS \u0026 Tailwind components for modern web projects\u003c/strong\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003e269+ components\u003c/strong\u003e • Patterns • Buttons • Cards • Inputs • Badges • Loaders • Avatars • Toggles • Dividers\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://shorilabs.xyz\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/website-shorilabs.xyz-blue\" alt=\"Website\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@shorilabs/cli\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/@shorilabs/cli\" alt=\"npm\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/license-MIT-green\" alt=\"License\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n## ✨ Features\n\n### 🎨 269+ Components Available\n\n- **105 Patterns** - Gradients, geometric shapes, decorative effects, and more\n- **29 Buttons** - Primary, secondary, outline, ghost, animated, 3D, and neon styles\n- **26 Cards** - Modern card designs with various styles\n- **17 Inputs** - Beautiful form input styles\n- **21 Badges** - Badge variants for labels and tags\n- **18 Loaders** - Loading animations and spinners\n- **20 Avatars** - Avatar styles and variations\n- **13 Toggles** - Toggle switches and checkboxes\n- **20 Dividers** - Divider styles and separators\n\n### 🚀 Core Features\n\n- 📋 **One-Click Copy** - CSS and Tailwind CSS versions for every component\n- 👁️ **Live Preview** - Preview components directly on the website\n- ❤️ **Favorites System** - Save your favorite components locally\n- 🔍 **Search \u0026 Filter** - Find components quickly by name or category\n- 📱 **Fully Responsive** - Beautiful on all screen sizes\n- 🚀 **Fast \u0026 Lightweight** - Built with Vite and optimized for performance\n- 💻 **CLI Tool** - Install components directly from the command line\n\n## 🚀 Quick Start\n\n### Prerequisites\n\n- Node.js 18+ and npm\n\n### Installation\n\n```bash\n# Clone the repository\ngit clone https://github.com/pratik20gb/shorilabs.git\n\n# Navigate to project directory\ncd shorilabs\n\n# Install dependencies\nnpm install\n\n# Start development server\nnpm run dev\n```\n\nVisit `http://localhost:8080` to see the app running locally, or check out the [live website](https://shorilabs.xyz)!\n\n### CLI Installation\n\nInstall the CLI tool globally from npm:\n\n```bash\nnpm install -g @shorilabs/cli\n```\n\nThen use it:\n\n```bash\n# List all component types\nshorilabs patterns\nshorilabs buttons\nshorilabs cards\nshorilabs inputs\nshorilabs badges\nshorilabs loaders\nshorilabs avatars\nshorilabs toggles\nshorilabs dividers\n\n# Get a specific component\nshorilabs get aurora-glow\nshorilabs get neon-blue --type button\nshorilabs get card-gradient --type card\n\n# Search across all components\nshorilabs search gradient\n```\n\n## 📦 Build\n\n```bash\n# Production build\nnpm run build\n\n# Preview production build\nnpm run preview\n```\n\n## 🎯 Usage\n\n1. **Browse Components** - Scroll through all 9 component types on the home page\n2. **Filter by Category** - Click category pills to filter components by type\n3. **Search** - Use the search bar to find specific components across all types\n4. **Preview Components** - Click \"Preview\" to see components in action\n5. **Copy Code** - View CSS and Tailwind code, then copy to clipboard with one click\n6. **Save Favorites** - Click the heart icon to save components you love\n\n## 🛠️ Tech Stack\n\n- **Framework:** React 18\n- **Build Tool:** Vite 5\n- **Language:** TypeScript\n- **Styling:** Tailwind CSS\n- **UI Components:** shadcn/ui\n- **Animations:** Framer Motion\n- **Icons:** Lucide React\n\n## 📂 Project Structure\n\n```\nsrc/\n├── components/\n│   ├── ui/              # shadcn/ui components\n│   ├── Header.tsx       # Main header with navigation\n│   ├── HeroSection.tsx  # Landing page hero\n│   ├── PatternCard.tsx  # Individual pattern card\n│   ├── PatternGrid.tsx  # Pattern grid with filtering\n│   ├── ButtonCard.tsx   # Individual button card\n│   ├── ButtonGrid.tsx   # Button grid with filtering\n│   ├── CLISection.tsx   # CLI documentation section\n│   └── Footer.tsx       # Footer with links\n├── data/\n│   ├── patterns.ts      # All 105 pattern data\n│   ├── buttons.ts       # All 29 button data\n│   ├── cards.ts         # All 26 card data\n│   ├── inputs.ts        # All 17 input data\n│   ├── badges.ts        # All 21 badge data\n│   ├── loaders.ts       # All 18 loader data\n│   ├── avatars.ts       # All 20 avatar data\n│   ├── toggles.ts       # All 13 toggle data\n│   └── dividers.ts      # All 20 divider data\n├── contexts/\n│   └── BackgroundPatternContext.tsx  # Global pattern preview state\n├── pages/\n│   ├── Index.tsx        # Home page\n│   └── NotFound.tsx     # 404 page\n├── lib/\n│   ├── utils.ts         # Utility functions\n│   └── patternUtils.ts  # Pattern parsing utilities\n└── App.tsx              # App root with providers\n```\n\n## 🎨 Component Categories\n\n### Patterns (105)\n- **Gradients** - Aurora, sunset, neon, arctic, forest, and more\n- **Geometric** - Grids, dots, hexagons, triangles, isometric cubes\n- **Decorative** - Noise, spotlights, waves, starbursts, blobs\n- **Effects** - Blur orbs, glass morphism, mesh gradients, holographic\n\n### Buttons (29)\n- **Primary** - Solid, prominent call-to-action buttons\n- **Secondary** - Subtle, secondary action buttons\n- **Outline** - Border-only buttons with hover fill\n- **Ghost** - Minimal buttons for tertiary actions\n- **Animated** - Buttons with hover animations\n- **3D** - Buttons with depth and shadow effects\n- **Neon** - Glowing, cyberpunk-style buttons\n\n### Cards (26)\n- Modern card designs with various styles and effects\n- Glass morphism, gradient borders, shadows, and more\n\n### Inputs (17)\n- Form input styles including text, email, password, and search inputs\n- Various border styles, focus states, and modern designs\n\n### Badges (21)\n- Badge variants for labels, tags, and status indicators\n- Different shapes, colors, and styles\n\n### Loaders (18)\n- Loading animations and spinners\n- Various styles including spinners, dots, bars, and more\n\n### Avatars (20)\n- Avatar styles and variations\n- Different shapes, sizes, and border styles\n\n### Toggles (13)\n- Toggle switches and checkboxes\n- Various styles including iOS-style, material, and custom designs\n\n### Dividers (20)\n- Divider styles and separators\n- Horizontal and vertical dividers with various styles\n\n## 💻 CLI Usage\n\n```bash\n# List all component types\nshorilabs patterns\nshorilabs buttons\nshorilabs cards\nshorilabs inputs\nshorilabs badges\nshorilabs loaders\nshorilabs avatars\nshorilabs toggles\nshorilabs dividers\n\n# Filter by category\nshorilabs patterns --category gradients\nshorilabs buttons --category neon\n\n# Get component CSS\nshorilabs get aurora-glow\nshorilabs get neon-blue --type button\nshorilabs get card-gradient --type card\n\n# Add to project\nshorilabs add aurora-glow --file styles.css\nshorilabs add neon-blue --type button --file buttons.css\nshorilabs add card-gradient --type card --file cards.css\n\n# Search all components\nshorilabs search gradient\n\n# Show CLI info\nshorilabs info\n```\n\n## 📝 Adding New Components\n\n### Adding Patterns\n\nEdit `src/data/patterns.ts`:\n\n```typescript\n{\n  id: \"your-pattern-id\",\n  name: \"Your Pattern Name\",\n  category: \"gradients\" | \"geometric\" | \"decorative\" | \"effects\",\n  isNew: true,\n  css: `background: your-css-here;`,\n  tailwind: `bg-[your-tailwind-classes]`,\n}\n```\n\n### Adding Other Components\n\nEdit the respective data file (`src/data/buttons.ts`, `cards.ts`, `inputs.ts`, etc.):\n\n```typescript\n{\n  id: \"your-component-id\",\n  name: \"Your Component Name\",\n  category: \"category-name\",\n  isNew: true,\n  css: `your-css-here`,\n  tailwind: `your-tailwind-classes`,\n}\n```\n\nAfter adding components, export them for the CLI:\n\n```bash\nnpm run export-patterns\n```\n\n## 📦 Packages\n\n- **[@shorilabs/cli](https://www.npmjs.com/package/@shorilabs/cli)** - CLI tool to browse and install all component types (patterns, buttons, cards, inputs, badges, loaders, avatars, toggles, dividers)\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n## 📄 License\n\nThis project is open source and available under the [MIT License](LICENSE).\n\n## 🔗 Links\n\n- **Website:** [shorilabs.xyz](https://shorilabs.xyz)\n- **npm Package:** [@shorilabs/cli](https://www.npmjs.com/package/@shorilabs/cli)\n- **GitHub:** [github.com/pratik20gb/shorilabs](https://github.com/pratik20gb/shorilabs)\n- **X:** [@sage_pratik](https://twitter.com/sage_pratik)\n\n---\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./public/logo-green-dark.svg\" alt=\"shorilabs\" height=\"60\"\u003e\n  \u003cbr /\u003e\u003cbr /\u003e\n  \u003cp\u003eMade with ❤️ by \u003ca href=\"https://thepratik.xyz\"\u003e\u003cstrong\u003ePratik\u003c/strong\u003e\u003c/a\u003e\u003c/p\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpratik20gb%2Fshorilabs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpratik20gb%2Fshorilabs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpratik20gb%2Fshorilabs/lists"}