Skip to main content
Skip to content
Template Empire
ShieldOpsv1.13.0
Live DemoBuy — $75

Last updated on 4 June 2026

ShieldOps — Cybersecurity SaaS UI Template (UI03)

UI03 · Next.js 16 · TypeScript · Tailwind CSS v4 · GSAP + Motion v12

A complete UI template for a cybersecurity / security operations platform — marketing site, threat dashboard, compliance screens, and blog in one package.

Series: TLU (Empire UI) · ID: UI03
Brand name: ShieldOps

Features

  • Cybersecurity-focused design — threat feed, triage, compliance, SIEM, EDR, SOAR, audit logs
  • Light-first enterprise aesthetic — clean, professional; dark mode fully supported
  • GSAP + Lenis — scroll-triggered animations with smooth Lenis scroll (GSAP ScrollTrigger proxy)
  • Motion v12 — micro-interactions and viewport entrance animations
  • OKLCH colour tokens — three-tier token system with threat severity palette
  • Fluid typography — clamp()-based type scale
  • Static export — 40 prerendered routes via Next.js App Router
  • Accessible — WCAG 2.2 AA, keyboard navigation, prefers-reduced-motion respected

Pages Included (40 routes)

Marketing: Landing, Pricing, About, Careers, Contact, Docs
Dashboard: Overview, Threat Feed, Triage, Vulnerabilities, Compliance, Access, Audit Logs, Empty State, Settings
Products: SIEM, EDR, SOAR, Threat Intel, Compliance
Blog: Index + 7 full articles
Auth UI: Login, Register, Forgot Password, Two-Factor
Legal: Privacy Policy, Terms of Service, Security, GDPR, Accessibility, Cookie Policy, DMCA, Do Not Sell

Tech Stack

LayerTechnology
FrameworkNext.js 16 (App Router, static export)
LanguageTypeScript 5 (strict mode)
StylingTailwind CSS v4 (CSS-first config)
AnimationsMotion v12 + GSAP 3.15
Smooth scrollLenis 1.3 (with GSAP ScrollTrigger proxy)
Componentsshadcn/ui (heavily customised)
FontsGeist Sans + Geist Mono + Chakra Petch (next/font)
IconsLucide React
Package managerpnpm

Quick Start

See INSTALLATION.md for full setup.

bash
cp .env.example .env.local
pnpm install
pnpm dev       # → http://localhost:3000
pnpm build     # Static export to /out
pnpm typecheck # Strict TypeScript check
pnpm lint      # ESLint with zero warnings

Customisation

See CUSTOMIZATION.md for the branding and colour guide.

All severity colours (--critical, --high, --warning, --info, --safe) are controlled from a single block in globals.css.

Licence

See LICENCE for your purchased licence terms.