Helix UI 🐌

Helix UI

Tech • Open Source • Future • Flat

A configurable, flexible, and dependency-free React UI library.

---

✨ Features

• 🐌 Iconic Design: Inspired by the helix structure and the persistence of a snail.
• 🎨 Flat & Futuristic: Clean lines, modern gradients, and a tech-forward aesthetic.
• 🛠 Fully Configurable: Built on CSS Variables for real-time theming.
• ⚡ Lightweight: Zero styling dependencies. Pure CSS/TS.
• 🚀 React + TypeScript: Type-safe and developer-friendly.

📦 Installation

npm install helix-ui
# or
yarn add helix-ui

(Note: This is a demo project, not yet published to npm)

🔨 Usage

Theme Configuration

Helix UI uses CSS variables for theming. You can override these in your :root or any parent container:

:root {
  --helix-primary: #3b82f6; /* Cyan-Blue */
  --helix-secondary: #8b5cf6; /* Purple */
  --helix-radius: 8px; /* Rounded corners */
  --helix-bg: #111827; /* Dark mode bg */
}

Components

Button

import { Button } from './lib/components/Button/Button';

function App() {
  return (
    <>
      <Button variant="primary">Launch</Button>
      <Button variant="outline">Settings</Button>
      <Button variant="ghost" size="sm">Cancel</Button>
    </>
  );
}

🏗 Development

1. Clone the repository.
2. Install dependencies:

   npm install

3. Start the dev server:

   npm run dev

📜 License

MIT © [Helix Team]