ReEnd-Components

The only React component library built for tactical, sci-fi, and gaming-inspired UI.

Not another shadcn clone. Not a Bootstrap wrapper. ReEnd is for when your app should look like a tactical HUD.

→ Dark-first design system (Endfield aesthetic) → Signature components you won't find anywhere else → CSS variable tokens + Tailwind preset → TypeScript, Radix UI primitives, accessible

Documentation · GitHub · npm

---

Installation

npm install reend-components
# or
pnpm add reend-components
# or
yarn add reend-components
# or
bun add reend-components

Peer Dependencies

Package	Version	Required for
react	≥18.0.0	All components
react-dom	≥18.0.0	All components
tailwindcss	≥3.4.0 (optional)	Tailwind preset
framer-motion	≥10.0.0 (optional)	Signature components
lucide-react	≥0.400.0 (optional)	HoloCard icon prop

# For Signature components (GlitchText, RadarChart, TacticalPanel, etc.)
npm install framer-motion lucide-react

---

Quick Start

1. Configure Tailwind (recommended)

// tailwind.config.ts
import reendPreset from "reend-components/tailwind";

export default {
  presets: [reendPreset],
  content: [
    "./src/**/*.{ts,tsx}",
    // Required for Signature component classes to be included
    "./node_modules/reend-components/dist/**/*.{js,mjs}",
  ],
};

2. Import CSS Variables

/* In your global CSS file */
@import "reend-components/variables.css";

3. Use Components

import {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
  TooltipProvider,
} from "reend-components";

function App() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger>Hover me</TooltipTrigger>
        <TooltipContent>Styled with Endfield design tokens</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

Without Tailwind

Import the pre-built stylesheet instead:

import "reend-components/styles.css";
import { Tooltip } from "reend-components";

---

Components

Component	Description
Tooltip	Popup info on hover/focus (Radix-based)
Toast	Notification toasts (Radix-based)
Toaster	Toast container/renderer
SonnerToaster	Alternative toast (Sonner lib)
cn()	Utility for merging Tailwind classes
useToast()	Toast notification hook

---

Signature Components

Requires framer-motion and/or lucide-react peer dependencies. Add ./node_modules/reend-components/dist/**/*.{js,mjs} to your Tailwind content array so animation utilities (animate-glitch, clip-corner, etc.) are included.

npm install framer-motion lucide-react

Component	Description	Key Props
GlitchText	Animated glitch effect text span	children: string, className?
DiamondLoader	Rotating diamond loading spinner	size?: "sm"|"md"|"lg", label?
TacticalPanel	HUD-style content panel with status indicator	title, status?: "online"|"warning"|"offline"|"scanning"
HoloCard	Holographic stat/feature card with hover tilt	title, subtitle, icon: React.ElementType, value?
DataStream	Scrolling live data feed terminal	messages?: string[]
TacticalBadge	Status badge with semantic variants (CVA-powered)	variant?: "default"|"success"|"warning"|"danger"|"info"
WarningBanner	Alert banner with severity levels	level?: "caution"|"alert"|"critical"
ScanDivider	Animated scan-line section divider	label?
CoordinateTag	HUD coordinate display tag	label, value, unit?
RadarChart	Animated SVG radar/spider chart	data: {label, value}[], size?, color?: "primary"|"cyan"
HUDOverlay	Corner-bracket HUD overlay with crosshair and coords	systemLabel?, lat?, lon?, showCoords?, showCrosshair?

import {
  TacticalPanel,
  HUDOverlay,
  RadarChart,
  GlitchText,
} from "reend-components";

function Dashboard() {
  return (
    <HUDOverlay systemLabel="ENDFIELD::DASHBOARD">
      <TacticalPanel title="OPERATOR STATUS" status="online">
        <GlitchText>DR. AMBROSE</GlitchText>
        <RadarChart
          data={[
            { label: "ATK", value: 88 },
            { label: "DEF", value: 62 },
            { label: "TECH", value: 95 },
            { label: "SPD", value: 74 },
          ]}
        />
      </TacticalPanel>
    </HUDOverlay>
  );
}

---

Theming

ReEnd uses CSS custom properties for all colors. Override any variable:

:root {
  --ef-yellow: 47 100% 56%;
  --primary: 47 100% 56%;
  --background: 0 0% 4%;
  --foreground: 0 0% 94.1%;
}

Dark/light mode: toggle .light class on document root.

All color variables use HSL values without hsl() wrapper for alpha support: background: hsl(var(--primary) / 0.5);

See CSS Variable Reference for the complete token list.

Design Tokens

Token	Purpose	Dark	Light
--ef-yellow	Primary accent	48 100% 58%	42 90% 42%
--ef-blue	Info / links	201 66% 58%	—
--ef-red	Destructive	355 100% 64%	355 80% 50%
--ef-green	Success	145 67% 51%	—
--background	Page bg	0 0% 4%	0 0% 97%
--foreground	Text color	0 0% 94.1%	0 0% 8%
--primary	Brand color	48 100% 58%	42 90% 42%

Full token reference →

---

Development

git clone https://github.com/VBeatDead/ReEnd-Components.git
cd ReEnd-Components
npm install
npm run dev        # docs dev server at :8080
npm run build      # build docs SPA
npm run build:lib  # build library for npm
npm run test       # run tests (89 tests)
npm run test:coverage  # test + coverage report

---

Internationalization (i18n)

The documentation site supports English (default) and Bahasa Indonesia via react-i18next.

URL Structure

URL Pattern	Language
/docs/foundations	English
/id/docs/foundations	Indonesian

1,425 translation keys across 16 namespaces × 2 languages.

---

License

MIT © VBeatDead

Disclaimer

This is a community-driven, fan-made project inspired by the sci-fi industrial aesthetics of Arknights: Endfield. It is not affiliated with, endorsed by, or connected to Hypergryph, Gryphline, or any of their subsidiaries. All game-related trademarks and copyrights belong to their respective owners. The MIT license applies to the source code only.