Winu UI

A comprehensive React component library with beautiful animations, dark mode support, and responsive design for building stunning landing pages and applications.

Features

• 🎨 Beautiful, responsive components
• 🌓 Dark and light theme support
• ✨ Seamless animations with Framer Motion
• 📱 Mobile-friendly design
• 🧩 Modular architecture
• 🛠️ Highly customizable components

Installation

npm install winu-ui
# or
yarn add winu-ui
# or
pnpm add winu-ui

Usage

ThemeProvider Setup

Wrap your application with the ThemeProvider to enable theming:

import { ThemeProvider } from 'winu-ui';

function App() {
  return (
    <ThemeProvider defaultTheme="light" storageKey="ui-theme">
      <YourAppContent />
    </ThemeProvider>
  );
}

Theme Toggle

Add a theme toggle button to switch between dark and light modes:

import { ThemeToggle } from 'winu-ui';

function Header() {
  return (
    <header>
      <ThemeToggle />
    </header>
  );
}

Components

Button

import { Button } from 'winu-ui';

function Example() {
  return (
    <div className="space-x-2">
      <Button>Default</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="destructive">Destructive</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="link">Link</Button>
      <Button variant="gradient">Gradient</Button>
      <Button size="sm">Small</Button>
      <Button size="lg">Large</Button>
      <Button animation="bounce">Animated</Button>
      <Button disabled>Disabled</Button>
    </div>
  );
}

Card

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Button } from 'winu-ui';

function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>Card description goes here</CardDescription>
      </CardHeader>
      <CardContent>
        <p>Content of your card</p>
      </CardContent>
      <CardFooter>
        <Button>Action</Button>
      </CardFooter>
    </Card>
  );
}

Form

import { useForm } from 'react-hook-form';
import { 
  Form, 
  FormField, 
  FormItem, 
  FormLabel, 
  FormControl, 
  FormDescription,
  FormMessage,
  Input,
  Button 
} from 'winu-ui';

function Example() {
  const form = useForm();
  
  const onSubmit = (data) => {
    console.log(data);
  };
  
  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        <FormField
          control={form.control}
          name="username"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Username</FormLabel>
              <FormControl>
                <Input placeholder="Username" {...field} />
              </FormControl>
              <FormDescription>Enter your username.</FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit">Submit</Button>
      </form>
    </Form>
  );
}

Navbar

import { Navbar } from 'winu-ui';

function Example() {
  const menuItems = [
    { label: 'Home', href: '/' },
    { label: 'Features', href: '/features' },
    { label: 'Pricing', href: '/pricing' },
    { label: 'Contact', href: '/contact' },
  ];

  return (
    <Navbar 
      brandName="Winu UI" 
      menuItems={menuItems}
      sticky={true}
      transparent={false}
    />
  );
}

Modal

import { useState } from 'react';
import { Modal, Button } from 'winu-ui';

function Example() {
  const [isOpen, setIsOpen] = useState(false);
  
  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
      <Modal 
        isOpen={isOpen} 
        onClose={() => setIsOpen(false)}
        title="Example Modal"
        description="This is a description of the modal"
        footer={
          <>
            <Button variant="outline" onClick={() => setIsOpen(false)}>Cancel</Button>
            <Button onClick={() => setIsOpen(false)}>Save</Button>
          </>
        }
      >
        <p>Modal content goes here.</p>
      </Modal>
    </>
  );
}

Sidebar

import { useState } from 'react';
import { Sidebar, SidebarSection, SidebarItem } from 'winu-ui';
import { Home, Settings, User } from 'lucide-react';

function Example() {
  const [open, setOpen] = useState(true);
  
  return (
    <Sidebar
      open={open}
      onOpenChange={setOpen}
      side="left"
    >
      <SidebarSection title="Main">
        <SidebarItem href="/dashboard" icon={<Home />} active>
          Dashboard
        </SidebarItem>
        <SidebarItem href="/profile" icon={<User />}>
          Profile
        </SidebarItem>
        <SidebarItem href="/settings" icon={<Settings />}>
          Settings
        </SidebarItem>
      </SidebarSection>
    </Sidebar>
  );
}

Wizard

import { Wizard } from 'winu-ui';

function Example() {
  const steps = [
    {
      id: 'step1',
      title: 'Personal Information',
      description: 'Enter your personal details',
      component: <PersonalInfoStep />
    },
    {
      id: 'step2',
      title: 'Address',
      component: <AddressStep />
    },
    {
      id: 'step3',
      title: 'Review',
      component: <ReviewStep />
    }
  ];

  const handleComplete = (data) => {
    console.log('Wizard completed with data:', data);
  };

  return (
    <Wizard
      steps={steps}
      onComplete={handleComplete}
      initialData={{}}
      orientation="horizontal"
      showStepIndicator={true}
    />
  );
}

// Example step component
function PersonalInfoStep({ stepData, updateStepData }) {
  return (
    <div>
      <h3>Personal Information</h3>
      <input
        type="text"
        value={stepData?.name || ''}
        onChange={(e) => updateStepData({ name: e.target.value })}
        placeholder="Name"
      />
    </div>
  );
}

DataTable

import { DataTable } from 'winu-ui';

function Example() {
  const data = [
    { id: 1, name: 'John Doe', email: '[email protected]', age: 30 },
    { id: 2, name: 'Jane Smith', email: '[email protected]', age: 25 },
    { id: 3, name: 'Bob Johnson', email: '[email protected]', age: 40 },
  ];
  
  const columns = [
    {
      id: 'name',
      header: 'Name',
      accessorKey: 'name',
      sortable: true,
    },
    {
      id: 'email',
      header: 'Email',
      accessorKey: 'email',
    },
    {
      id: 'age',
      header: 'Age',
      accessorKey: 'age',
      sortable: true,
      cell: (value) => `${value} years`,
    },
  ];

  return (
    <DataTable 
      data={data} 
      columns={columns} 
      striped={true}
      hoverable={true}
      bordered={false}
      dense={false}
      pageSize={10}
      onRowClick={(row) => console.log(row)}
    />
  );
}

Landing Page Components

Hero Section

import { Hero } from 'winu-ui';

function LandingPage() {
  return (
    <Hero
      title="Welcome to Winu UI"
      subtitle="A beautiful, responsive React component library"
      ctaText="Get Started"
      ctaLink="/docs"
      imageUrl="/hero-image.png"
    />
  );
}

Feature Section

import { FeatureSection } from 'winu-ui';
import { Palette, Moon, Smartphone } from 'lucide-react';

function LandingPage() {
  const features = [
    {
      title: 'Beautiful Design',
      description: 'Sleek, modern components that look great out of the box',
      icon: <Palette />,
    },
    {
      title: 'Dark Mode Support',
      description: 'Built-in dark mode for a better user experience',
      icon: <Moon />,
    },
    {
      title: 'Responsive',
      description: 'Works flawlessly on all device sizes',
      icon: <Smartphone />,
    },
  ];

  return (
    <FeatureSection
      title="Features"
      subtitle="What makes Winu UI special"
      features={features}
    />
  );
}

Pricing Section

import { PricingSection } from 'winu-ui';

function LandingPage() {
  const plans = [
    {
      title: 'Starter',
      price: '$0',
      description: 'For individuals getting started',
      features: [
        '5 pages',
        'Basic components',
        'Community support',
      ],
      ctaText: 'Start for free',
      popular: false,
    },
    {
      title: 'Pro',
      price: '$29',
      description: 'For professional developers',
      features: [
        'Unlimited pages',
        'All components',
        'Priority support',
        'Custom themes',
      ],
      ctaText: 'Get Pro',
      popular: true,
    },
  ];

  return (
    <PricingSection
      title="Pricing"
      subtitle="Choose the plan that works for you"
      plans={plans}
    />
  );
}

Testimonial Section

import { TestimonialSection } from 'winu-ui';

function LandingPage() {
  const testimonials = [
    {
      quote: "The best component library I've ever used!",
      author: "Jane Smith",
      role: "Frontend Developer",
      avatar: "/avatars/jane.png",
    },
    {
      quote: "Winu UI saved me hours of development time.",
      author: "John Doe",
      role: "Product Manager",
      avatar: "/avatars/john.png",
    },
  ];

  return (
    <TestimonialSection
      title="What people are saying"
      testimonials={testimonials}
    />
  );
}

Footer

import { Footer } from 'winu-ui';

function LandingPage() {
  const links = [
    {
      title: 'Product',
      items: [
        { label: 'Features', href: '/features' },
        { label: 'Pricing', href: '/pricing' },
        { label: 'Documentation', href: '/docs' },
      ]
    },
    {
      title: 'Company',
      items: [
        { label: 'About', href: '/about' },
        { label: 'Blog', href: '/blog' },
        { label: 'Careers', href: '/careers' },
      ]
    }
  ];

  return (
    <Footer
      logo="/logo.svg"
      companyName="Winu UI"
      description="Beautiful React components with animations and dark mode support"
      links={links}
      copyright="© 2025 Winu UI. All rights reserved."
    />
  );
}

Complete Example

Here's a complete example of a landing page using Winu UI:

import { 
  ThemeProvider, 
  Navbar, 
  Hero,
  FeatureSection,
  TestimonialSection,
  PricingSection,
  Footer,
  ThemeToggle
} from 'winu-ui';
import { Palette, Moon, Smartphone } from 'lucide-react';

function App() {
  // Navbar menu items
  const menuItems = [
    { label: 'Home', href: '#' },
    { label: 'Features', href: '#features' },
    { label: 'Testimonials', href: '#testimonials' },
    { label: 'Pricing', href: '#pricing' },
  ];

  // Features
  const features = [
    {
      title: 'Beautiful Design',
      description: 'Sleek, modern components that look great out of the box',
      icon: <Palette />,
    },
    {
      title: 'Dark Mode Support',
      description: 'Built-in dark mode for a better user experience',
      icon: <Moon />,
    },
    {
      title: 'Responsive',
      description: 'Works flawlessly on all device sizes',
      icon: <Smartphone />,
    },
  ];

  // Testimonials
  const testimonials = [
    {
      quote: "The best component library I've ever used!",
      author: "Jane Smith",
      role: "Frontend Developer",
      avatar: "/avatars/jane.png",
    },
    {
      quote: "Winu UI saved me hours of development time.",
      author: "John Doe",
      role: "Product Manager",
      avatar: "/avatars/john.png",
    },
  ];

  // Pricing plans
  const plans = [
    {
      title: 'Starter',
      price: '$0',
      description: 'For individuals getting started',
      features: [
        '5 pages',
        'Basic components',
        'Community support',
      ],
      ctaText: 'Start for free',
      popular: false,
    },
    {
      title: 'Pro',
      price: '$29',
      description: 'For professional developers',
      features: [
        'Unlimited pages',
        'All components',
        'Priority support',
        'Custom themes',
      ],
      ctaText: 'Get Pro',
      popular: true,
    },
  ];

  // Footer links
  const footerLinks = [
    {
      title: 'Product',
      items: [
        { label: 'Features', href: '#features' },
        { label: 'Pricing', href: '#pricing' },
        { label: 'Documentation', href: '#docs' },
      ]
    },
    {
      title: 'Company',
      items: [
        { label: 'About', href: '#about' },
        { label: 'Blog', href: '#blog' },
        { label: 'Careers', href: '#careers' },
      ]
    }
  ];

  return (
    <ThemeProvider defaultTheme="light" storageKey="winu-theme">
      {/* Navbar with theme toggle */}
      <Navbar 
        brandName="Winu UI" 
        menuItems={menuItems} 
        rightContent={<ThemeToggle />}
        sticky={true}
      />

      {/* Hero section */}
      <Hero
        title="Welcome to Winu UI"
        subtitle="A beautiful, responsive React component library"
        ctaText="Get Started"
        ctaLink="#features"
        imageUrl="/hero-image.png"
      />

      {/* Features section */}
      <FeatureSection
        id="features"
        title="Features"
        subtitle="What makes Winu UI special"
        features={features}
      />

      {/* Testimonials section */}
      <TestimonialSection
        id="testimonials"
        title="What people are saying"
        testimonials={testimonials}
      />

      {/* Pricing section */}
      <PricingSection
        id="pricing"
        title="Pricing"
        subtitle="Choose the plan that works for you"
        plans={plans}
      />

      {/* Footer */}
      <Footer
        logo="/logo.svg"
        companyName="Winu UI"
        description="Beautiful React components with animations and dark mode support"
        links={footerLinks}
        copyright="© 2025 Winu UI. All rights reserved."
      />
    </ThemeProvider>
  );
}

export default App;

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT © [Your Name]