RaizenUI

Setup Instructions

Welcome to the beta version of RaizenUI — a dark-mode-first,
framework-agnostic UI component library built with custom HTML and JavaScript

Crafted for developers who love clean design and full control, RaizenUI is minimal, flexible, and plug-and-play with any modern frontend stack.

---"Built for the night — because not everything needs to be bright."
---"Dark mode isn’t a theme here — it’s a philosophy."

This is an early beta release. The API, structure, and styles are still evolving. Your feedback and contributions will help shape the future of RaizenUI.

Copy and paste in your html file

 <script type="module" src="https://cdn.jsdelivr.net/npm/raizenui@1.0.6/dist/index.js"></script>

Quickstart: RaizenUI for React

Add polished components to your React app in 30 seconds

1. Installation

npm install raizenui 
import { RzLoginCard } from 'raizenui';
 
function App()  
return <RzLoginCard /> // That's it! 
 }

Buttons

"Built for the night — because not everything needs to be bright."

Primary Secondary Blue
Custom Button Component 
<rz-button variant="primary">Primary</rz-button>
 
<rz-button variant="secondary">Secondary</rz-button>
 
<rz-button variant="blue">Blue</rz-button>

Card

"Good design is as little design as possible."

Login Card Component 
<rz-login-card></rz-login-card>

Our component embodies this philosophy with:

  • Sleek monochrome aesthetics – Pure black background with crisp 1px borders
  • Pixel-perfect spacing – Optimized padding and typography ratios
  • Effortless integration – Works with any framework or vanilla JS
  • Dark-mode ready – Reduced eye strain for extended viewing