SeaOwl UI

A cyber-themed React component library with OKLCH colors, glow effects, and full accessibility compliance.

Preview

Success

<SeaOwlButton>Default</SeaOwlButton>
<SeaOwlButton variant="outline">Outline</SeaOwlButton>
<SeaOwlBadge variant="success">Success</SeaOwlBadge>

Installation

npm install @seaowl/web

Quick Start

import { SeaOwlButton, SeaOwlCard, SeaOwlBadge } from '@seaowl/web';
import '@seaowl/web/styles';

export default function App() {
  return (
    <SeaOwlCard>
      <SeaOwlBadge>Active</SeaOwlBadge>
      <SeaOwlButton>Get Started</SeaOwlButton>
    </SeaOwlCard>
  );
}

Features

Cyberpunk Aesthetic

Cyan/teal glow effects and futuristic styling with OKLCH colors

Accessible

WCAG 2.1 Level AA compliant with 4.5:1 contrast ratios

Type Safe

Full TypeScript support with comprehensive type definitions

Lightweight

Tree-shakeable with minimal dependencies on Radix UI