✨ Premium UI Components

    @ozkan/ui

    Modern, accessible, and beautifully designed React components with stunning effects. Build faster with premium UI components.

    View Docs

    ✨ Click any button to see magic happen! ✨

    9+

    Components

    15+

    Variants

    100%

    Accessible

    ∞

    Customizable

    Why Choose @ozkan/ui?

    Built for modern web applications with attention to detail

    ✨
    Premium Effects

    Gradient, glassmorphism, glow effects, and shimmer animations that make your UI stand out.

    Gradient
    Glass
    Glow

    ♿
    Accessible

    Built on Radix UI primitives, ensuring full accessibility and keyboard navigation.

    WCAG
    ARIA
    Keyboard

    ⚡
    Type-Safe

    Full TypeScript support with comprehensive type definitions for better DX.

    TypeScript
    IntelliSense

    🎨
    Customizable

    Easy to customize with Tailwind CSS. Change colors, sizes, and styles with simple class modifications.

    📦
    Lightweight

    Tree-shakeable components. Only import what you need. No unnecessary bundle size.

    🚀
    Production Ready

    Battle-tested components used in production. Well-documented and maintained.

    ⚡ Quick Installation

    Get started in minutes

    npm install @ozkan/ui
    import "@ozkan/ui/styles"
    import { Button } from "@ozkan/ui"

    Badge Variants

    Status indicators and labels

    Default
    Secondary
    Error
    Outline
    Gradient ✨
    Glass 🪟
    Pulsing Glow
    New
    In Progress
    Urgent
    Draft
    Featured

    Tabs Component

    Smooth tab navigation

    Get an overview of all components and their capabilities. Perfect for understanding the library structure.

    Perfect For

    Ideal for various types of projects

    🌐 Web Applications

    Build modern web applications with beautiful, accessible components. Perfect for dashboards, admin panels, and SaaS products.

    React
    Next.js

    🚀 Landing Pages

    Create stunning landing pages with premium effects. Gradient buttons, glass cards, and glow effects make your page stand out.

    Marketing
    Portfolio

    🎨 Design Systems

    Use as a foundation for your design system. All components are customizable and follow best practices.

    Scalable
    Maintainable

    Code Examples

    Copy-paste ready code snippets for all components

    Basic Button

    Simple button usage

    import { Button } from "@ozkan/ui";

<Button>Click me</Button>
<Button variant="gradient">Gradient</Button>
<Button variant="glass">Glass</Button>
<Button variant="glow">Glow</Button>

    Button Sizes

    Different button sizes

    <Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>

    Button States

    Loading and shimmer effects

    <Button loading>Loading...</Button>
<Button variant="gradient" shimmer>
  Shimmer Effect
</Button>
<Button disabled>Disabled</Button>

    All Variants

    Complete button variant list

    <Button variant="default">Default</Button>
<Button variant="destructive">Delete</Button>
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>
<Button variant="gradient">Gradient</Button>
<Button variant="glass">Glass</Button>
<Button variant="glow">Glow</Button>

    📚 Documentation

    Complete API reference and usage guide

    📚
    Getting Started

    Learn how to install and set up @ozkan/ui in your project.

    🎨
    Components

    Browse all available components with examples and props.

    ⚙️
    Customization

    Learn how to customize components with Tailwind CSS.

    ♿
    Accessibility

    Built on Radix UI primitives for full accessibility.

    🔧
    API Reference

    Complete TypeScript API reference for all components.

    💡
    Examples

    Real-world examples and use cases for all components.

    Interactive Playground

    Try different combinations and play fun games with our components!

    🎮 Button Click Challenge

    Find and click the target button as fast as you can! Test your UI skills!

    Button Playground

    Customize button properties and see the result live

    Live Preview

    🚀 Ready to Build Something Amazing?

    Start using @ozkan/ui in your next project today

    🎨 Open Storybook

    Free and open-source • MIT License • Built with ❤️