Anvil

Telchar-Dynamics

Tactical HUD component library for Svelte. Military-grade UI components with a dark, technical aesthetic.

ANVIL

Tactical HUD Component Library for Svelte

Forged at Telchar Dynamics

Overview

Anvil is a sleek, tactical-themed component library built for Svelte applications. Inspired by military HUD interfaces and C2 systems, it features:

Tactical Aesthetic - Dark theme with electric cyan accents and subtle glows
HUD Elements - Corner brackets, scanlines, and status indicators
Svelte-Native - Built specifically for Svelte 4/5
CSS Variables - Fully customizable design tokens
Font Themes - Multiple font presets including Geist, JetBrains Mono, and more
Zero Dependencies - Lightweight and standalone

Installation

npm install @telchar/anvil

Usage

<script>
  import { Button, Card, Badge, Indicator } from '@telchar/anvil';
  import '@telchar/anvil/styles';
</script>

<div class="anvil font-geist">
  <Card title="System Status">
    <Indicator status="success" label="Online" pulse />
    <Badge variant="accent">ACTIVE</Badge>
    <Button variant="primary">Engage</Button>
  </Card>
</div>

Components

Form Controls

Component	Description
`Button`	Tactical buttons with glow effects
`Input`	Text inputs with tactical styling
`Select`	Dropdown select menus
`Toggle`	Checkbox toggles
`Switch`	On/off toggle switches
`Slider`	Range slider inputs

Layout

Component	Description
`Card`	Panels with HUD corner brackets
`Panel`	Collapsible overlay panels
`Divider`	Section dividers with optional labels
`Modal`	Dialog modals with backdrop
`Tabs`	Tabbed content panels
`Table`	Data tables with tactical styling
`Accordion`	Collapsible content sections

Feedback

Component	Description
`Badge`	Status badges with dot indicators
`Indicator`	Status dot indicators with pulse
`Progress`	Progress bars
`Spinner`	Loading spinners
`Toast`	Toast notifications
`Tooltip`	Hover tooltips
`Alert`	Alert banners with dismiss
`Skeleton`	Loading placeholder with shimmer
`Empty`	Empty state placeholders

Data Display

Component	Description
`DataValue`	Labeled data display
`Stat`	Statistics with change indicators
`Code`	Inline and block code display
`Kbd`	Keyboard key display
`Tag`	Removable label tags

Component	Description
`Breadcrumb`	Navigation breadcrumbs

Media

Component	Description
`Avatar`	User avatars with status indicators

Font Themes

Anvil includes several font theme presets. Apply them by adding a class to your container:

<div class="anvil font-geist">...</div>

Class	Fonts
`font-geist`	Geist / Geist Mono (default)
`font-jetbrains`	JetBrains Mono
`font-fira`	Fira Code
`font-ibm`	IBM Plex Mono
`font-source`	Source Code Pro
`font-inter`	Inter / JetBrains Mono
`font-space`	Space Grotesk / Space Mono

Disable Monospace

To use the body font instead of monospace for component text:

<div class="anvil font-geist no-mono">...</div>

Design Tokens

Anvil uses CSS custom properties for theming:

:root {
  /* Colors */
  --anvil-accent: #00f0ff;
  --anvil-bg-0: #050608;
  --anvil-bg-1: #0a0d12;
  --anvil-bg-2: #0e1319;
  --anvil-fg-0: #e8eef5;
  --anvil-fg-1: #a8b5c4;
  --anvil-fg-muted: #5a6a7a;
  --anvil-border: #1a242e;
  --anvil-success: #00ff88;
  --anvil-warning: #ffaa00;
  --anvil-error: #ff3366;

  /* Typography */
  --anvil-font-display: 'Geist', system-ui, sans-serif;
  --anvil-font-body: 'Geist', system-ui, sans-serif;
  --anvil-font-mono: 'Geist Mono', monospace;

  /* Spacing */
  --anvil-space-1: 0.25rem;
  --anvil-space-2: 0.5rem;
  --anvil-space-4: 1rem;
  --anvil-space-8: 2rem;

  /* Radii */
  --anvil-radius-sm: 2px;
  --anvil-radius-md: 4px;
}

Development

# Install dependencies
npm install

# Start dev server
npm run dev

# Build library
npm run package

# Type check
npm run check

License

MIT

Top categories