Introduction

What is Elixir UI?

Elixir UI is a modern component collection that focuses on:

• Full Code Ownership - You get the complete source code for every component
• Modern Tech Stack - Built with React, TypeScript, and Tailwind CSS
• Copy & Paste - No npm packages, just copy the code and customize
• 3D & Interactive - Advanced components with Three.js integration
• Responsive Design - Mobile-first approach with beautiful animations

Available Components

Our collection includes 10+ carefully crafted components, each designed with modern web standards and beautiful animations.

Quick Start

Getting started with Elixir UI is simple:

Example Usage

Here are some practical examples of how to use Elixir UI components:

Sidemenu Component

import Sidemenu from "@/components/elixir-ui/sidemenu";

const links = [
  { title: "Home", href: "/" },
  { title: "About", href: "/about" },
  { title: "Contact", href: "/contact" },
];

const footerLinks = [
  { title: "GitHub", href: "https://github.com" },
  { title: "Twitter", href: "https://twitter.com" },
];

export default function MyApp() {
  return (
    <Sidemenu
      cardColor="#FF6B6B"
      cardImageURL="/background.jpg"
      links={links}
      footerLinks={footerLinks}
      imageOpacity={0.8}
      imageSaturation={1.2}
    />
  );
}

LiquidFrame Component

import LiquidFrame from "@/components/elixir-ui/liquid-frame";

export default function ImageGallery() {
  return (
    <LiquidFrame
      src="/images/hero.jpg"
      alt="Hero image with water effect"
      width={400}
      height={300}
      variant="default"
      className="rounded-lg shadow-lg"
    />
  );
}

Showcase Component

import { Showcase } from "@/components/elixir-ui/showcase";

export default function ProductShowcase() {
  return (
    <Showcase
      imageSrc="/products/featured.jpg"
      text="Featured Product"
      fontSize="48px"
      textColor="#FFFFFF"
      rotationSpeed={0.01}
      bloomIntensity={2.5}
      enableControls={true}
      className="w-full h-96"
    />
  );
}

NavigationalCard Component

import NavigationalCard from "@/components/elixir-ui/navigational-card";
import { ArrowRightIcon, BookOpenIcon } from "lucide-react";

export default function NavigationGrid() {
    return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
      <NavigationalCard
        title="Documentation"
        description="Learn how to use our components"
        icon={<BookOpenIcon className="h-6 w-6" />}
        href="/docs"
      />
      <NavigationalCard
        title="Components"
        description="Browse our component library"
        icon={<ArrowRightIcon className="h-6 w-6" />}
        href="/components"
            />
        </div>
  );
}

Features

Prerequisites

To use Elixir UI components, you'll need:

• React 18+ or Next.js 13+
• TypeScript (recommended)
• Tailwind CSS
• Lucide React (for icons)

Getting Help

• 📖 Documentation - Comprehensive guides for each component
• 💬 GitHub Issues - Report bugs or request features
• 🎨 Examples - Live previews and code examples
• 🔧 Customization - Tips for adapting components to your needs

Component Showcase

Here are some examples of our components in action:

Ready to Get Started?