[sifreleNet] UI_KITv1.3.0_STABLE
SHOWROOM ONLINE
← back_to_home

// SYSTEM INSTALLATION GUIDE

Cyberpunk UI Kit — 38 components available. Use the CLI to add individual components directly into your project, or set up manually.

Recommended

Method A — CLI (npx / yarn / pnpm / bun)

The CLI copies the component source file directly into your project and automatically installs all required dependencies. No extra wrappers, no hidden packages — just raw, editable code in your codebase.

1. Pick a component
2. Choose your package manager
3. Run this command in your project root
npx sifrelenet-ui-kit add CyberButton
What the CLI does:
›Copies CyberButton.tsx into your components/cyber-ui/ directory
›Resolves and installs all internal component dependencies automatically
›Installs required npm packages (e.g. framer-motion, lucide-react) with your package manager
›The component code is yours — fully editable, no lock-in
4. Import and use
import CyberButton from '@/components/cyber-ui/CyberButton';

export default function Page() {
  return <CyberButton />
}

B //Method B — Manual Setup

If you prefer full control, you can copy component source files manually from the Raw Sourcetab in any component's code viewer and paste them into your project.

  1. 01.Select any component from the sidebar on the left
  2. 02.Click Raw Source tab in the code viewer panel
  3. 03.Click Copy Code and paste it into components/cyber-ui/ComponentName.tsx
  4. 04.Install any peer dependencies listed at the top of the file

C //Required: CSS Variables & Animations

Add the following to your globals.css file. These CSS variables and keyframe animations power the neon glow, scanline sweep, and CRT noise effects used across all components.

globals.css
/* globals.css */
@import 'tailwindcss';

:root {
  --background: #0a0a0a;
  --foreground: var(--neon-green);
  --neon-green: #00ff9f;
  --neon-dim: #00cc7a;
  --surface: #0f0f0f;
  --border: #1a2e1a;
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--neon-green) 13%, transparent);
  border-radius: 2px;
}

/* Cyber animations */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
@keyframes scanline {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}
@keyframes noise {
  0% { background-position: 0 0; }
  50% { background-position: -25% 10%; }
  100% { background-position: 0 0; }
}
.animate-blink { animation: blink 1s step-end infinite; }
.scanline-sweep {
  position: absolute; width: 100%; height: 3px;
  background: linear-gradient(to right, transparent, rgba(0,255,159,0.06), transparent);
  animation: scanline 10s linear infinite;
}
.crt-noise {
  opacity: 0.018;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  animation: noise 0.5s steps(1) infinite;
}

// Ready? Start Browsing

38 components across 4 categories — animations, primitives, advanced controls, and full templates.