@developwave/ui

v0.3.4

Published

8 months ago

A customizable component library built with React, TypeScript, and Tailwind CSS

Downloads

0High
0Medium
0Low

developwave

react components ui tailwind typescript

Developwave UI

A complete collection of customizable React components built with TypeScript and Tailwind CSS. Inspired by shadcn/ui, Developwave UI provides 40+ production-ready components with full dark mode support and an advanced theming system.

✨ Features

🌊 40+ Components - Heroes, footers, headers, features, cards, CTAs, testimonials, pricing, and more
🎨 20+ Component Variants - Each component comes with multiple unique variants
🌓 Dark Mode - Built-in dark mode support with system preference detection
🎭 Theme System - Pre-built themes (Default, Ocean, Purple, Green) + custom theme support
⚡ Lightning Fast - Optimized for performance with minimal bundle size
📦 TypeScript - Full type safety and intellisense
🔧 Customizable - Every component can be styled with Tailwind and props
🚀 Powerful CLI - Create projects, add components, and configure themes with simple commands

🚀 Quick Start

Option 1: Create a New Project (Recommended)

The fastest way to get started is to create a new Next.js project with everything configured:

npx @developwave/ui create my-app

This will:

✅ Create a new Next.js 16 project with App Router
✅ Install all dependencies (@developwave/ui + utilities)
✅ Configure Tailwind CSS automatically
✅ Set up the theme system
✅ Let you choose your default theme (Default, Ocean, Purple, Green)
✅ Add example components to get you started

Then:

cd my-app
npm run dev

Visit http://localhost:3000 and you're ready to build!

Option 2: Add to Existing Next.js Project

If you already have a Next.js project:

npx @developwave/ui init

This will automatically:

✅ Install @developwave/ui and required dependencies
✅ Configure your tailwind.config.js
✅ Set up CSS variables in globals.css
✅ Create developwave.config.ts for theme customization
✅ Provide setup instructions for ThemeProvider

Then wrap your app with ThemeProvider in app/layout.tsx:

import { ThemeProvider } from "@developwave/ui";

export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider defaultTheme="default" defaultMode="system">
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

📦 Installation (Manual)

For manual installation:

npm install @developwave/ui class-variance-authority clsx tailwind-merge

Then follow the Manual Setup Guide below.

🎯 CLI Commands

Developwave UI comes with a powerful CLI to streamline your workflow:

`create` - Create New Project

Create a brand new Next.js project with Developwave UI pre-configured:

npx @developwave/ui create <project-name>

Features:

Interactive theme selection
Automatic dependency installation
Pre-configured Tailwind CSS
Example components included
Ready to run with npm run dev

Example:

npx @developwave/ui create my-landing-page
cd my-landing-page
npm run dev

`init` - Initialize in Existing Project

Add Developwave UI to your existing Next.js project:

npx @developwave/ui init

What it does:

Installs @developwave/ui and utilities
Updates tailwind.config.js with proper configuration
Adds CSS variables to globals.css
Creates developwave.config.ts for theme customization
Shows you how to set up ThemeProvider

Requirements:

Existing Next.js 13+ project
Tailwind CSS installed

`add` - Add Individual Components

Copy individual component variants directly to your project for full customization:

npx @developwave/ui add <component-name>

Why use add?

📝 Get the full source code in your project
✏️ Customize components however you want
🎨 No black box - you own the code
🔍 Better tree-shaking
📚 Learn from the implementation

Available Components:

# See all available components
npx @developwave/ui add

# Hero variants
npx @developwave/ui add hero-centered
npx @developwave/ui add hero-split
npx @developwave/ui add hero-video
npx @developwave/ui add hero-animated-gradient
npx @developwave/ui add hero-glassmorphism
npx @developwave/ui add hero-minimal

# Header variants
npx @developwave/ui add header-default
npx @developwave/ui add header-floating

# CTA variants
npx @developwave/ui add cta-default
npx @developwave/ui add cta-gradient
npx @developwave/ui add cta-split

# Footer variants
npx @developwave/ui add footer-default
npx @developwave/ui add footer-minimal

# Pricing & Testimonials
npx @developwave/ui add pricing-cards
npx @developwave/ui add testimonials-cards

# Base components
npx @developwave/ui add button
npx @developwave/ui add card
npx @developwave/ui add header
npx @developwave/ui add footer
npx @developwave/ui add features
npx @developwave/ui add cta
npx @developwave/ui add pricing
npx @developwave/ui add testimonials

Example Usage:

# Add a video hero component
npx @developwave/ui add hero-video

# Component is copied to: components/hero/hero-video.tsx

# Import and use it:
import { HeroVideo } from "@/components/hero/hero-video"

Two Ways to Use Components:

Import from Library (default):

import { HeroVideo, Button } from "@developwave/ui"

Add to Project (for customization):

npx @developwave/ui add hero-video

import { HeroVideo } from "@/components/hero/hero-video"

🎨 Theme System

Developwave UI includes a powerful theming system with dark mode support and pre-built color schemes.

Using Theme Components

import { ThemeToggle, ThemeSelector, useTheme } from "@developwave/ui";

export default function Header() {
  return (
    <header className="flex items-center gap-4">
      {/* Toggle between light and dark mode */}
      <ThemeToggle className="text-2xl cursor-pointer" />

      {/* Select from pre-built themes */}
      <ThemeSelector className="px-4 py-2 rounded-lg border" />
    </header>
  );
}

Programmatic Theme Control

import { useTheme } from "@developwave/ui";

export default function Settings() {
  const { theme, mode, setTheme, setMode, toggleMode } = useTheme();

  return (
    <div>
      <p>Current: {theme} ({mode})</p>

      {/* Change theme */}
      <button onClick={() => setTheme("ocean")}>Ocean Theme</button>
      <button onClick={() => setTheme("purple")}>Purple Theme</button>

      {/* Change mode */}
      <button onClick={() => setMode("dark")}>Dark Mode</button>
      <button onClick={() => setMode("light")}>Light Mode</button>
      <button onClick={toggleMode}>Toggle Mode</button>
    </div>
  );
}

Pre-built Themes

Choose from 4 beautiful pre-built themes:

| Theme | Description | Primary Color | |-------|-------------|---------------| | Default | Classic neutral theme (shadcn/ui inspired) | Gray/Slate | | Ocean | Blue and teal color scheme | Blue/Cyan | | Purple | Modern vibrant purple | Purple/Pink | | Green | Nature-inspired green theme | Green/Emerald |

Custom Themes

Create your own themes in developwave.config.ts:

export const developwaveConfig = {
  defaultTheme: "myCustom",
  defaultMode: "system", // "light", "dark", or "system"

  customThemes: {
    myCustom: {
      name: "myCustom",
      light: {
        background: "0 0% 100%",
        foreground: "222.2 84% 4.9%",
        primary: "340 82% 52%", // Custom pink
        primaryForeground: "0 0% 100%",
        secondary: "240 4.8% 95.9%",
        secondaryForeground: "240 5.9% 10%",
        accent: "240 4.8% 95.9%",
        accentForeground: "240 5.9% 10%",
        muted: "240 4.8% 95.9%",
        mutedForeground: "240 3.8% 46.1%",
        card: "0 0% 100%",
        cardForeground: "222.2 84% 4.9%",
        popover: "0 0% 100%",
        popoverForeground: "222.2 84% 4.9%",
        destructive: "0 84.2% 60.2%",
        destructiveForeground: "0 0% 98%",
        border: "240 5.9% 90%",
        input: "240 5.9% 90%",
        ring: "340 82% 52%",
      },
      dark: {
        background: "222.2 84% 4.9%",
        foreground: "210 40% 98%",
        primary: "340 82% 52%",
        // ... dark mode colors
      },
    },
  },
};

CSS Variable Customization

Modify colors directly in your globals.css:

:root {
  --primary: 199 89% 48%; /* Change primary color */
  --primary-foreground: 0 0% 100%;
  --radius: 0.75rem; /* Change border radius */
}

All colors use HSL format: hue saturation lightness

📚 Component Usage

Import Components

import {
  Button,
  Hero,
  Header,
  Footer,
  Features,
  CTA,
  Pricing,
  Testimonials,
  Card,
  ThemeToggle,
  ThemeSelector
} from "@developwave/ui";

Basic Example

import { Hero, Button, Header, Footer } from "@developwave/ui";

export default function LandingPage() {
  return (
    <>
      <Header
        companyName="My Startup"
        links={[
          { label: "Features", href: "#features" },
          { label: "Pricing", href: "#pricing" },
        ]}
        actions={<Button>Sign Up</Button>}
      />

      <Hero
        variant="centered"
        title="Build amazing products"
        subtitle="🚀 New Release"
        description="Get started in minutes with our component library"
        primaryAction={<Button size="lg">Get Started</Button>}
        secondaryAction={<Button variant="outline" size="lg">Learn More</Button>}
      />

      <Footer
        companyName="My Startup"
        columns={[
          {
            title: "Product",
            links: [
              { label: "Features", href: "#" },
              { label: "Pricing", href: "#" },
            ],
          },
        ]}
      />
    </>
  );
}

🧩 Available Components

UI Components

Button

Versatile button component with multiple variants and sizes.

<Button>Default</Button>
<Button variant="destructive">Delete</Button>
<Button variant="outline" size="lg">Large Outline</Button>
<Button variant="ghost" size="sm">Small Ghost</Button>

Variants: default, destructive, outline, secondary, ghost, link Sizes: default, sm, lg, icon

Card

Flexible card component with composition support.

<Card variant="elevated" hover>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Description</CardDescription>
  </CardHeader>
  <CardContent>Content here</CardContent>
  <CardFooter>Footer content</CardFooter>
</Card>

Variants: default, outlined, elevated, ghost, gradient

Section Components

Hero (6 variants)

Hero sections for landing pages with different layouts.

<Hero
  variant="video"
  title="Build amazing products"
  subtitle="New Release"
  description="Get started in minutes"
  videoUrl="/hero-video.mp4"
  primaryAction={<Button>Get Started</Button>}
  secondaryAction={<Button variant="outline">Learn More</Button>}
/>

Variants:

centered - Centered layout with gradient background
split - Split layout with image and content side by side
video - Full-screen video background (Tesla/SpaceX style)
animated-gradient - Animated gradient with floating particles
glassmorphism - Modern glassmorphism design (iOS/macOS style)
minimal - Minimal left-aligned layout

Individual Components:

HeroCentered, HeroSplit, HeroVideo, HeroAnimatedGradient, HeroGlassmorphism, HeroMinimal

Header (5 variants)

Navigation bars with mobile menu support.

<Header
  variant="floating"
  companyName="Your Company"
  links={[
    { label: "Features", href: "#features" },
    { label: "Pricing", href: "#pricing" },
  ]}
  actions={<Button>Sign Up</Button>}
/>

Variants:

default - Sticky header with backdrop blur
solid - Solid background header
transparent - Transparent header
dark - Dark themed header
floating - Floating header with rounded corners and shadow

Individual Components:

HeaderDefault, HeaderFloating

Footer (6 variants)

Footer components with navigation, social links, and newsletter support.

<Footer
  variant="default"
  companyName="Your Company"
  description="Building amazing products"
  columns={[
    {
      title: "Product",
      links: [
        { label: "Features", href: "#" },
        { label: "Pricing", href: "#" },
      ],
    },
  ]}
  socialLinks={[
    { platform: "Twitter", href: "#", icon: <TwitterIcon /> },
  ]}
/>

Variants:

default - Standard footer with columns
dark - Dark themed footer
minimal - Minimal single-line footer
centered - Centered layout
newsletter - With newsletter signup
wave - With animated wave design

Individual Components:

FooterDefault, FooterMinimal

Features (5 variants)

Feature showcases with different layouts.

<Features
  variant="cards"
  title="Why choose us"
  subtitle="Features"
  features={[
    {
      icon: "⚡",
      title: "Fast",
      description: "Lightning fast performance",
    },
  ]}
/>

Variants: grid, cards, list, alternating, centered

CTA (5 variants)

Call-to-action sections to drive conversions.

<CTA
  variant="split"
  title="Ready to start?"
  description="Join thousands of users today"
  image="/cta-image.jpg"
  primaryAction={<Button size="lg">Get Started</Button>}
  secondaryAction={<Button variant="outline" size="lg">Learn More</Button>}
/>

Variants:

default - Solid primary background
gradient - Gradient background
outlined - Outlined style
minimal - Minimal styling
split - Split layout with image

Individual Components:

CTADefault, CTAGradient, CTASplit

Pricing (5 variants)

Pricing tables for your products.

<Pricing
  variant="cards"
  title="Choose your plan"
  plans={[
    {
      name: "Pro",
      price: "$29",
      period: "month",
      description: "For professionals",
      features: [
        { text: "Unlimited projects", included: true },
        { text: "24/7 support", included: true },
      ],
      action: <Button>Subscribe</Button>,
      popular: true,
      badge: "Most Popular",
    },
  ]}
/>

Variants: default, cards, comparison, featured, minimal

Individual Components:

PricingCards

Testimonials (5 variants)

Customer testimonials and reviews.

<Testimonials
  variant="cards"
  title="What our customers say"
  testimonials={[
    {
      quote: "Amazing product! Highly recommended.",
      author: "John Doe",
      role: "CEO",
      company: "Tech Corp",
      avatar: "/avatar.jpg",
      rating: 5,
    },
  ]}
/>

Variants: default, cards, grid, carousel, minimal

Individual Components:

TestimonialsCards

🛠 Manual Setup Guide

Step 1: Install Dependencies

npm install @developwave/ui class-variance-authority clsx tailwind-merge

Step 2: Configure Tailwind CSS

Update your tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./node_modules/@developwave/ui/dist/**/*.{js,mjs}",
  ],
  theme: {
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "fade-in": {
          "0%": { opacity: "0" },
          "100%": { opacity: "1" },
        },
        "fade-in-up": {
          "0%": { opacity: "0", transform: "translateY(20px)" },
          "100%": { opacity: "1", transform: "translateY(0)" },
        },
        "fade-in-down": {
          "0%": { opacity: "0", transform: "translateY(-20px)" },
          "100%": { opacity: "1", transform: "translateY(0)" },
        },
        "slide-in-left": {
          "0%": { transform: "translateX(-100%)" },
          "100%": { transform: "translateX(0)" },
        },
        "slide-in-right": {
          "0%": { transform: "translateX(100%)" },
          "100%": { transform: "translateX(0)" },
        },
        float: {
          "0%, 100%": { transform: "translateY(0)" },
          "50%": { transform: "translateY(-20px)" },
        },
        gradient: {
          "0%, 100%": { backgroundPosition: "0% 50%" },
          "50%": { backgroundPosition: "100% 50%" },
        },
      },
      animation: {
        "fade-in": "fade-in 0.5s ease-out",
        "fade-in-up": "fade-in-up 0.6s ease-out",
        "fade-in-down": "fade-in-down 0.6s ease-out",
        "slide-in-left": "slide-in-left 0.5s ease-out",
        "slide-in-right": "slide-in-right 0.5s ease-out",
        float: "float 3s ease-in-out infinite",
        gradient: "gradient 15s ease infinite",
      },
    },
  },
  plugins: [],
};

Step 3: Add CSS Variables

Add to your app/globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
  }
}

@layer base {
  * {
    border-color: hsl(var(--border));
  }
  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
  }
}

/* Glassmorphism utility */
.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

📖 Learn More

TypeScript Support: All components are fully typed
Accessibility: Components follow WAI-ARIA guidelines
Responsive: Mobile-first design with responsive variants
Customizable: Use Tailwind classes or modify component source

🤝 Contributing

Contributions are welcome! Feel free to open issues or submit pull requests.

📄 License

MIT License - feel free to use this in your projects!

🎓 Next Steps

Ready to build your component showcase? Here are some recommendations:

Option 1: Storybook (Most Popular)

Pros: Industry standard, great documentation, component playground
Setup: npx storybook@latest init
Best for: Large libraries, team collaboration

Option 2: Next.js Showcase Site

Pros: Full control, can show components in real context, easier deployment
Setup: Create /app/showcase/page.tsx with component examples
Best for: Simple showcases, integrated documentation

Option 3: Docusaurus

Pros: Great for documentation-heavy projects, MDX support
Setup: npx create-docusaurus@latest
Best for: Comprehensive documentation + component showcase

Recommendation: Start with a Next.js showcase page, then migrate to Storybook if needed.

Made with ❤️ by Developwave

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Developwave UI

✨ Features

🚀 Quick Start

Option 1: Create a New Project (Recommended)

Option 2: Add to Existing Next.js Project

📦 Installation (Manual)

🎯 CLI Commands

create - Create New Project

init - Initialize in Existing Project

add - Add Individual Components

🎨 Theme System

Using Theme Components

Programmatic Theme Control

Pre-built Themes

Custom Themes

CSS Variable Customization

📚 Component Usage

Import Components

Basic Example

🧩 Available Components

UI Components

Button

Card

Section Components

Hero (6 variants)

Header (5 variants)

Footer (6 variants)

Features (5 variants)

CTA (5 variants)

Pricing (5 variants)

Testimonials (5 variants)

🛠 Manual Setup Guide

Step 1: Install Dependencies

Step 2: Configure Tailwind CSS

Step 3: Add CSS Variables

📖 Learn More

🤝 Contributing

📄 License

🎓 Next Steps

Option 1: Storybook (Most Popular)

Option 2: Next.js Showcase Site

Option 3: Docusaurus

`create` - Create New Project

`init` - Initialize in Existing Project

`add` - Add Individual Components