This is an example modal dialog. Click outside or press the × button to close.
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)
<!-- Single file includes CSS -->
<script src="https://unpkg.com/indie-neon-ui@latest/dist/indie-neon-ui.cdn.js"></script>
Separate Files
<!-- 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.
// 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
Forms
Beautiful form controls with neon styling and focus states
Text Inputs
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" placeholder="Enter your name">
</div>
Textarea
<div class="form-group">
<label for="message">Message</label>
<textarea id="message" rows="4" placeholder="Your message..."></textarea>
</div>
Checkbox & Radio
<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
<div class="switch-group">
<input type="checkbox" id="toggle" class="switch" checked>
<label for="toggle">Enable notifications</label>
</div>
Dropdown
Custom styled dropdown menus
<div class="dropdown" data-dropdown>
<button class="dropdown-btn" aria-expanded="false">
<span class="dropdown-text">Select Option</span>
<svg class="dropdown-arrow">...</svg>
</button>
<div class="dropdown-menu" aria-hidden="true">
<button class="dropdown-item" data-value="option1">Option 1</button>
<button class="dropdown-item" data-value="option2">Option 2</button>
<button class="dropdown-item" data-value="option3">Option 3</button>
</div>
</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.
<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
<!-- 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
<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
<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
<div class="pagination">
<button class="pagination-btn" disabled><</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">></button>
</div>
Table
Styled data tables with neon accents
Name | Status | Role |
---|---|---|
John Doe | Active | Admin |
Jane Smith | Pending | User |
<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
<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
<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
<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
<div class="progress">
<div class="progress-bar" style="width: 75%"></div>
</div>
Spinner
<div class="spinner"></div>
Circular Progress
<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>
Search Bar
Styled search input with icon
<div class="search-bar">
<svg class="search-icon">...</svg>
<input type="text" class="search-input" placeholder="Search...">
</div>
Filter Chips
Clickable filter tags
<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.
<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
<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
<button class="fab" aria-label="Add new item">
<svg>...</svg>
</button>
Status Indicators
Animated status dots
<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
<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>