Gen UI

gen-ui-lib-v1 is a React component library focused on ready-to-use UI blocks for dashboards, landing pages, forms, media, commerce, and feedback flows. The package ships pre-styled components with inline styles, so you can install it and start rendering components without adding a separate CSS file.

Why Use Gen UI

• Plug-and-play React components
• No external stylesheet import required
• Good starter set for dashboards, SaaS pages, and product UIs
• Customizable through props such as accent, bg, radius, labels, content, and callbacks
• Includes both simple primitives and larger opinionated UI sections

Installation

npm install gen-ui-lib-v1

react@>=18 is required as a peer dependency.

Quick Start

import {
  Navbar,
  PricingCard,
  OTPInput,
  NotificationToast,
  Footer,
} from "gen-ui-lib-v1";

export default function App() {
  return (
    <div style={{ background: "#020617", minHeight: "100vh" }}>
      <Navbar
        logo="Gen UI"
        links={["Home", "Components", "Pricing", "Docs"]}
        ctaText="Get Started"
      />

      <main style={{ padding: "40px 20px", display: "grid", gap: 24 }}>
        <PricingCard
          planName="Starter"
          price={19}
          features={["Unlimited projects", "Email support", "Team access"]}
        />

        <OTPInput
          length={6}
          onComplete={(code) => console.log("OTP:", code)}
        />

        <NotificationToast
          title="Saved"
          message="Your changes have been stored."
          type="success"
        />
      </main>

      <Footer logo="Gen UI" />
    </div>
  );
}

Package Notes

• Components are exported from a single entry point: gen-ui-lib-v1
• Styling is included inside each component using inline styles or embedded <style> tags
• No CSS import is needed
• Most components are interactive and intended for client-side React apps
• One export is currently spelled BackgoundImageSlider in the package API, so the README uses that exact export name

Exported Components

Navigation and Layout

• Navbar
• Sidebar
• Footer
• PageLoader

Buttons and Basic UI

• Button
• AnimatedButton
• Card
• Loader
• ProgressBar

Forms and Inputs

• AnimatedForm
• OTPInput
• FileUpload
• ColorPicker
• RatingStars

Media and Content

• ImageCard
• ImageSlider
• BackgoundImageSlider
• ReviewCard

Business and Data UI

• AvatarCard
• PricingCard
• InvoiceCard
• Charts
• StatCard
• EcommerceCard
• NotificationToast

Usage Examples

Import a few components

import { Button, Card, Loader, StatCard } from "gen-ui-lib-v1";

Render a dashboard card

<StatCard
  title="Monthly Revenue"
  value="$82K"
  numericValue={82000}
  change="+18.2%"
  isPositive={true}
  accent="#2563eb"
/>

Render a product card

<EcommerceCard
  title="Wireless Headphones"
  price={199}
  onAddToCart={() => console.log("Added")}
  onViewDetails={() => console.log("View details")}
/>

Render a full-width hero slider

import { BackgoundImageSlider } from "gen-ui-lib-v1";

<BackgoundImageSlider
  autoPlay
  autoPlayInterval={5000}
  images={[
    {
      src: "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?w=1400&q=80",
      tag: "Nature",
      title: "Explore the Outdoors",
      description: "Large-format background slider for hero sections.",
    },
  ]}
/>;

Component Reference

Navbar

Responsive top navigation with desktop and mobile states.

| Prop | Type | Default | | --- | --- | --- | | logo | string | "GenUI" | | links | string[] | ["Home", "Features", "Pricing", "Blog"] | | ctaText | string | "Get Started" | | accent | string | "#6366f1" | | bg | string | "#0f172a" | | onCtaClick | () => void | noop | | onLinkClick | (link: string) => void | noop |

Sidebar

Collapsible sidebar that renders the selected item's component content panel.

| Prop | Type | Default | | --- | --- | --- | | logo | string | "GenUI" | | accent | string | "#6366f1" | | bg | string | "#0f172a" | | items | Array<{ label, icon, component }> | built-in demo items |

Footer

Centered footer with logo, links, and copyright text.

| Prop | Type | Default | | --- | --- | --- | | logo | string | "GenUI" | | links | string[] | ["Home", "Features", "Pricing", "Blog", "Contact"] | | copyright | string | "GenUI" | | accent | string | "#6366f1" | | bg | string | "#0f172a" |

PageLoader

Full-page loading screen with progress animation.

| Prop | Type | Default | | --- | --- | --- | | logo | string | "GenUI" | | accent | string | "#6366f1" | | bg | string | "" | | type | "spinner" \| "dots" \| "pulse" \| "ring" \| "bar" | "spinner" | | loadingText | string | "Loading..." | | subText | string | "" | | duration | number | 6000 | | onComplete | () => void | noop |

Button

General-purpose button with variants, sizes, optional icon, and loading state.

| Prop | Type | Default | | --- | --- | --- | | text | string | "Click Me" | | variant | "primary" \| "outline" \| "ghost" \| "gradient" | "gradient" | | size | "sm" \| "md" \| "lg" | "md" | | icon | ReactNode | undefined | | loading | boolean | false | | disabled | boolean | false | | onClick | () => void | undefined |

AnimatedButton

Simple animated CTA button.

| Prop | Type | Default | | --- | --- | --- | | text | string | "Click Me!" | | bg | string | "#7c3aed" | | color | string | "white" | | size | "sm" \| "md" \| "lg" | "md" | | width | string | "auto" | | radius | string | "12px" | | border | string | "none" | | weight | string | "600" | | shadow | string | "0 4px 14px rgba(124,58,237,0.4)" | | onClick | () => void | undefined |

Card

Minimal white dashboard card with icon, tag, and hover motion.

| Prop | Type | Default | | --- | --- | --- | | title | string | "Performance" | | description | string | demo text | | icon | string | lightning-style icon | | tag | string | "Active" | | onClick | () => void | undefined |

Loader

Inline loader for local loading states.

| Prop | Type | Default | | --- | --- | --- | | type | "spinner" \| "pulse" \| "dots" \| "bar" \| "ring" | "spinner" | | size | number | 48 | | accent | string | "#6366f1" | | bg | string | "transparent" | | label | string | "" | | speed | number | 1 |

ProgressBar

Animated progress component with multiple display modes.

| Prop | Type | Default | | --- | --- | --- | | label | string | "Progress" | | percentage | number | 75 | | accent | string | "#6366f1" | | bg | string | "#ffffff" | | height | number | 12 | | showLabel | boolean | true | | showPercent | boolean | true | | type | "default" \| "striped" \| "circular" \| "gradient" \| "steps" | "default" | | steps | number | 5 |

AnimatedForm

Contact-style form card that returns { name, email, message } on submit.

| Prop | Type | Default | | --- | --- | --- | | title | string | "Contact Us" | | description | string | "We'll get back to you shortly" | | submitText | string | "Send Message" | | accent | string | "#6366f1" | | bg | string | "#0f172a" | | onSubmit | (values) => void | noop |

OTPInput

Multi-field OTP input with paste support, countdown-based resend, and completion callback.

| Prop | Type | Default | | --- | --- | --- | | length | number | 6 | | onComplete | (code: string) => void | noop | | onCancel | () => void | noop | | accent | string | "#6366f1" | | bg | string | "#0f172a" | | radius | string | "16px" | | label | string | "Enter verification code" | | subLabel | string | "We sent a code to your email" | | errorText | string | "" | | resendText | string | "Resend code" | | onResend | () => void | noop |

FileUpload

Drag-and-drop uploader UI with mock progress simulation.

| Prop | Type | Default | | --- | --- | --- | | accept | string | "*" | | multiple | boolean | true | | maxSizeMB | number | 5 | | accent | string | "#6366f1" | | bg | string | "#0f172a" | | radius | string | "16px" | | label | string | "Drop files here or click to upload" | | subLabel | string | "Supports any file up to" | | onUpload | (id: string) => void | noop |

Note: this component simulates upload progress locally. You can use onUpload to connect it to your own backend flow.

ColorPicker

Color picker with swatches, opacity control, editable hex input, and RGBA output.

| Prop | Type | Default | | --- | --- | --- | | defaultColor | string | "#6366f1" | | showOpacity | boolean | true | | showEyedropper | boolean | true | | showInput | boolean | true | | accent | string | "#6366f1" | | bg | string | "#0f172a" | | radius | string | "16px" | | onChange | (color) => void | noop | | swatches | string[] | built-in palette |

Note: showEyedropper exists in the current props but is not used by the implementation yet.

RatingStars

Interactive rating control with half-star support.

| Prop | Type | Default | | --- | --- | --- | | defaultRating | number | 0 | | total | number | 5 | | size | number | 32 | | allowHalf | boolean | true | | showLabel | boolean | true | | showCount | boolean | true | | reviewCount | number | 0 | | readOnly | boolean | false | | accent | string | "#f59e0b" | | bg | string | "#0f172a" | | radius | string | "14px" | | onChange | (value: number) => void | noop |

ImageCard

Media card with image, tag, content, and CTA.

| Prop | Type | Default | | --- | --- | --- | | image | string | demo image | | tag | string | "Travel" | | title | string | demo title | | description | string | demo description | | buttonText | string | "Read More" | | accent | string | "#6366f1" | | bg | string | "#0f172a" | | radius | string | "20px" | | onButtonClick | () => void | noop |

ImageSlider

Card-sized image carousel with arrows, optional caption, and pagination dots.

| Prop | Type | Default | | --- | --- | --- | | images | Array<{ src, title, tag }> | built-in demo images | | accent | string | "#6366f1" | | bg | string | "#0f172a" | | radius | string | "20px" | | showDots | boolean | true | | showCaption | boolean | true | | autoPlay | boolean | false |

Note: autoPlay is exposed but not currently wired into the implementation.

BackgoundImageSlider

Full-width background slider for hero sections.

| Prop | Type | Default | | --- | --- | --- | | images | Array<{ src, tag, title, description }> | built-in demo slides | | width | string | "100%" | | height | string | "520px" | | accent | string | "#6366f1" | | radius | string | "0px" | | showDots | boolean | true | | autoPlay | boolean | false | | autoPlayInterval | number | 4000 |

ReviewCard

Compact customer review card with avatar, rating, review text, and date.

| Prop | Type | Default | | --- | --- | --- | | avatar | string | demo avatar | | name | string | "John Doe" | | rating | number | 4 | | review | string | demo review | | date | string | "2 days ago" | | accent | string | "#6366f1" | | bg | string | "#0f172a" | | onProfileClick | () => void | noop |

AvatarCard

Profile-style card for users, team members, or creators.

| Prop | Type | Default | | --- | --- | --- | | name | string | "Aryan Sharma" | | role | string | "Frontend Developer" | | followers | number | 2400 | | following | number | 180 | | projects | number | 34 | | bio | string | demo bio | | avatar | string | "" | | accent | string | "#6366f1" | | bg | string | "#0f172a" | | radius | string | "20px" |

PricingCard

Pricing plan card with feature list and CTA.

| Prop | Type | Default | | --- | --- | --- | | planName | string | "Pro Plan" | | description | string | demo text | | price | number | 29 | | currency | string | "$" | | period | string | "per month" | | badgeText | string | "Most Popular" | | ctaText | string | "Get Started" | | accent | string | "#6366f1" | | bg | string | "#0f172a" | | radius | string | "20px" | | features | string[] | built-in feature list | | onCtaClick | () => void | noop |

InvoiceCard

Invoice summary card with line items, status, totals, and action buttons.

| Prop | Type | Default | | --- | --- | --- | | invoiceNumber | string | "INV-2024-001" | | date | string | "21 March 2024" | | dueDate | string | "31 March 2024" | | from | object | built-in sender | | to | object | built-in recipient | | items | Array<{ name, qty, price }> | built-in line items | | taxRate | number | 18 | | currency | string | "$" | | accent | string | "#6366f1" | | bg | string | "#0f172a" | | radius | string | "20px" | | status | "paid" \| "unpaid" \| "pending" | "unpaid" | | onPayClick | () => void | noop | | onDownloadClick | () => void | noop |

Charts

SVG chart component supporting bar, line, pie, and area modes.

| Prop | Type | Default | | --- | --- | --- | | type | "bar" \| "line" \| "pie" \| "area" | "bar" | | data | Array<{ label, value }> | built-in monthly data | | title | string | "Monthly Stats" | | accent | string | "#6366f1" | | bg | string | "#0f172a" | | radius | string | "16px" | | showGrid | boolean | true | | showValues | boolean | true |

StatCard

Animated analytics card with intersection-triggered count-up effect.

| Prop | Type | Default | | --- | --- | --- | | title | string | "Active Users" | | value | string | "128K" | | numericValue | number | 128000 | | change | string | "+12.4%" | | isPositive | boolean | true | | icon | string | user/team-style icon | | bg | string | "#ffffff" | | accent | string | "#3b82f6" | | radius | string | "16px" | | showBadge | boolean | true | | showIcon | boolean | true | | barPercent | number | 68 |

Note: the animated displayed metric is driven by numericValue. The value prop exists in the current API but is not the primary rendered source.

EcommerceCard

Product card with purchase and details actions.

| Prop | Type | Default | | --- | --- | --- | | image | string | demo image | | title | string | "Wireless Headphones" | | description | string | demo description | | price | number | 199 | | currency | string | "$" | | accent | string | "#6366f1" | | bg | string | "#0f172a" | | onAddToCart | () => void | noop | | onViewDetails | () => void | noop |

NotificationToast

Dismissible toast with title, icon state, and optional countdown progress bar.

| Prop | Type | Default | | --- | --- | --- | | title | string | "New Message" | | message | string | demo text | | type | "success" \| "error" \| "warning" \| "info" | "success" | | duration | number | 3000 | | accent | string | "#6366f1" | | bg | string | "#0f172a" | | radius | string | "14px" | | showProgress | boolean | true |

Note: auto-dismiss behavior is tied to the progress timer. If showProgress is false, the toast remains visible until manually closed.

Recommended Use Cases

• Admin dashboards
• SaaS landing pages
• Product cards and pricing sections
• Upload, verification, and feedback flows
• Marketing hero sections and media blocks

Limitations

• The library currently ships JavaScript components only and does not expose TypeScript declaration files
• Some components use browser APIs such as window, document, navigator, or IntersectionObserver
• A few props exist but are not fully implemented yet, such as ImageSlider.autoPlay and ColorPicker.showEyedropper
• The export name BackgoundImageSlider is intentionally documented with its current package spelling

Development

From the package directory:

npm install
npm run build

The build is powered by tsup.

License

ISC