INTRODUCTION
What scificn/ui is, why it exists, and how it works.
WHAT IS SCIFICN/UI
SCIFICN/UI is a retro sci-fi React component library built on Radix UI and Tailwind CSS v4. It implements a Cassette Futurism / Terminal UI design language — the visual aesthetic of computers as imagined by the 1970s and 1980s.
Unlike traditional component libraries, scificn/ui is not installed as an npm package. Instead, you copy the component source files directly into your project. You own the code. Modify it freely. No version lock-in.
DESIGN LANGUAGE
ZERO ROUNDED CORNERSHard edges everywhere. border-radius: 0px enforced globally.
MONOSPACE ONLYIBM Plex Mono as the exclusive typeface. Every character on the grid.
PHOSPHOR GLOWbox-shadow and text-shadow glow effects instead of drop shadows.
CORNER NOTCHESclip-path cutoffs on panels instead of rounded corners.
DELIBERATE PALETTEGreen (alive), Amber (warning), Red (danger/stop), Blue (info/system).
ALL CAPS LABELSVariant names, labels, and UI text follow terminal conventions.
CRT EFFECTSScanlines, flicker, and blink animations for tactile presence.
ACCESSIBILITY
All interactive components are built on Radix UI primitives, which provide WAI-ARIA compliance, keyboard navigation, focus management, and screen reader support. The retro aesthetic does not compromise on accessibility.
BUILT WITH
React 19Component framework
TypeScriptType safety across all components
Tailwind CSS v4Utility-first styling with CSS-first config
Radix UIHeadless accessible primitives
class-variance-authorityType-safe variant system (CVA)
clsx + tailwind-mergeClass merging utilities (cn())