KromaUI

A modern, responsive UI component library with glass morphism effects and smooth animations.

Installation

npm install kromaui

Usage

Setup

First, wrap your application with the ToastProvider to enable toast notifications:

import { ToastProvider } from 'kromaui';

function App() {
  return (
    <ToastProvider>
      {/* Your app content */}
    </ToastProvider>
  );
}

Components

1. Navbar

A responsive navigation bar with glass effect and mobile menu.

import { Navbar } from 'kromaui';

function MyComponent() {
  return (
    <Navbar
      brand={{ name: 'Your Brand', href: '/' }}
      items={[
        { label: 'Home', href: '/' },
        { label: 'Features', href: '/features' },
        { label: 'Docs', href: '/docs' }
      ]}
      variant="glass"
      position="fixed"
      rightContent={
        <>
          <Button variant="outline" size="small">Login</Button>
          <Button variant="primary" size="small">Sign Up</Button>
        </>
      }
    />
  );
}

Props:

• brand: Object with name and href for the brand link
• items: Array of navigation items with label, href, and optional icon
• variant: 'glass' | 'solid' (default: 'glass')
• position: 'fixed' | 'sticky' | 'relative' (default: 'fixed')
• rightContent: React node for right side content (e.g., buttons)

2. Toast Notifications

Show toast notifications using the useToast hook:

import { useToast } from 'kromaui';

function MyComponent() {
  const { showToast } = useToast();

  const handleClick = () => {
    showToast({
      message: 'Operation successful!',
      variant: 'success',
      position: 'top-right',
      duration: 3000
    });
  };

  return <button onClick={handleClick}>Show Toast</button>;
}

Toast Options:

• message: The text to display
• variant: 'success' | 'error' | 'warning' | 'info' (default: 'info')
• position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center' (default: 'top-right')
• duration: Duration in milliseconds (default: 3000, 0 for persistent)
• icon: Optional custom icon

3. Button

A versatile button component with multiple variants and sizes.

import { Button } from 'kromaui';

function MyComponent() {
  return (
    <>
      <Button variant="primary">Primary Button</Button>
      <Button variant="secondary">Secondary Button</Button>
      <Button variant="outline">Outline Button</Button>
      <Button size="small">Small Button</Button>
      <Button size="large">Large Button</Button>
    </>
  );
}

Props:

• variant: 'primary' | 'secondary' | 'outline' (default: 'primary')
• size: 'small' | 'medium' | 'large' (default: 'medium')
• disabled: boolean
• onClick: click handler
• className: additional CSS classes

Features

• Glass Morphism: Beautiful glass effect with backdrop blur
• Responsive Design: Works perfectly on all screen sizes
• Smooth Animations: Elegant transitions and animations
• TypeScript Support: Full type safety
• Customizable: Easy to style and extend
• Accessible: Built with accessibility in mind

Examples

Show Different Toast Types

const { showToast } = useToast();

// Success toast
showToast({
  message: 'Operation successful!',
  variant: 'success'
});

// Error toast
showToast({
  message: 'Something went wrong',
  variant: 'error'
});

// Warning toast
showToast({
  message: 'Please be careful',
  variant: 'warning'
});

// Info toast
showToast({
  message: 'New feature available',
  variant: 'info'
});

Create a Navigation Bar

<Navbar
  brand={{ name: 'MyApp', href: '/' }}
  items={[
    { label: 'Home', href: '/' },
    { label: 'Products', href: '/products' },
    { label: 'About', href: '/about' }
  ]}
  variant="glass"
  position="fixed"
  rightContent={
    <Button variant="primary">Get Started</Button>
  }
/>

Styling

All components use CSS variables for easy customization. You can override these variables in your CSS:

:root {
  --primary-color: #5865F2;
  --background-color: rgba(47, 49, 54, 0.7);
  --text-color: #ffffff;
  /* Add more variables as needed */
}

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT