Odine UI Component Library

A modern, accessible, and customizable React component library built with TypeScript, Tailwind CSS v4, and OKLCH color space.

Features

🎨 Modern color system using OKLCH
🌓 Built-in dark mode support
👁 Color-blind friendly theme
🎯 Fully typed with TypeScript
📦 Tree-shakeable exports
🚀 Built with Tailwind CSS v4
♿️ Accessible components following WAI-ARIA guidelines
🌍 Internationalization support with Turkish and English
🎬 Smooth animations powered by Framer Motion
⚡ Performance-optimized motion system

Theme Support

This library includes support for five themes:

• Light (default)
• Dark
• Color Blind
• Bubblegum
• Ocean Breeze

Using Themes

1. Wrap your application with the ThemeProvider:

import { ThemeProvider } from 'odine-ui-shared';

function App({ children }) {
  return <ThemeProvider>{children}</ThemeProvider>;
}

2. Use the useTheme hook to access or change the current theme:

import { useTheme } from 'odine-ui-shared';

function MyComponent() {
  const { theme, setTheme } = useTheme();

  return <button onClick={() => setTheme('dark')}>Switch to Dark Mode</button>;
}

3. Use the included ThemeToggle component for a ready-made theme switcher:

import { ThemeToggle } from 'odine-ui-shared';

function Header() {
  return (
    <header>
      <ThemeToggle />
    </header>
  );
}

For more detailed documentation on the theme system, see THEME-SYSTEM.md.

1. Wrap your application with the `