Glitchcn

Getting Started

Hollywood's idea of what a hacker's screen looks like

What is GlitchCN?
A terminal-styled cyberpunk component library for Next.js with scanline effects, glowing borders, and monospace typography.

GlitchCN provides drop-in React components with a distinctive retro-futuristic aesthetic. All components feature:

  • Animated scanline effects
  • Glowing cyan/emerald borders
  • Monospace typography
  • Dark teal backgrounds (#001a1a)
  • Clipped corner styling
Prerequisites

Before installing components, make sure you have:

  • Next.js 14+ project with App Router
  • Tailwind CSS configured
  • TypeScript (recommended)
Step 1: Create components.json
Create this file in your project root
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  },
  "registries": {
    "@glitchcn": "https://glitchcn-ui.vercel.app/r/{name}.json"
  }
}
Step 2: Install Components
Use shadcn CLI with the @glitchcn registry

Install all components:

npx shadcn@latest add @glitchcn/all

Or install individual components:

npx shadcn@latest add @glitchcn/button @glitchcn/card
Step 3: Use Components
Import and use in your app
import { Button } from "@/components/ui/button"

export default function Page() {
  return <Button>Click me</Button>
}
Next Steps

Browse all available components in the sidebar or visit the Components page.

Each component page includes live previews, installation commands, and usage examples.