## Styling Philosophy Kinetik components follow a simple principle: **easy to use, easy to customize**. Every component accepts standard styling props and integrates seamlessly with Tailwind CSS. ## The className Prop All Kinetik components support the `className` prop for adding custom styles: ```tsx Rounded Button ``` Your className styles are merged with the component's default styles using `tailwind-merge`. Conflicting styles will be resolved in favor of your custom classes. ## Style Merging with cn() Kinetik uses a utility function called `cn()` for intelligent class merging: ```tsx import { cn } from '@/lib/utils' // In your component

``` ### Setting Up cn() Add this to your `lib/utils.ts`: ```ts import { clsx, type ClassValue } from 'clsx' import { twMerge } from 'tailwind-merge' export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } ``` Install the dependencies: ```bash npm install clsx tailwind-merge ``` ## Common Styling Patterns ### Spacing ```tsx // Add margin // Add padding // Responsive spacing // Gap in flex/grid containers

One Two

``` ### Colors ```tsx // Override text color // Override background // Use CSS variables

Themed content

``` ### Typography ```tsx // Change font size // Change font weight // Change font family

Heading

// Letter spacing and line height

Content

``` ### Shadows and Effects ```tsx // Add shadows // Add blur backdrop // Add borders ``` ## Responsive Design Kinetik components work seamlessly with Tailwind's responsive prefixes: ```tsx Responsive Button ``` ### Responsive Grid Patterns ```tsx // Stack on mobile, row on desktop

// Different grid columns

{features.map(f => )}

// Hide on mobile, show on desktop ``` ## Dark Mode Components support Tailwind's dark mode out of the box: ```tsx ``` ### Dark Mode with CSS Variables For consistent theming, use CSS variables: ```css :root { --card-bg: #ffffff; --card-text: #000000; } .dark { --card-bg: #1a1a1a; --card-text: #ffffff; } ``` See the [Dark Mode guide](/docs/customization/dark-mode) for full setup instructions. ## State-Based Styling ### Hover and Focus States ```tsx Interactive Button ``` ### Disabled States ```tsx ``` ## Creating Wrapper Components For consistent overrides, create wrapper components: ```tsx import { MagneticButton, type MagneticButtonProps } from './MagneticButton' import { cn } from '@/lib/utils' interface PrimaryButtonProps extends MagneticButtonProps { size?: 'sm' | 'md' | 'lg' } const sizes = { sm: 'px-3 py-1.5 text-sm', md: 'px-4 py-2 text-base', lg: 'px-6 py-3 text-lg', } export function PrimaryButton({ className, size = 'md', ...props }: PrimaryButtonProps) { return ( ) } ``` ## Best Practices 1. **Use semantic class names** - Group related styles together 2. **Leverage responsive prefixes** - Mobile-first approach 3. **Extract common patterns** - Create utility classes or wrapper components 4. **Use CSS variables for themes** - Easier to maintain and update 5. **Avoid conflicting animations** - Don't mix Tailwind and Framer Motion on the same property ## Next Steps - Learn about [Accessibility](/docs/core-concepts/accessibility) best practices - Set up [Dark Mode](/docs/customization/dark-mode) support - Explore [CSS Variables](/docs/customization/css-variables) in depth

Styling Guide

Styling Guide