제가 9개의 내장 테마가 있는 zero-dependency CSS 라이브러리를 만들었습니다 — 그 이유는
Source: Dev.to
올해 열 번째 랜딩 페이지를 만들고 있었습니다.
똑같은 루틴: 새 프로젝트를 열고, 이전 프로젝트에서 버튼 스타일을 복사하고, 카드 CSS를 붙여넣고, 색상을 조정하고, Bootstrap의 고정관념적인 기본값과 싸우거나, 중앙에 배치된 히어로 섹션을 만들기 위해 Tailwind 설정에 40 분을 투자합니다.
어느 순간 스스로에게 물었습니다:
왜 어떤 프로젝트에든 넣어 바로 시작할 수 있는 단일 파일이 없을까?
그 질문은 6개월 간의 작업으로 이어졌고, 결과는 njX UI — 랜딩 페이지 전용으로 만든 순수‑CSS 컴포넌트 라이브러리입니다.
기존 옵션들의 문제점
다른 라이브러리를 또 만들고 싶지는 않았습니다. 정말로 기존에 있는 것을 사용해 보려 했죠:
| 라이브러리 | 장점 | 단점 |
|---|---|---|
| Bootstrap | 대시보드와 관리자 패널에 좋음. | 무겁고(~200 KB) 의견이 강하게 들어가 있어, 크게 커스터마이징하지 않으면 모든 사이트가 똑같아 보임. |
| Tailwind CSS | 매우 유연하고, 개인적으로도 마음에 듦. | 빌드 단계, PostCSS, 설정 파일이 필요하고 HTML 안에 CSS를 작성하게 됨 – 빠른 랜딩 페이지 제작에 부담이 됨. |
| shadcn/ui, Radix 등 | 강력한 컴포넌트 컬렉션. | React(또는 다른 프레임워크)가 필요함. 항상 선택 가능한 옵션은 아님. |
실제로 원했던 것
<script>태그 하나만 있으면 끝.- 바로 사용해도 멋진 프리빌트 컴포넌트.
- 하나의 속성만 바꿔서 전환할 수 있는 여러 테마.
- 순수 HTML — 프레임워크도, 빌드 단계도, npm도 필요 없음.
그래서 직접 만들었습니다.
njX UI란?
njX UI는 ~40 KB 압축된 CSS 컴포넌트 라이브러리이며 25개 이상의 컴포넌트와 9개의 내장 색상 테마를 제공합니다.
페이지에 포함하기
컴포넌트 사용하기
Get Started
Learn More그게 전부입니다. 설정 없이, 빌드 단계 없이, 스타일링에 JavaScript가 필요하지 않습니다.
9가지 테마, 하나의 속성
라이브러리의 모든 색상은 CSS 커스텀‑프로퍼티 토큰입니다. 테마를 전환하는 것은 문자 그대로 하나의 HTML 속성입니다:
사용 가능한 테마: dark, light, red, blue, green, cyan, yellow, pink, purple.
버튼, 카드, 폼, 알림 등 모든 컴포넌트가 자동으로 업데이트됩니다.
실시간 데모: 상단 바의 색상 점을 클릭하면 9가지 테마를 모두 확인할 수 있습니다.
What’s Included
25+ Components
| Category | Components |
|---|---|
| Layout | Sections, Hero, Grid, Container |
| UI | Buttons (50+ variants), Cards, Badges, Tags |
| Forms | Input, Select, Checkbox, Radio, Switch |
| Feedback | Notifications, Toast, Modals, Popups |
| Navigation | Tabs, Sidebar/Drawer (6 variants) |
| Data | Tables, Skeleton loaders |
| Effects | 15+ CSS animations, 40+ hover effects |
| Gradients | 50+ gradient classes (bg, text, border, animated) |
Built‑In Utilities
- 12개의 폰트 프리셋이 포함된 Typography scale.
- Spacing system.
- 모든 의미 상태(
primary,accent,success,error,warning)를 위한 Color tokens. - 기본 제공 Dark/light mode.
Real‑World Usage: A Hero Section in 5 Minutes
New · v1.0.7
Build landing pages
10x faster
Zero dependencies. One link tag. 25+ components, 9 themes,
full CSS variable control.
Get Started
View Docs →
“에서 data‑theme 속성을 변경하면 전체 페이지가 즉시 색상이 바뀝니다.
선택적 테마 스위처 (≈10 줄의 바닐라 JS)
function setTheme(theme) {
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('njx-theme', theme);
}
// Restore saved theme on page load
const saved = localStorage.getItem('njx-theme');
if (saved) document.documentElement.setAttribute('data-theme', saved);라이브러리도, 프레임워크도, 빌드 단계도 없이—그냥 순수 JavaScript 열 줄입니다.
버튼 — 모든 프로젝트에 버튼이 필요하기 때문
버튼 컬렉션은 가장 완전한 섹션 중 하나로, 50+ 변형이 btn-xs부터 btn-2xl까지, solid / outline / ghost / gradient / glow / animated / icon / group / loading 상태를 포함합니다. 모든 것이 단일 클래스 하나로 제어됩니다.
애니메이션 및 호버 효과
40개 이상의 호버 효과와 15개 이상의 CSS 애니메이션 — 모두 단일‑클래스 유틸리티이며, JavaScript가 필요 없습니다:
lifts on hover
glows on hover
3D tilt on hover
floating animation
pulsing animation
shimmer animationHow It’s Installed
Via CDN (no install)
Just add the “ tag and start using the classes.
njX UI – the “drop‑in” CSS library that lets you build landing pages 10× faster.
npm을 통해
npm install njx-ui현재 상태 및 향후 계획
The library is at v1.0.7 and actively developed.
안정적인 부분
- 25개 이상의 모든 컴포넌트
- 전체 9‑theme 시스템
- 6가지 변형을 갖춘 Sidebar/Drawer 및 전체 JS API
- Animation 및 hover 유틸리티
예정된 기능
- Dark/light 토글 컴포넌트 (이미 문서에 포함)
- 더 많은 레이아웃 프리미티브
- 검색 기능이 포함된 개선된 문서
왜 오픈 소스인가
나는 이 라이브러리를 클라이언트 프로젝트에서 사용한다. 오픈 소스로 만든다는 것은 다음을 의미한다:
- 코드를 깔끔하고 문서화된 상태로 유지할 수밖에 없다
- 다른 개발자들이 내가 놓친 버그를 찾아낼 수 있다
- 만약 한 사람이 같은 버튼을 열 번째로 다시 작성하는 일을 건너뛸 수 있다면, 그 자체만으로도 충분히 가치가 있다
링크
🚀 실시간 데모:
★ GitHub:
📦 npm:
- 📖 Docs: 전체 컴포넌트 레퍼런스는 위의 실시간 데모 링크에서 확인하세요
당신의 의견을 듣고 싶어요 — 특히 프로젝트에 적용해 보셨다면요. 다음에 추가되었으면 하는 컴포넌트는 무엇인가요?