Get Started

What is @olwiba/ui?

@olwiba/ui provides configured page sections, app shells, and hooks that extend @olwiba/cn primitives into reusable patterns. Think Tailwind UI — components organized by domain that you drop into your project and wire up.

Package chain

1. @olwiba/cn — Base primitives (Button, Card, Dialog, Sidebar, etc.)
2. @olwiba/ui — Configured sections, shells, motion, and hooks built on CN

Installation

# bunfig.toml
[install.scopes]
"@olwiba" = { url = "https://npm.olwiba.com/", token = "..." }

Quick start

import { OlwibaUIProvider, AppShell } from "@olwiba/ui";
 
export function Root() {
  return (
    <OlwibaUIProvider>
      <AppShell
        brand={{ name: "My App", href: "/" }}
        navItems={[{ icon: LayoutDashboard, label: "Dashboard", href: "/dashboard" }]}
        user={{ email: "[email protected]", onSignOut: () => signOut() }}
      >
        <Outlet />
      </AppShell>
    </OlwibaUIProvider>
  );
}

What's included

App UI

Shells and screens for application UIs — AppShell, AuthSection, EmptyState, ErrorPage.

Marketing

Page sections and navigation for marketing sites — HeroSection, FeaturesSection, PricingSection, Navbar, Footer, and more.

Overlays

Background treatments — Backdrop with mesh, radial, aurora, grid, noise, and glow variants.

Motion

Animation primitives — FadeIn, StaggerChildren, CountUp, PageTransition.

Components

Smaller interactive and card components — Spotlight, Dock, ConfirmDialog, card variants, utility components.

Hooks

useMounted, useConfirm, useControlledOpen, useCopyToClipboard, useDebounce, useIntersectionObserver, useLocalStorage, useMediaQuery, usePagination, useScrolledPast.

Something not right?

• 🪲 Report a bug
• ✨ Request a feature