Documentation

Complete guide to NeonKit's design system, components, and implementation patterns. Everything you need to build beautiful, accessible dark-mode applications.

Design System

Colors, typography, and motion

Components

20+ ready-to-use components

Implementation

Setup and usage patterns

Design System

NeonKit is built around a cohesive design system optimized for dark mode with strategic neon accents.

Color System

Base Palette

slate-950 (Background)
slate-900 (Surface)
slate-800 (Borders)
slate-100 (Text)

Neon Accents

neon-cyan (#22d3ee)
neon-purple (#a855f7)
neon-chartreuse (#a3e635)
neon-pink (#f472b6)

Typography & Motion

Typography

  • • Font: Inter (system font)
  • • Scale: text-xs to text-6xl
  • • Weights: 400, 500, 600, 700
  • • Generous whitespace for clarity

Motion

  • • Framework: Framer Motion
  • • Standard: duration-300
  • • Hover: scale transforms
  • • Accessibility: reduced motion support

Component Library

NeonKit provides 20+ components, each with 8 neon variants and comprehensive customization options.

Form Components

Button
8 variants
Input
8 variants
Textarea
8 variants
Checkbox
8 variants
Radio
8 variants
Switch
8 variants

Display Components

Card
Multiple
Alert
8 variants
Badge
8 variants
Avatar
8 variants
Modal
8 variants
Tooltip
8 variants

Interactive Components

Dropdown
8 variants
Slider
8 variants
Progress
8 variants
Skeleton
Loading
Toast
8 variants
File Upload
8 variants

Neon Variants

Every component comes with 8 stunning neon variants for consistent theming

Responsive Design

Built with Tailwind's responsive utilities for all screen sizes

Accessibility

WCAG AA compliant with proper ARIA labels and keyboard navigation

Implementation

Get started with NeonKit in minutes. Copy-paste workflow with no build step required.

Installation

1. Install Dependencies

npm install framer-motion clsx tailwind-merge lucide-react

2. Add Utils Function

// lib/utils.ts
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}

3. Copy Components

Browse our component gallery and copy-paste the code you need

Usage Patterns

Basic Component

<Button variant="neon-cyan">
Click me
</Button>

With Props

<Input
variant="neon-purple"
size="lg"
placeholder="Enter text..."
/>

Custom Styling

<Card className="custom-class">
Content
</Card>

Key Features

  • • Dark mode optimized design
  • • 8 neon color variants per component
  • • Framer Motion animations
  • • TypeScript support
  • • Tailwind CSS utilities
  • • Accessibility-first approach
  • • Responsive design
  • • Copy-paste workflow

Technical Specs

  • • React 18+ compatible
  • • TypeScript 5.0+
  • • Tailwind CSS 3.0+
  • • Framer Motion 10+
  • • WCAG AA compliant
  • • Tree-shakeable exports
  • • SSR/SSG ready
  • • Zero runtime overhead