Copy and paste 20+ beautiful components with electric neon effects. Made with React, TypeScript, and Tailwind CSS.
Install the required packages to use NeonKit components. All components use Framer Motion for smooth animations and Lucide React for icons.
npm install framer-motion clsx tailwind-merge lucide-reactAdd this utility function to lib/utils.ts (create the file if it doesn't exist).
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}Browse our component gallery with 20+ components, click on any component, switch to the "Code" tab, and copy-paste into your project.
Every component comes with 8 stunning neon variants: cyan, purple, chartreuse, pink, success, warning, destructive, and more.
You're ready to use NeonKit's 20+ components with 8 neon variants. Just copy, paste, and customize as needed.