Aura UI Library 🌌

A premium React UI component library designed for the next generation of digital interfaces. Build award-winning websites with cinematic GSAP animations, "Quiet Luxury" aesthetics, and a powerful Zero-Config design system.

🎬 Component Demo

See how Aura UI components render and animate in a live test app:

If your Markdown viewer does not support embedded video, use this direct link: Watch the component demo video

✨ Features

• Award-Winning Motion: Physics-based animations powered by GSAP and ScrollTrigger.
• Dual-Theme Engine: Native Light/Dark mode support for all components.
• Zero-Dependency Styles: No Tailwind, SASS, or CSS modules required. Pure, high-performance inline styles.
• Developer First: Fully customizable via style passthrough and typed props.
• Responsive Mastery: Fluid layouts that adapt beautifully from mobile to ultra-wide displays.

🚀 Installation

npm install aura-ui-library

Peer Dependencies

Ensure you have the following installed in your React project:

npm install react react-dom gsap framer-motion react-icons react-router-dom

🛠️ Components & Customization

Aura UI components are built to be flexible. Every component supports a theme, accentColor, and a style block.

| Component | Purpose | Key Props | | :--------------------- | :--------------------------------- | :------------------------------------------------------------------------------ | | AuraLogin | Premium interactive auth screens | title, subtitle, theme, accentColor, onSubmit | | AuraRegister | Premium interactive registration | title, subtitle, theme, accentColor, onSubmit | | Hero | High-impact landing sections | title, subtitle, image, layout ("split"/"overlay"), align | | Navbar | Cinematic navigation bars | logoText, links (supports dropdowns), theme, accentColor | | Button | Magnetic interactive triggers | children, variant ("primary"/"secondary"/"outline"/"glass"), size, icon | | Grid | Bento-style layout system | items, columns, gap, theme | | ProjectShowCase | Vertical timeline galleries | projects, accentColor, theme | | Testimonials | Premium feedback sections | items, theme, accentColor | | Canvas | Interactive 3D particle mesh | particleCount, interactive, theme, accentColor | | Carousel | Fluid content sliders | items, theme, animationDuration | | Spotlight | Interactive reveal cards | title, description, image, theme | | ParallaxImage | Hero sections with scroll depth | title, subtitle, image, height | | TextWriting | Scrambling/Typing animations | texts, speed, delay, accentColor | | SideBar | Interactive side navigation | links, logo, collapsedWidth, theme | | Skills | Data-driven progress reveals | skills, accentColor, theme | | PinterestGrid | Modern masonry layouts | items, columns, gap, theme | | TextImage | Interwoven text and image segments | segments, fontSize, theme | | HorizontalScroll | Lateral gallery sections | items, accentColor, theme | | SVGPathAnimation | Path-drawing on scroll | path, title, subtitle, theme | | CanvasReveal | Expanding dot grid interaction | dotColor, dotSize, hoverRadius, hoverMultiplier | | SvgMaskEffect | X-ray hover reveal masks | baseContent, revealContent, maskSize | | MacAnimation | Interactive 3D Apple lid open | content, theme | | SlideLogo | Infinite wave-animated logo grids | logos, interval |

🎨 Global Customization

1. Theme Support

Toggle between "dark" and "light" moods instantly. Components automatically adjust backgrounds, text contrast, and glassmorphism levels.

<Navbar theme="light" />
<Hero theme="dark" />

2. Style Passthrough

Inject custom CSS directly into any component's root element. Perfect for margin adjustments, z-index control, or custom background overrides.

<Grid
  style={{
    marginTop: "100px",
    border: "2px solid #ef4444",
  }}
/>

3. Accent Color System

Control the "DNA" of the component. The accentColor prop influences icons, highlights, shadows, and hover states.

<Button accentColor="#10b981">Green Vibe</Button>
<Button accentColor="#f43f5e">Rose Vibe</Button>

🏮 Quick Start Example

import { Navbar, Hero, Grid, Button } from "aura-ui-library";

const navLinks = [
  { label: "Design", path: "/design" },
  {
    label: "Systems",
    path: "/systems",
    children: [
      { label: "React", path: "/react" },
      { label: "GSAP", path: "/gsap" },
    ],
  },
];

export default function App() {
  return (
    <div style={{ backgroundColor: "#000" }}>
      <Navbar
        logoText="AURA"
        links={navLinks}
        theme="dark"
        accentColor="#6366f1"
      />

      <Hero
        title="Cinematic Interfaces"
        subtitle="The world's most sophisticated React component library for high-end luxury brands."
        layout="split"
        theme="dark"
        accentColor="#6366f1"
      />

      <Grid
        theme="dark"
        columns="repeat(3, 1fr)"
        items={[
          {
            title: "Fluidity",
            description: "120 FPS Rendering",
            color: "#f43f5e",
          },
          {
            title: "Elegance",
            description: "Quiet Luxury Aesthetic",
            color: "#fb7185",
          },
          {
            title: "Precision",
            description: "Pixel Perfect Design",
            color: "#6366f1",
          },
        ]}
      />
    </div>
  );
}

📈 Performance Tip

Aura UI uses will-change and hardware-accelerated transforms. To keep your site running at maximum speed:

• Avoid nesting large Canvas or Hero components inside complex containers.
• Use the theme prop instead of manually overriding every color via style.

📜 License

ISC © RitikWeb22