@ansango/pip.ui

Svelte 5 UI component library with the Fallout Terminal design language (CRT green, amber accents, monospace-first typography), built on Bits UI and Tailwind CSS v4.

This package is intended for SvelteKit/Svelte 5 apps and is designed to be consumed together with @ansango/pip.tw (shared Tailwind tokens/base layer).

Requirements

• Svelte ^5
• SvelteKit ^2 (recommended)
• Tailwind CSS ^4
• @ansango/pip.tw for design tokens and base styles

Install

1. Install the UI package and shared Tailwind tokens package

bun add @ansango/pip.ui @ansango/pip.tw
# or
npm i @ansango/pip.ui @ansango/pip.tw
# or
pnpm add @ansango/pip.ui @ansango/pip.tw
# or
yarn add @ansango/pip.ui @ansango/pip.tw

2. Install peer dependencies

Recommended:

bunx pip-ui
# or
npx pip-ui

The pip-ui CLI reads peerDependencies from this package and installs them with your detected package manager.

CSS setup (important)

In your global stylesheet (for example src/routes/layout.css in SvelteKit), import in this order:

@import "tailwindcss";
@import "tw-animate-css";
@import "@ansango/pip.tw";
@import "@ansango/pip.ui/tw";

/* optional plugins if your app needs them */
@plugin "@tailwindcss/forms";
@plugin "@tailwindcss/typography";

Why this setup changed

@ansango/pip.ui now exposes its component styling through @ansango/pip.ui/tw (generated CSS entry), while @ansango/pip.tw provides the shared token and theme baseline used across apps.

If you only install/import @ansango/pip.ui without the Tailwind base tokens package, components will render but the visual system will be incomplete.

Quick usage

Root import

<script lang="ts">
  import { Button, Badge } from "@ansango/pip.ui";
</script>

<Button>EXECUTE</Button>
<Badge variant="accent">ONLINE</Badge>

Subpath imports (recommended)

<script lang="ts">
  import { Button } from "@ansango/pip.ui/button";
  import { Input } from "@ansango/pip.ui/input";
  import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
  } from "@ansango/pip.ui/table";
</script>

Subpath imports provide clearer dependency boundaries and are the preferred style for library consumers.

Data table utilities

The data-table adapter lives in:

import {
  createSvelteTable,
  FlexRender,
  renderComponent,
  renderSnippet,
} from "@ansango/pip.ui/data-table";

It is a thin Svelte adapter around @tanstack/table-core patterns.

CLI

This package ships a binary:

pip-ui

It installs all required peer dependencies for consumers.

Development (inside this monorepo)

From packages/ui:

bun run dev          # svelte-kit sync + svelte-package --watch
bun run build        # svelte-kit sync + svelte-package
bun run lint
bun run check-types

From repository root:

bun run dev
bun run build
bun run lint
bun run check-types

Root commands are delegated via Turborepo and run tasks across apps/packages in dependency order.

Package structure

• Entry exports: @ansango/pip.ui
• Component subpaths: @ansango/pip.ui/<component>
• UI CSS entry: @ansango/pip.ui/tw
• Bin: pip-ui

Peer dependencies

Key peers include:

• bits-ui
• tailwindcss, tailwind-variants, tailwind-merge, tw-animate-css
• formsnap, sveltekit-superforms
• @tanstack/table-core
• @internationalized/date
• embla-carousel-svelte, vaul-svelte, layerchart, paneforge, mode-watcher, svelte-sonner
• @ansango/pip.icons

Use pip-ui to keep versions aligned automatically.

Troubleshooting

Components render unstyled

• Confirm global CSS imports include both @ansango/pip.tw and @ansango/pip.ui/tw.
• Confirm Tailwind v4 is loaded via @import "tailwindcss".

Build/type errors about missing peers

• Run bunx pip-ui (or npx pip-ui) again.
• Verify your lockfile is in sync after installing.

Icons missing

• Ensure @ansango/pip.icons is installed (it is a peer dependency).

Versioning

Current package version is managed in packages/ui/package.json. Review CHANGELOG.md for release history and migration notes.