Neo UI

Shared design system for Neo ID, NeoMovies and future Neo surfaces

Packages

Package	Description
@neo-open-source/ui-web	React component library
@neo-open-source/icons	SVG icon set based on Lucide
@neo-open-source/tokens	Design tokens (CSS variables)

Installation

pnpm add @neo-open-source/ui-web

Import styles once at the root of your app:

import '@neo-open-source/ui-web/styles.css'

Usage

import { Button, Avatar, AlertBanner } from '@neo-open-source/ui-web'
import { Bell } from '@neo-open-source/ui-web/icons'

export default function Example() {
  return (
    <>
      <Avatar fallback="EA" />
      <Button>Get started</Button>
      <AlertBanner
        title="Welcome to Neo UI"
        icon={<Bell size={16} />}
        onDismiss={() => {}}
      />
    </>
  )
}

Components

Group	Components
Layout	TopBar, SidebarNav, MobileNav
Identity	Avatar, AvatarGroup, AvatarPicker, AccountCard, ProfileCard, TwoFactorCard
Auth	NeoIdOAuthCard, OAuthButton, OtpInput, Announcement, DeviceLoginCard
Feedback	AlertBanner
Forms	Button, Input, Switch, ThemeToggle, Spinner, Status, Badge
Media	PosterMediaCard, BackdropMediaCard
Patterns	DialogStack

Development

pnpm install
pnpm dev        # docs app at localhost:5173
pnpm build      # build all packages + docs

Deployment

The docs app deploys automatically to Vercel on push to main.

To deploy manually:

vercel deploy --prod

Publishing

Packages publish to npm automatically when a version tag is pushed:

git tag v0.2.0
git push origin v0.2.0

Requires NPM_TOKEN secret in GitHub repository settings.

Stack

• Components: React + TypeScript
• Styling: CSS custom properties (no Tailwind at runtime)
• Build: tsup
• Docs: Vite + React
• Monorepo: pnpm workspaces

Credits

• Icons in @neo-open-source/icons are taken from and based on Lucide.

License

MIT