Component Library

Complete reference with code examples for all 30+ Indie Neon UI components. Interactive color system with 2,500+ variations available above.

Installation

Get started with Indie Neon UI in your project

CDN (Recommended)

HTML
<!-- Single file includes CSS --> <script src="https://unpkg.com/indie-neon-ui@latest/dist/indie-neon-ui.cdn.js"></script>

Separate Files

HTML
<!-- In your <head> --> <link rel="stylesheet" href="https://unpkg.com/indie-neon-ui@latest/dist/indie-neon-ui.min.css"> <!-- Before closing </body> --> <script src="https://unpkg.com/indie-neon-ui@latest/dist/indie-neon-ui.min.js"></script>

Basic Usage

Start using components immediately after installation

All components work out of the box with semantic HTML and predefined CSS classes. Interactive components automatically initialize when the page loads.

JavaScript
// Initialize Indie Neon UI IndieNeon.init(); // Show toast notification IndieNeon.toast("Welcome!", {tone: "good"}); // Configure custom actions IndieNeon.configure({ actions: { "my-action": () => alert("Custom action!") } });

Components Overview

30+ beautifully crafted components with neon-inspired design

30+
Components
2,500+
Color Variations
0
Dependencies
92.5KB
Minified Size

Buttons

Beautiful button components with neon glow effects in multiple sizes and styles

Primary Buttons

HTML
<button class="btn large">Large Button</button> <button class="btn">Default Button</button> <button class="btn small">Small Button</button> <button class="btn" disabled>Disabled</button>

Ghost Buttons

HTML
<button class="btn large ghost">Large Ghost</button> <button class="btn ghost">Default Ghost</button> <button class="btn small ghost">Small Ghost</button>
Class Description
.btn Base button class (required)
.large Large size variant
.small Small size variant
.ghost Transparent background style

Button Groups

Connected buttons for segmented controls

HTML
<div class="button-group"> <button class="btn">Left</button> <button class="btn">Center</button> <button class="btn">Right</button> </div>

Forms

Beautiful form controls with neon styling and focus states

Text Inputs

HTML
<div class="form-group"> <label for="name">Name</label> <input type="text" id="name" placeholder="Enter your name"> </div>

Textarea

HTML
<div class="form-group"> <label for="message">Message</label> <textarea id="message" rows="4" placeholder="Your message..."></textarea> </div>

Checkbox & Radio


HTML
<div class="checkbox-group"> <input type="checkbox" id="agree" checked> <label for="agree">I agree to the terms</label> </div> <div class="radio-group"> <input type="radio" id="free" name="plan" checked> <label for="free">Free Plan</label> </div>

Toggle Switch

HTML
<div class="switch-group"> <input type="checkbox" id="toggle" class="switch" checked> <label for="toggle">Enable notifications</label> </div>

Cards

Flexible content containers with neon borders

Card Title

This is a card component with neon border effects. Perfect for displaying content in a structured way.

HTML
<div class="card"> <h3>Card Title</h3> <p>Card content goes here...</p> <button class="btn">Learn More</button> </div>

Modals

Overlay dialogs with backdrop

HTML
<!-- Trigger --> <button class="btn" onclick="document.getElementById('myModal').setAttribute('aria-hidden', 'false')"> Open Modal </button> <!-- Modal --> <div id="myModal" class="modal" aria-hidden="true"> <div class="backdrop"></div> <div class="dialog"> <header> <h2>Modal Title</h2> <button class="icon-btn" onclick="document.getElementById('myModal').setAttribute('aria-hidden', 'true')" aria-label="Close">×</button> </header> <div class="content"> <p>Modal content here...</p> </div> <footer> <button class="btn ghost">Cancel</button> <button class="btn">Confirm</button> </footer> </div> </div>

Tabs

Organize content in tabbed interfaces

Content for Tab 1
Content for Tab 2
Content for Tab 3
HTML
<div class="tabs"> <div class="tab-nav" role="tablist"> <button class="tab active" role="tab">Tab 1</button> <button class="tab" role="tab">Tab 2</button> <button class="tab" role="tab">Tab 3</button> </div> <div class="tab-panels"> <div class="tab-panel active">Content 1</div> <div class="tab-panel">Content 2</div> <div class="tab-panel">Content 3</div> </div> </div>

Accordion

Collapsible content panels

Content for section 1

Content for section 2

HTML
<div class="accordion"> <div class="accordion-item"> <button class="accordion-header"> <span>Section 1</span> <svg class="accordion-icon">...</svg> </button> <div class="accordion-content"> <p>Content here...</p> </div> </div> </div>

Pagination

Navigate through pages of content

HTML
<div class="pagination"> <button class="pagination-btn" disabled>&lt;</button> <button class="pagination-btn active">1</button> <button class="pagination-btn">2</button> <button class="pagination-btn">3</button> <span class="pagination-ellipsis">...</span> <button class="pagination-btn">10</button> <button class="pagination-btn">&gt;</button> </div>

Table

Styled data tables with neon accents

Name Status Role
John Doe Active Admin
Jane Smith Pending User
HTML
<table class="table"> <thead> <tr> <th>Name</th> <th>Status</th> <th>Role</th> </tr> </thead> <tbody> <tr> <td>John Doe</td> <td><span class="badge success">Active</span></td> <td>Admin</td> </tr> </tbody> </table>

Badges

Small status indicators and labels

Default Success Warning Error Neutral Outline
HTML
<span class="badge">Default</span> <span class="badge success">Success</span> <span class="badge warning">Warning</span> <span class="badge error">Error</span> <span class="badge neutral">Neutral</span> <span class="badge outline">Outline</span>

Alerts

Contextual feedback messages

Success! Your changes have been saved.
Warning! Please review before continuing.
Error! Something went wrong.
HTML
<div class="alert success"> <strong>Success!</strong> Your changes have been saved. </div> <div class="alert warning"> <strong>Warning!</strong> Please review before continuing. </div> <div class="alert error"> <strong>Error!</strong> Something went wrong. </div>

Stats Cards

Display key metrics and statistics

2,547
Active Users
+12%
HTML
<div class="stats-grid"> <div class="stat-card"> <div class="stat-icon">...</div> <div class="stat-content"> <div class="stat-value">2,547</div> <div class="stat-label">Active Users</div> <div class="stat-trend positive">+12%</div> </div> </div> </div>

Progress Indicators

Show progress and loading states

Progress Bar

HTML
<div class="progress"> <div class="progress-bar" style="width: 75%"></div> </div>

Spinner

HTML
<div class="spinner"></div>

Circular Progress

75%
HTML
<div class="circular-progress" style="--progress: 75"> <svg class="circular-progress-svg" viewBox="0 0 100 100"> <circle class="circular-progress-bg" cx="50" cy="50" r="45"/> <circle class="circular-progress-bar" cx="50" cy="50" r="45"/> </svg> <div class="circular-progress-text">75%</div> </div>

Filter Chips

Clickable filter tags

HTML
<div class="filter-chips"> <button class="chip active">All</button> <button class="chip">Active</button> <button class="chip">Pending</button> <button class="chip">Completed</button> </div>

Empty States

Friendly empty state placeholders

No Data Available

Get started by creating your first item.

HTML
<div class="empty-state"> <svg class="empty-state-icon">...</svg> <h3 class="empty-state-title">No Data Available</h3> <p class="empty-state-description">Get started by creating your first item.</p> <button class="btn">Create Item</button> </div>

Loading Skeletons

Animated loading placeholders

HTML
<div class="skeleton-card"> <div class="skeleton skeleton-title"></div> <div class="skeleton skeleton-text"></div> <div class="skeleton skeleton-text"></div> <div class="skeleton skeleton-button"></div> </div>

Floating Action Button

Fixed floating button for primary actions

HTML
<button class="fab" aria-label="Add new item"> <svg>...</svg> </button>

Status Indicators

Animated status dots

Active
Inactive
Busy
HTML
<div class="status-indicator"> <span class="status-dot active"></span> <span>Active</span> </div> <div class="status-indicator"> <span class="status-dot inactive"></span> <span>Inactive</span> </div> <div class="status-indicator"> <span class="status-dot busy"></span> <span>Busy</span> </div>

Star Rating

Interactive star rating component

HTML
<div class="star-rating"> <input type="radio" id="star5" name="rating" value="5"> <label for="star5">★</label> <input type="radio" id="star4" name="rating" value="4"> <label for="star4">★</label> <input type="radio" id="star3" name="rating" value="3" checked> <label for="star3">★</label> <input type="radio" id="star2" name="rating" value="2"> <label for="star2">★</label> <input type="radio" id="star1" name="rating" value="1"> <label for="star1">★</label> </div>