the-better-ui

BetterUI — Premium React Component Library

the-better-ui is a design-centric, high-fidelity React component library crafted in pure monochrome styles. Designed with responsive grids, precise transitions, coordinate mouse trackers, and interactive animations using Tailwind CSS.

Installation

Install the library and its peer dependencies via npm:

npm install the-better-ui lucide-react

Configuration

To align the aesthetics, ensure your application supports Tailwind CSS and define the following design system variables in your root stylesheet (e.g., globals.css):

@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #09090b;
  --primary: #09090b;
  --primary-foreground: #ffffff;
  --secondary: #f4f4f5;
  --secondary-foreground: #09090b;
  --border: #e4e4e7;
  --muted: #71717a;
}

.dark {
  --background: #030303;
  --foreground: #f4f4f5;
  --primary: #ffffff;
  --primary-foreground: #09090b;
  --secondary: #121214;
  --secondary-foreground: #f4f4f5;
  --border: #1f1f23;
  --muted: #a1a1aa;
}

@theme {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-border: var(--border);
  --color-muted: var(--muted);
}

/* Responsive UI grids helper patterns */
.grid-bg-subtle {
  background-size: 30px 30px;
  background-image: 
    linear-gradient(to right, var(--border) 0.5px, transparent 0.5px),
    linear-gradient(to bottom, var(--border) 0.5px, transparent 0.5px);
}

.dot-bg-subtle {
  background-size: 20px 20px;
  background-image: radial-gradient(var(--border) 0.8px, transparent 0.8px);
}

Component Usage Examples

1. Buttons

import { GlowBorderButton, ShimmerButton, RadialGlowButton } from 'the-better-ui';

export default function ButtonDemo() {
  return (
    <div className="flex gap-4 p-6 bg-background">
      {/* Glow Border Button */}
      <GlowBorderButton gradient="from-violet-500 via-rose-500 to-amber-500">
        Glow Border
      </GlowBorderButton>

      {/* Shimmer Slide Button */}
      <ShimmerButton>
        Shimmer Slide
      </ShimmerButton>

      {/* Radial Hover Tracking Glow Button */}
      <RadialGlowButton glowColor="rgba(120, 119, 198, 0.15)">
        Interactive Glow
      </RadialGlowButton>
    </div>
  );
}

2. Cards

import { SpotlightCard, GlowBorderCard, RetroGridCard } from 'the-better-ui';

export default function CardDemo() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6 p-6">
      {/* Mouse Tracking Spotlight Card */}
      <SpotlightCard spotlightColor="rgba(255, 255, 255, 0.05)" borderColor="rgba(255, 255, 255, 0.15)">
        <h3 className="font-bold">Spotlight Dynamics</h3>
        <p className="text-xs text-muted">A radial spotlight tracking the mouse coordinates on hover.</p>
      </SpotlightCard>

      {/* Glow Border Card */}
      <GlowBorderCard gradient="from-violet-500 via-rose-500 to-amber-500">
        <h3 className="font-bold">Radiating Envelope</h3>
        <p className="text-xs text-muted">Gradient border with a backing ambient glow overlay.</p>
      </GlowBorderCard>

      {/* Cyberpunk Grid Tech Card */}
      <RetroGridCard title="SEC//ENCRYPTION" category="SYS//NODE" statusText="ACTIVE" statusColor="blue">
        <p className="text-xs text-muted">Aggregates CSS alignment vectors with a neon coordinate indicator.</p>
      </RetroGridCard>
    </div>
  );
}

3. Hero Sections

import { AmbientGlowHero, RetroTechHero } from 'the-better-ui';

export default function HeroDemo() {
  return (
    <div className="space-y-12 bg-background p-6">
      <AmbientGlowHero />
      <RetroTechHero />
    </div>
  );
}

4. Navigation Headers

import { BlurredGlassNavbar, FloatingIslandNavbar } from 'the-better-ui';

export default function NavbarDemo() {
  return (
    <div className="space-y-6 bg-background p-6">
      <BlurredGlassNavbar />
      <FloatingIslandNavbar />
    </div>
  );
}

5. Footers

import { StructuredModernFooter, MinimalistTechFooter } from 'the-better-ui';

export default function FooterDemo() {
  return (
    <div className="space-y-6 bg-background p-6">
      <StructuredModernFooter />
      <MinimalistTechFooter />
    </div>
  );
}

6. Carousels

import { InteractiveSlideCarousel, GlassCardsCarousel } from 'the-better-ui';

export default function CarouselDemo() {
  return (
    <div className="space-y-8 bg-background p-6">
      <InteractiveSlideCarousel />
      <GlassCardsCarousel />
    </div>
  );
}

7. Sliders & Inputs

import { InteractiveRangeSlider, BeforeAfterImageSlider } from 'the-better-ui';

export default function SliderDemo() {
  return (
    <div className="space-y-8 bg-background p-6">
      <InteractiveRangeSlider />
      <BeforeAfterImageSlider />
    </div>
  );
}