{"id":29561588,"url":"https://github.com/codewithmuhilan/lightswind-ui","last_synced_at":"2025-07-18T16:38:44.533Z","repository":{"id":180419719,"uuid":"665114665","full_name":"codewithMUHILAN/Lightswind-UI","owner":"codewithMUHILAN","description":"Create stunning web applications effortlessly with Lightwind UI. Access 100+ customizable CLI components, blocks, and templates—from dashboards to resource pages. Available in React, these animated elements are fully customizable, helping you craft user-friendly, visually appealing apps quickly","archived":false,"fork":false,"pushed_at":"2025-07-18T05:09:29.000Z","size":202866,"stargazers_count":186,"open_issues_count":1,"forks_count":38,"subscribers_count":5,"default_branch":"Master","last_synced_at":"2025-07-18T08:09:20.596Z","etag":null,"topics":["animated-components","frontend","html","lightswind-ui","react","tailwindcss","ui-kit","ui-library"],"latest_commit_sha":null,"homepage":"https://lightswind.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codewithMUHILAN.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}},"created_at":"2023-07-11T13:17:53.000Z","updated_at":"2025-07-18T05:07:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"29c0c29f-46ec-4a4e-98b0-db7e82bc9307","html_url":"https://github.com/codewithMUHILAN/Lightswind-UI","commit_stats":null,"previous_names":["codewithmuhilan/reels","codewithmuhilan/lightswind-ui"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/codewithMUHILAN/Lightswind-UI","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithMUHILAN%2FLightswind-UI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithMUHILAN%2FLightswind-UI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithMUHILAN%2FLightswind-UI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithMUHILAN%2FLightswind-UI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codewithMUHILAN","download_url":"https://codeload.github.com/codewithMUHILAN/Lightswind-UI/tar.gz/refs/heads/Master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithMUHILAN%2FLightswind-UI/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265793684,"owners_count":23829180,"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","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":["animated-components","frontend","html","lightswind-ui","react","tailwindcss","ui-kit","ui-library"],"created_at":"2025-07-18T16:38:43.947Z","updated_at":"2025-07-18T16:38:44.520Z","avatar_url":"https://github.com/codewithMUHILAN.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://codewithmuhilan.com/Extra-Assets/lightwind-logo.png\" alt=\"Lightswind UI Logo\" width=\"180\" /\u003e\n  \n  \u003ch1 align=\"center\"\u003eLightswind UI 3.0.6\u003c/h1\u003e\n  \n  \u003cp align=\"center\"\u003e\n    \u003cb\u003eCreate stunning web applications effortlessly with Lightwind UI. Access 100+ customizable cli components, blocks, and templates for various applications—from dashboards to resource pages and catalog displays. Available in React, these pre-built animated elements are fully customizable, helping you craft user-friendly, visually appealing apps without starting from scratch.\u003c/b\u003e\n  \u003c/p\u003e\n  \n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/codewithMUHILAN/Lightswind-UI-Library/stargazers\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/stars/codewithMUHILAN/Lightswind-UI-Library?style=flat-square\u0026labelColor=000000\u0026color=4d4d4d\" alt=\"GitHub Stars\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/lightswind\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/lightswind?style=flat-square\u0026labelColor=000000\u0026color=4d4d4d\" alt=\"NPM Version\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/codewithMUHILAN/Lightswind-UI-Library/blob/main/README.md\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/license/codewithMUHILAN/Lightswind-UI-Library?style=flat-square\u0026labelColor=000000\u0026color=4d4d4d\" alt=\"License\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n  \n  \u003cbr /\u003e\n  \u003c!-- \u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://i.ibb.co/CtFSK18/lightswind-components-display.png\" alt=\"Lightswind UI Components\" width=\"90%\" /\u003e\n  \u003c/p\u003e --\u003e\n\u003c/div\u003e\n\n\u003chr /\u003e\n\n## 📦 Installation\n\n\u003ch3\u003eInstall Lightswind in your Project\u003c/h3\u003e\n\n```bash\n# Using npm\nnpm install lightswind@lastest\n\n# Using yarn\nyarn add lightswind\n\n# Using pnpm\npnpm add lightswind\n```\n\u003ch3\u003eRun the create command to add Lightswind components to your local project\u003c/h3\u003e\n\n```bash\n# Create lightswind folder in your project\nnpx create-lightswind\n\n# Note**\nWhat this command does:\nCreates src/components/lightswind folder\nAll UI components are organized in this directory\n\nSets up src/lib folder\nContains utilities and helpers for component functionality\n\nConfigures theme settings\nSets up custom theme variables and Tailwind configuration\n\nAdds TypeScript types\nIncludes comprehensive type definitions for all components\n```\n\n\u003ch3\u003eSetup Black-UI Plugin\u003c/h3\u003e\n\n```bash\n# Basic Plugin Setup\n\n module.exports = {\n  content: [\"./src/**/*.{js,jsx,ts,tsx}\"],\n  theme: {\n    extend: {},\n  },\n  plugins: [require(\"lightswind/plugin\")],\n};\n```\n\n\u003ch3\u003eStart building your interface with Lightswind UI components\u003c/h3\u003e\n\n## 🔧 Requirements\n\n- React 18+\n- Tailwind CSS 3.3+\n- TypeScript 4.9+ (for TypeScript users)\n\n## 🚀 Quick Start\n\n```jsx\nimport React from 'react';\nimport { Button } from '@components/lightswind/button';\nimport { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@components/lightswind/card';\nimport { Input } from '@components/lightswind/input';\n\nexport default function LoginPage() {\n  return (\n    \u003cdiv className=\"min-h-screen flex items-center justify-center bg-slate-50 dark:bg-slate-900 p-4\"\u003e\n      \u003cCard className=\"w-full max-w-md shadow-lg\"\u003e\n        \u003cCardHeader className=\"space-y-1\"\u003e\n          \u003cCardTitle className=\"text-2xl font-bold\"\u003eSign in\u003c/CardTitle\u003e\n          \u003cCardDescription\u003eEnter your credentials to access your account\u003c/CardDescription\u003e\n        \u003c/CardHeader\u003e\n        \u003cCardContent\u003e\n          \u003cdiv className=\"space-y-4\"\u003e\n            \u003cdiv className=\"space-y-2\"\u003e\n              \u003clabel htmlFor=\"email\" className=\"text-sm font-medium\"\u003eEmail\u003c/label\u003e\n              \u003cInput id=\"email\" type=\"email\" placeholder=\"your@email.com\" /\u003e\n            \u003c/div\u003e\n            \u003cdiv className=\"space-y-2\"\u003e\n              \u003clabel htmlFor=\"password\" className=\"text-sm font-medium\"\u003ePassword\u003c/label\u003e\n              \u003cInput id=\"password\" type=\"password\" placeholder=\"••••••••\" /\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/CardContent\u003e\n        \u003cCardFooter\u003e\n          \u003cButton className=\"w-full\"\u003eSign in\u003c/Button\u003e\n        \u003c/CardFooter\u003e\n      \u003c/Card\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## ✨ Features\n\n- **🎨 Beautiful Design System** — Sleek, professional aesthetics with carefully crafted components\n- **♿ Accessible Components** — WCAG 2.1 compliant with full keyboard navigation and screen reader support\n- **🌙 Dark Mode Built-in** — Seamless light and dark mode transitions with consistent theming\n- **📱 Fully Responsive** — Components designed to work flawlessly across all device sizes\n- **⚡ Performance Optimized** — Efficient rendering with minimal bundle size impact\n- **🧩 Highly Customizable** — Flexible theming system that adapts to your brand\n- **🔄 Interactive Effects** — Smooth animations and transitions enhance user experience\n- **📊 Advanced UI Patterns** — Sophisticated components for complex data visualization and user interactions\n\n## 🧩 Component Library\n\nLightswind UI includes a comprehensive set of components:\n\n### Our Components List\n\n\u003cul className=\"space-y-4\"\u003e\n  \u003cli\u003e\n    \u003ch3 className=\"text-xl font-bold mb-2\"\u003eGet Started\u003c/h3\u003e\n    \u003cul className=\"ml-4 list-disc text-sm text-muted-foreground\"\u003e\n      \u003cli\u003eIntroduction\u003c/li\u003e\n      \u003cli\u003eInstallation\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/li\u003e\n\n  \u003cli\u003e\n    \u003ch3 className=\"text-xl font-bold mb-2\"\u003eBackground\u003c/h3\u003e\n    \u003cul className=\"ml-4 list-disc text-sm text-muted-foreground\"\u003e\n      \u003cli\u003eAnimated Wave\u003c/li\u003e\n      \u003cli\u003eAnimated Bubble Particles\u003c/li\u003e\n      \u003cli\u003eAnimated Ocean Waves\u003c/li\u003e\n      \u003cli\u003eGrid \u0026 Dot Backgrounds\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/li\u003e\n\n  \u003cli\u003e\n    \u003ch3 className=\"text-xl font-bold mb-2\"\u003eText\u003c/h3\u003e\n    \u003cul className=\"ml-4 list-disc text-sm text-muted-foreground\"\u003e\n      \u003cli\u003eAurora Text\u003c/li\u003e\n      \u003cli\u003eScroll Reveal\u003c/li\u003e\n      \u003cli\u003eShiny Text\u003c/li\u003e\n      \u003cli\u003eTypewriter Input\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/li\u003e\n\n  \u003cli\u003e\n    \u003ch3 className=\"text-xl font-bold mb-2\"\u003eButton\u003c/h3\u003e\n    \u003cul className=\"ml-4 list-disc text-sm text-muted-foreground\"\u003e\n      \u003cli\u003eBorder Beam\u003c/li\u003e\n      \u003cli\u003eConfetti Button\u003c/li\u003e\n      \u003cli\u003eGradient Button\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/li\u003e\n\n  \u003cli\u003e\n    \u003ch3 className=\"text-xl font-bold mb-2\"\u003e3D Elements\u003c/h3\u003e\n    \u003cul className=\"ml-4 list-disc text-sm text-muted-foreground\"\u003e\n      \u003cli\u003e3d Image Ring\u003c/li\u003e\n      \u003cli\u003e3D Carousel\u003c/li\u003e\n      \u003cli\u003e3D Marquee\u003c/li\u003e\n      \u003cli\u003e3D Hover Gallery\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/li\u003e\n\n  \u003cli\u003e\n    \u003ch3 className=\"text-xl font-bold mb-2\"\u003eCursor\u003c/h3\u003e\n    \u003cul className=\"ml-4 list-disc text-sm text-muted-foreground\"\u003e\n      \u003cli\u003eCanvas Confetti Cursor\u003c/li\u003e\n      \u003cli\u003eMagic Cursor\u003c/li\u003e\n      \u003cli\u003eParticle Orbit Effect\u003c/li\u003e\n      \u003cli\u003eSmokey Cursor\u003c/li\u003e\n      \u003cli\u003eSmooth Cursor\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/li\u003e\n\n  \u003cli\u003e\n    \u003ch3 className=\"text-xl font-bold mb-2\"\u003eComponents\u003c/h3\u003e\n    \u003cul className=\"ml-4 list-disc text-sm text-muted-foreground\"\u003e\n      \u003cli\u003eAnimated Notification\u003c/li\u003e\n      \u003cli\u003eCode Hover Cards\u003c/li\u003e\n      \u003cli\u003eCount Up\u003c/li\u003e\n      \u003cli\u003eDynamic Navigation\u003c/li\u003e\n      \u003cli\u003eGlowing Cards\u003c/li\u003e\n      \u003cli\u003eHamburger Menu Overlay\u003c/li\u003e\n      \u003cli\u003eInteractive Gradient Card\u003c/li\u003e\n      \u003cli\u003eLens\u003c/li\u003e\n      \u003cli\u003eMagic Loader\u003c/li\u003e\n      \u003cli\u003eMorphing Navigation\u003c/li\u003e\n      \u003cli\u003ePassword Strength Indicator\u003c/li\u003e\n      \u003cli\u003eScroll Stack\u003c/li\u003e\n      \u003cli\u003eScroll Timeline\u003c/li\u003e\n      \u003cli\u003eSeasonal Hover Cards\u003c/li\u003e\n      \u003cli\u003eSliding Logo Marquee\u003c/li\u003e\n      \u003cli\u003eTeam Carousel\u003c/li\u003e\n      \u003cli\u003eWoofy Hover Image\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/li\u003e\n\n  \u003cli\u003e\n    \u003ch3 className=\"text-xl font-bold mb-2\"\u003eLayout\u003c/h3\u003e\n    \u003cul className=\"ml-4 list-disc text-sm text-muted-foreground\"\u003e\n      \u003cli\u003eAccordion\u003c/li\u003e\n      \u003cli\u003eAspect Ratio\u003c/li\u003e\n      \u003cli\u003eResizable\u003c/li\u003e\n      \u003cli\u003eScroll Area\u003c/li\u003e\n      \u003cli\u003eSeparator\u003c/li\u003e\n      \u003cli\u003eTabs\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/li\u003e\n\n  \u003cli\u003e\n    \u003ch3 className=\"text-xl font-bold mb-2\"\u003eUI Elements\u003c/h3\u003e\n    \u003cul className=\"ml-4 list-disc text-sm text-muted-foreground\"\u003e\n      \u003cli\u003eAlert\u003c/li\u003e\n      \u003cli\u003eAlert Dialog\u003c/li\u003e\n      \u003cli\u003eAvatar\u003c/li\u003e\n      \u003cli\u003eBadge\u003c/li\u003e\n      \u003cli\u003eButton\u003c/li\u003e\n      \u003cli\u003eCard\u003c/li\u003e\n      \u003cli\u003eCarousel\u003c/li\u003e\n      \u003cli\u003eChart\u003c/li\u003e\n      \u003cli\u003eCollapsible\u003c/li\u003e\n      \u003cli\u003eContext Menu\u003c/li\u003e\n      \u003cli\u003eDialog\u003c/li\u003e\n      \u003cli\u003eDrawer\u003c/li\u003e\n      \u003cli\u003eDropdown Menu\u003c/li\u003e\n      \u003cli\u003eHover Card\u003c/li\u003e\n      \u003cli\u003ePopover\u003c/li\u003e\n      \u003cli\u003eProgress\u003c/li\u003e\n      \u003cli\u003eSheet\u003c/li\u003e\n      \u003cli\u003eSkeleton\u003c/li\u003e\n      \u003cli\u003eTable\u003c/li\u003e\n      \u003cli\u003eToast\u003c/li\u003e\n      \u003cli\u003eTooltip\u003c/li\u003e\n      \u003cli\u003eTop Loader\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/li\u003e\n\n  \u003cli\u003e\n    \u003ch3 className=\"text-xl font-bold mb-2\"\u003eForm Controls\u003c/h3\u003e\n    \u003cul className=\"ml-4 list-disc text-sm text-muted-foreground\"\u003e\n      \u003cli\u003eCalendar\u003c/li\u003e\n      \u003cli\u003eCheckbox\u003c/li\u003e\n      \u003cli\u003eCommand\u003c/li\u003e\n      \u003cli\u003eForm\u003c/li\u003e\n      \u003cli\u003eInput\u003c/li\u003e\n      \u003cli\u003eInput OTP\u003c/li\u003e\n      \u003cli\u003eLabel\u003c/li\u003e\n      \u003cli\u003eRadio Group\u003c/li\u003e\n      \u003cli\u003eSelect\u003c/li\u003e\n      \u003cli\u003eSlider\u003c/li\u003e\n      \u003cli\u003eSwitch\u003c/li\u003e\n      \u003cli\u003eTextarea\u003c/li\u003e\n      \u003cli\u003eToggle\u003c/li\u003e\n      \u003cli\u003eToggle Group\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/li\u003e\n\n  \u003cli\u003e\n    \u003ch3 className=\"text-xl font-bold mb-2\"\u003eNavigation\u003c/h3\u003e\n    \u003cul className=\"ml-4 list-disc text-sm text-muted-foreground\"\u003e\n      \u003cli\u003eBreadcrumb\u003c/li\u003e\n      \u003cli\u003eCommand\u003c/li\u003e\n      \u003cli\u003eDock\u003c/li\u003e\n      \u003cli\u003eMenubar\u003c/li\u003e\n      \u003cli\u003eNavigation Menu\u003c/li\u003e\n      \u003cli\u003ePagination\u003c/li\u003e\n      \u003cli\u003eSidebar\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/li\u003e\n\u003c/ul\u003e\n\n\n\n\n## 🌈 Theming System\n\nLightswind UI uses CSS variables for theming, making it easy to customize:\n\n```css\n:root {\n  --primary: 240 5% 10%;\n  --primary-foreground: 0 0% 98%;\n  \n  /* Add your custom theme colors */\n  --brand-purple: 267 100% 58%;\n  --brand-blue: 214 100% 60%;\n}\n\n.dark {\n  --primary: 0 0% 98%;\n  --primary-foreground: 240 5% 10%;\n}\n```\n\n\n## 📖 Documentation\n\nFor comprehensive documentation including all components, props, and examples:\n\n[**View Documentation**](https://pro.lightswind.com/components?component=Introduction)\n\n\n## 🤝 Contributing\n\nWe welcome contributions to Lightswind UI! Here's how you can help:\n\n1. Fork the repository\n2. Create a feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## 📋 Changelog\n\n### Version 3.0.0 (July 2025)\n- 🎉 Initial stable release with 40+ production-ready components\n-  Basic to Advanced props for each components.\n-  Dark mode support finalized\n-  WCAG 2.1 AA compliance across all components\n-  Responsive design for all screen sizes\n-  Theme customization system\n-  Performance optimizations\n-  Well-documented for each component\n\n### Version 3.0.3 (July 2025)\n- 🎉 Added 10+ Animated Components\n-  Rectified the old components bugs\n\n### Version 3.0.6 (July 2025)\n- 🎉 Added 5+ Animated Components\n-  Rectified the old components bugs\n\n## 📄 License\n\nLightswind UI is licensed under the [MIT License](https://github.com/codewithMUHILAN/Lightswind-UI-Library/blob/main/README.md).\n\n---\n\n\u003cdiv align=\"center\"\u003e\n  \u003cp\u003e\n    \u003csub\u003eDesigned and built with ❤️ by the MuhilanOrg\u003c/sub\u003e\n  \u003c/p\u003e\n  \u003cp\u003e\n\u003ca href=\"https://instagram.com/codewith_muhilan/\" target=\"_blank\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Follow-@codewith_muhilan-blue?style=social\u0026logo=instagram\" alt=\"Instagram Follow\" /\u003e\n\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodewithmuhilan%2Flightswind-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodewithmuhilan%2Flightswind-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodewithmuhilan%2Flightswind-ui/lists"}