Skip to content
Night Owls.dev
GitHubGet started
Jump to a page

@nightowlsdev/ui

UI

The shared app-chrome kit for Night Owls surfaces: full-page layout (Container/Section), site chrome (NavBar/Footer), primitives (Button/Card/Badge), and a light/dark ThemeProvider.

What it does

@nightowlsdev/ui is the shared React component library for the chrome AROUND a Night Owls swarm (not the chat UI itself, that is @nightowlsdev/react). It has grown past a primitives kit into a full-page layout + app-chrome library: Container and Section for page structure, NavBar and Footer for site chrome, the Button / Card / Badge primitives, a light/dark/system ThemeProvider with useTheme + a ThemeToggle, and a cn class-merge helper (clsx + tailwind-merge). It is styled against the @nightowlsdev/theme tokens (the --owl-* CSS variables) and ships its own precompiled ./styles.css, so a host imports it with no Tailwind build of its own. It powers the marketing site and the getnightowls app shell. Published at version 0.1.0.

Install

pnpm add @nightowlsdev/ui

Key exports

  • Button (ButtonProps, ButtonVariant, ButtonSize)
  • Card
  • Badge (BadgeProps, BadgeTone)
  • Container (ContainerProps, ContainerSize)
  • Section (SectionProps, SectionAlign)
  • NavBar (NavBarProps)
  • Footer (FooterProps)
  • ThemeProvider / useTheme (ThemeProviderProps, ThemeModeSetting)
  • ThemeToggle
  • cn
  • ./styles.css (precompiled)

Usage

ui.tsx
import { ThemeProvider, Button, Card, Badge } from "@nightowlsdev/ui";
import "@nightowlsdev/ui/styles.css";

export function Chrome() {
  return (
    <ThemeProvider defaultMode="light">
      <Card>
        <Badge tone="accent">New</Badge>
        <Button variant="primary" size="md">Start free</Button>
      </Card>
    </ThemeProvider>
  );
}