A collection of beautifully crafted React Components, Blocks & Templates built with Tailwind CSS. Create stunning web applications effortlessly by using our 100+ professional and animated react components.
Lightswind UI components are built on Tailwind CSS. Make sure to install Tailwind in your project by following the instructions at Tailwind CSS Installation Guide.
Add the Lightswind UI package to your project dependencies.
# Using npm
npm install lightswind@lastest
# Using yarn
yarn add lightswind
# Using pnpm
pnpm add lightswindSet up Lightswind UI components in your project structure.
Our CLI tool will automatically install all components, utilities, and styles to your project.
npx create-lightswindCreates src/components/lightswind src/components/lightswind folder All UI components are organized in this directory.
Sets up src/lib folder Contains utilities and helpers for component functionality.
Configures theme settings Sets up custom theme variables and Tailwind configuration.
Adds TypeScript types Includes comprehensive type definitions for all components.
Copies CSS styles
Places the lightswind.css file in src/components/lightswind.css.
Use the CLI to install only the components you need. Replace `[component-name]` with the desired component (e.g., `button`, `card`, `dialog`).
npx create-lightswind buttonCopies the component file to src/components/lightswind The selected component's source code will be available in this directory.
Copies associated utility files to src/lib Any necessary helper functions or utilities for the component are included.
Copies the main Lightswind CSS to src/components/lightswind.css The core styles for Lightswind UI are provided.
Integrate Lightswind UI's core styles into your project using one of the methods below.
Using the Tailwind CSS plugin is the easiest way to get started and ensures seamless integration and updates.
For Tailwind CSS v4.x (Alpha)
----------------------
/* In your main CSS file (e.g., globals.css) */
@import 'tailwindcss';
@plugin 'lightswind/plugin'; /* <-- Add this line */
/* Your custom styles below */
For Tailwind CSS v3.x
----------------------
// tailwind.config.js
module.exports = {
// ...
plugins: [
require('lightswind/plugin'),
// ...
],
}This method requires you to manually import the static CSS file generated by the CLI. This is not recommended if you plan to use the plugin system.
/* Add to your main CSS file (e.g., globals.css) */
@import "./src/components/lightswind.css";
(or)
@import "@/components/lightswind/lightswind.css";Start building your interface with Lightswind UI components.
After running the initialization command (e.g., `npx create-lightswind`), your project structure will be updated to include Lightswind UI components and utilities.
src/
├── components/
│ ├── lightswind/
│ │ ├── button.tsx
│ │ ├── card.tsx
│ │ ├── dialog.tsx
│ │ └── ... more components
│ └── ... your components
├── lib/
│ ├── utils.ts
│ └── theme.ts
├── components/lightswind.css <-- Lightswind UI core styles
└── ... rest of your projectYou've successfully installed and set up Lightswind UI components in your project.
For a complete setup walkthrough with examples and configuration tips, visit: https://lightswind.com/components/installation
```- React 18+
- Tailwind CSS 3+
- TypeScript 4.9+ (for TypeScript users)
import React from "react";
import { Button } from "@/components/lightswind/button";
import {
Card,
CardHeader,
CardTitle,
CardDescription,
CardContent,
CardFooter,
} from "@/components/lightswind/card";
import { Input } from "@/components/lightswind/input";
export default function LoginPage() {
return (
<div className="min-h-screen flex items-center justify-center bg-slate-50 dark:bg-slate-900 p-4">
<Card className="w-full max-w-md shadow-lg">
<CardHeader className="space-y-1">
<CardTitle className="text-2xl font-bold">Sign in</CardTitle>
<CardDescription>
Enter your credentials to access your account
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4">
<div className="space-y-2">
<label htmlFor="email" className="text-sm font-medium">
Email
</label>
<Input id="email" type="email" placeholder="your@email.com" />
</div>
<div className="space-y-2">
<label htmlFor="password" className="text-sm font-medium">
Password
</label>
<Input id="password" type="password" placeholder="••••••••" />
</div>
</div>
</CardContent>
<CardFooter>
<Button className="w-full">Sign in</Button>
</CardFooter>
</Card>
</div>
);
}-
⚡ Responsive by Default — All components are designed to work across devices of all sizes
-
⚡ Themeable — Customize the look and feel to match your brand identity
-
⚡ Accessible — Follows WAI-ARIA guidelines for inclusive user interfaces
-
⚡ Modern Animations — Subtle animations and transitions enhance user experience
-
⚡ CLI Installation — Quickly set up projects with our simple and powerful CLI tool
-
⚡ AI Assistance — Get smart recommendations and code suggestions powered by AI for faster development
Create stunning web applications effortlessly by using our 100+ professional and animated react components.:
-
- Animated Notification
- Bento Grid
- Code Hover Cards
- Count Up
- Dock
- Drag Order List
- Dynamic Navigation
- Glass Folder
- Globe
- Glowing Cards
- Hamburger Menu Overlay
- Image Reveal
- Image Trail Effect
- Interactive Card
- Interactive Gradient Card
- Lens
- Magic Loader
- Morphing Navigation
- Orbit Card
- Password Strength Indicator
- Scroll List
- Scroll Stack
- Scroll Timeline
- Seasonal Hover Cards
- Sliding Cards
- Sliding Logo Marquee
- Stack List
- Team Carousel
- Terminal Card
- Top Loader
- Top Sticky Bar
- Trusted Users
- Ripple Loader
- Woofy Hover Image
Lightswind UI uses CSS variables for theming, making it easy to customize:
":root": {
"--primarylw": "#173eff",
"--primarylw-2": "#3758f9",
"--darklw": "#11131B",
"--darklw-2": "#1a1d25",
"--greedy": "#07eae6",
"--background": "0 0% 100%",
"--foreground": "0 0% 0%",
"--card": "0 0% 100%",
"--card-foreground": "0 0% 0%",
"--popover": "0 0% 100%",
"--popover-foreground": "0 0% 0%",
"--primary": "0 0% 0%",
"--primary-foreground": "0 0% 100%",
"--secondary": "0 0% 96%",
"--secondary-foreground": "0 0% 0%",
"--muted": "0 0% 96%",
"--muted-foreground": "0 0% 45%",
"--accent": "0 0% 96%",
"--accent-foreground": "0 0% 0%",
"--destructive": "0 84% 60%",
"--destructive-foreground": "0 0% 100%",
"--border": "0 0% 90%",
"--input": "0 0% 90%",
"--ring": "0 0% 0%",
"--radius": "0.5rem",
"--scrollbar-thumb": "0 0% 75%",
"--scrollbar-track": "0 0% 95%",
"--scrollbar-hover": "0 0% 65%",
},
// Dark theme
".dark": {
"--primarylw": "#173eff",
"--primarylw-2": "#3758f9",
"--darklw": "#11131B",
"--darklw-2": "#1a1d25",
"--greedy": "#07eae6",
"--background": "0 0% 0%",
"--foreground": "0 0% 100%",
"--card": "0 0% 5%",
"--card-foreground": "0 0% 100%",
"--popover": "0 0% 5%",
"--popover-foreground": "0 0% 100%",
"--primary": "0 0% 100%",
"--primary-foreground": "0 0% 0%",
"--secondary": "0 0% 15%",
"--secondary-foreground": "0 0% 100%",
"--muted": "0 0% 15%",
"--muted-foreground": "0 0% 65%",
"--accent": "0 0% 15%",
"--accent-foreground": "0 0% 100%",
"--destructive": "0 62% 30%",
"--destructive-foreground": "0 0% 100%",
"--border": "#000",
"--input": "0 0% 20%",
"--ring": "0 0% 20%",
"--scrollbar-thumb": "0 0% 25%",
"--scrollbar-track": "0 0% 10%",
"--scrollbar-hover": "0 0% 35%",
},For comprehensive documentation including all components, props, and examples:
We welcome contributions to Lightswind UI! Here's how you can help:
- Request a feature
- Report an issue
- Buy me a Coffee (Support Us❤️)
- Buy Our Premium Plan (Support Us❤️)
- Star out Repository (Star Us❤️)
Lightswind UI is licensed under the [MIT License].
Designed and built with ❤️ by the Code with Muhilan
