Lightswind UI

Ultimate Destination for Frontend Developer's

100+ Components

Create 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.

Installation

Follow our step-by-step guide to integrate Lightswind UI into your project

Step 1: Create Project

Start with your favorite React framework

Vite

npm create vite@latest

Next.js

npx create-next-app

React

npx create-react-app my-app

Remix

npx create-remix

Step 2: Install Package

Add Lightswind UI to your dependencies

npmyarnpnpmbun

npm install lightswind

Install Tailwind CSS

npm install -D tailwindcss

Step 3: Initialize

Set up components in your project

One-command setup

npx create-lightswind

✓ Creates lightswind folder

✓ Sets up lib utilities

✓ Configures theme

Step 4: Setup Plugin

Update your tailwind.config.js

tailwind.config.js

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: { extend: {} },
  plugins: [require("lightswind/plugin")],
};

Usage Example

Start building your interface with Lightswind UI components

Component Structure

src/
├── components/lightswind/
│   ├── button.tsx
│   ├── card.tsx
│   └── ...
├── lib/utils.ts
└── ...

Example Code

import { Button } from './lightswind/button';
import { Card } from './lightswind/card';

export default function App() {
  return (
    <Card className="p-4">
      <Button>Click me</Button>
    </Card>
  );
}

Usage Example

Start building your interface with Lightswind UI

Component Structure

src/
├── components/lightswind/
│   ├── button.tsx
│   ├── card.tsx
│   ├── dialog.tsx
│   └── ... more components
├── lib/
│   ├── utils.ts
│   └── theme.ts
└── ... rest of your project

Example Code

import { Button } from './lightswind/button';
import { Card, CardHeader, CardTitle, 
  CardContent } from './lightswind/card';

export default function App() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Welcome</CardTitle>
      </CardHeader>
      <CardContent>
        <Button>Get Started</Button>
      </CardContent>
    </Card>
  );
}

Ready to go!

You've successfully installed and set up Lightswind UI components in your project.

View Documentation

See It In Action

Watch how easy it is to build with Lightswind UI