## Component Library Kinetik includes **50+ production-ready components** across 8 categories. Each component is: - **Fully typed** - Complete TypeScript definitions - **Accessible** - WCAG compliant with keyboard navigation - **Animated** - Smooth 60fps Framer Motion animations - **Customizable** - Easy to theme with Tailwind CSS ## Categories ### Buttons & Actions Interactive button components with hover effects and magnetic interactions. | Component | Description | Demo | |-----------|-------------|------| | [MagneticButton](/components/magnetic-button) | Cursor-following magnetic effect | [View](/components/magnetic-button) | | [GlowButton](/components/glow-button) | Pulsing glow on hover | [View](/components/glow-button) | | [RippleButton](/components/ripple-button) | Material-style ripple effect | [View](/components/ripple-button) | | [ShimmerButton](/components/shimmer-button) | Moving gradient shimmer | [View](/components/shimmer-button) | **Quick Example:** ```tsx import { MagneticButton } from '@/components/ui/MagneticButton' export function Hero() { return ( Get Started → ) } ``` ### Text & Typography Animated text components for headings, reveals, and special effects. | Component | Description | Demo | |-----------|-------------|------| | [AnimatedText](/components/animated-text) | Typewriter, word-by-word, fade-in | [View](/components/animated-text) | | [GlitchText](/components/glitch-text) | Cyberpunk glitch distortion | [View](/components/glitch-text) | | [CountUp](/components/count-up) | Animated number counting | [View](/components/count-up) | | [TextReveal](/components/text-reveal) | Scroll-triggered text reveal | [View](/components/text-reveal) | **Quick Example:** ```tsx import { AnimatedText } from '@/components/ui/AnimatedText' export function Heading() { return ( ) } ``` ### Cards & Containers Card components with hover effects, 3D transforms, and interactions. | Component | Description | Demo | |-----------|-------------|------| | [FeatureCard](/components/feature-card) | Hover lift with shadow | [View](/components/feature-card) | | [FlipCard](/components/flip-card) | 3D flip on hover | [View](/components/flip-card) | | [GlassCard](/components/glass-card) | Glassmorphism with blur | [View](/components/glass-card) | | [TiltCard](/components/tilt-card) | 3D perspective tilt | [View](/components/tilt-card) | **Quick Example:** ```tsx import { FeatureCard } from '@/components/ui/FeatureCard' export function Features() { return (

} title="Fast" description="60fps animations" />

) } ``` ### Effects & Backgrounds Visual effects and animated backgrounds. | Component | Description | Demo | |-----------|-------------|------| | [InteractiveGrid](/components/interactive-grid) | Mouse-following dot grid | [View](/components/interactive-grid) | | [CustomCursor](/components/custom-cursor) | Morphing cursor | [View](/components/custom-cursor) | | [ParticleBackground](/components/particle-background) | Floating particles | [View](/components/particle-background) | | [NoiseOverlay](/components/noise-overlay) | Subtle texture overlay | [View](/components/noise-overlay) | ### Carousels & Sliders Scrolling and sliding components. | Component | Description | Demo | |-----------|-------------|------| | [AutoCarousel](/components/auto-carousel) | Infinite auto-scroll | [View](/components/auto-carousel) | | [DragCarousel](/components/drag-carousel) | Drag-to-scroll | [View](/components/drag-carousel) | | [Marquee](/components/marquee) | Infinite scrolling text | [View](/components/marquee) | ### Forms & Inputs Form components with validation and feedback animations. | Component | Description | Demo | |-----------|-------------|------| | [AnimatedInput](/components/animated-input) | Floating label input | [View](/components/animated-input) | | [Toggle](/components/toggle) | Spring-animated toggle | [View](/components/toggle) | | [Checkbox](/components/checkbox) | Animated checkmark | [View](/components/checkbox) | | [Select](/components/select) | Animated dropdown | [View](/components/select) | ### Overlays & Modals Overlay components for dialogs, tooltips, and notifications. | Component | Description | Demo | |-----------|-------------|------| | [Modal](/components/modal) | Spring-animated modal | [View](/components/modal) | | [Tooltip](/components/tooltip) | Animated tooltip | [View](/components/tooltip) | | [Toast](/components/toast) | Notification toasts | [View](/components/toast) | | [Drawer](/components/drawer) | Slide-in drawer | [View](/components/drawer) | ### Navigation Navigation and menu components. | Component | Description | Demo | |-----------|-------------|------| | [Tabs](/components/tabs) | Animated tab indicator | [View](/components/tabs) | | [Accordion](/components/accordion) | Expandable sections | [View](/components/accordion) | | [Breadcrumb](/components/breadcrumb) | Animated breadcrumbs | [View](/components/breadcrumb) | ## Common Patterns ### Combining Components Components work great together: ```tsx import { MagneticButton } from '@/components/ui/MagneticButton' import { AnimatedText } from '@/components/ui/AnimatedText' import { FeatureCard } from '@/components/ui/FeatureCard' export function HeroSection() { return (

} /> } /> } />

Get Started

) } ``` ### Adding Custom Animations All components accept Framer Motion props: ```tsx Animated Entry ``` ## Browse All Components Visit the [Component Library](/components) to see all components with live previews and copy-paste code. Use the search (⌘K) to quickly find components by name or description.

Components Overview

Components Overview