Odyssee ComponentsUI Components for Pulse Framework

Quick Start ​

Install the package in your Pulse Framework project:

npm install @odyssee/components

Import and use components:

import { Button, Input, Pulse } from '@odyssee/components';

const email = Pulse.signal('');

const form = (
  <form>
    <Input 
      label="Email"
      type="email"
      value={email}
      onChange={(val) => email(val)}
    />
    <Button type="submit">Submit</Button>
  </form>
);

Component Categories ​

Base Components ​

Essential UI elements for building interfaces:

• Button - Versatile button with variants, sizes, and loading states
• Alert - Notification messages with different severity levels
• Badge - Small labels and tags for status indicators

Form Components ​

Complete form controls with validation and accessibility:

• Input - Text input with label, hints, and icons
• Select - Dropdown with options and groups
• Checkbox - Checkbox with label and description
• Radio - Radio button for single selection
• RadioGroup - Grouped radio buttons
• Toggle - Switch component with variants
• Textarea - Multi-line text input with auto-resize
• FileInput - File upload with preview
• RangeSlider - Numeric range selection
• ColorPicker - Color selection input
• FormGroup - Container for organizing form fields

Overlay Components ​

Modal dialogs and overlays:

• Modal - Dialog overlay with customizable content

Why Odyssee Components? ​

Pulse Framework Integration ​

Unlike traditional React or Vue libraries, Odyssee Components is built specifically for Pulse Framework. This means:

• True Reactivity: Uses Pulse signals for fine-grained reactivity
• No Re-renders: Components don't re-render, only specific DOM nodes update
• Better Performance: No virtual DOM overhead
• Smaller Bundle: Minimal runtime, maximum efficiency

Developer Experience ​

• Full TypeScript support with comprehensive type definitions
• Intuitive API that feels natural with Pulse
• Extensive documentation with live examples
• Easy to customize and extend

Production Ready ​

• Battle-tested components used in production applications
• Comprehensive test coverage
• Regular updates and maintenance
• Active community support

Learn More ​