@otaga/web-ui-kit

A premium, editorial-style UI Kit for React and Next.js. The web counterpart to @otaga/rn-ui-kit — no React Native dependency required.

Installation

npm install @otaga/web-ui-kit

Peer dependencies (install if not already present):

npm install react react-dom

Components

Navigation

| Component | Description | | :--- | :--- | | Sidebar | Animated slide-in drawer with item list and active-state highlighting | | BottomBar | Floating pill-shaped navigation bar with smooth active transitions | | BottomSheet | Gesture-driven modal sheet with configurable snap points | | SegmentedControl | Pill-shaped multi-option selector | | Dock | macOS-style icon dock with magnification on hover | | ExpandedTabs | Tab strip that expands the active tab with icon and label |

Display & Layout

| Component | Description | | :--- | :--- | | CardCarousel | Horizontally scrollable card carousel | | ImageCarousel | Image carousel with person/avatar cards | | ImageSwiper | Full-screen swipeable image viewer | | InfiniteGrid | Auto-scrolling infinite grid of items | | InfiniteDraggableGrid | Infinite grid with drag-to-reorder support | | FlipCard | Two-sided card with flip animation | | ChatBotCard | Floating chatbot UI card | | BrutalistTaskCard | High-contrast brutalist-style task tracker card |

Forms & Auth

| Component | Description | | :--- | :--- | | LoginForm | Clean email/password login form | | PurpleLoginForm | Login form with purple accent styling | | DarkLoginBox | Dark-themed compact login box | | AuthFlipCard | Login/register form inside a flip card | | WelcomeBackForm | Welcome-back login with animated greeting | | SignInCard | Minimal card-style sign-in component | | SubscribeCard | Email subscription form card |

Actions

| Component | Description | | :--- | :--- | | CartButton | "Swipe-to-Add" morphing add-to-cart button | | BuyButton | "Swipe-to-Buy" slider for high-conversion checkout | | FileUpload | Drag-and-drop and click-to-upload file input | | Collapsible | Animated expandable/collapsible content section |

Primitives

| Component | Description | | :--- | :--- | | ThemedText | Text component with automatic light/dark theming | | ThemedView | View wrapper with automatic light/dark background | | Icon | Comprehensive icon component (ALL_ICONS, ICON_CATEGORIES) |

Usage Examples

BottomBar

import { BottomBar } from '@otaga/web-ui-kit';

<BottomBar
  tabs={[
    { id: 'home', icon: 'house', label: 'Home' },
    { id: 'explore', icon: 'search', label: 'Explore' },
    { id: 'profile', icon: 'person', label: 'Profile' },
  ]}
  activeTab={activeTab}
  onTabPress={(id) => setActiveTab(id)}
/>

| Prop | Type | Description | | :--- | :--- | :--- | | tabs | BottomBarTab[] | Array of { id, icon, label } objects | | activeTab | string | ID of the currently active tab | | onTabPress | (id: string) => void | Called when a tab is pressed | | backgroundColor | string | Bar background color | | activeBackgroundColor | string | Pill background when active (default: #000) | | activeTintColor | string | Icon/text color when active (default: #fff) | | inactiveTintColor | string | Icon color when inactive |

CartButton

import { CartButton } from '@otaga/web-ui-kit';

<CartButton
  label="Add to Bag"
  color="#000"
  onAddToCart={() => console.log('Added!')}
  onBagPress={() => console.log('Open bag')}
/>

| Prop | Type | Description | | :--- | :--- | :--- | | label | string | Button text | | color | string | Button background color | | onAddToCart | function | Called after a successful swipe | | onBagPress | function | Called when the secondary bag icon is pressed |

BuyButton

import { BuyButton } from '@otaga/web-ui-kit';

<BuyButton
  label="Slide to Purchase"
  color="#1a1a1a"
  onBuy={() => console.log('Purchased!')}
/>

| Prop | Type | Description | | :--- | :--- | :--- | | label | string | Prompt text for the slider | | color | string | Slider background color | | onBuy | function | Called when the slider reaches the end | | height | number | Slider height in px (default: 62) |

BottomSheet

import { BottomSheet } from '@otaga/web-ui-kit';

<BottomSheet
  visible={isOpen}
  onClose={() => setIsOpen(false)}
  snapPoints={[300, 600]}
>
  <YourContent />
</BottomSheet>

| Prop | Type | Description | | :--- | :--- | :--- | | snapPoints | number[] | Heights (px) the sheet can snap to | | visible | boolean | Controls sheet visibility | | onClose | function | Called when swiped down to close | | persistent | boolean | If true, stays visible at the minimum snap point |

Theme Utilities

import { Colors, Fonts, useColorScheme } from '@otaga/web-ui-kit';

const scheme = useColorScheme(); // 'light' | 'dark'
const bg = Colors[scheme].background;
const font = Fonts.sans;

License

MIT