UI Siêu Ngon

UI Siêu Ngon

A lightweight React component library with zero runtime dependencies. Pure CSS design tokens, full TypeScript support, and automatic dark mode.

Zero deps

Only React as a peer dependency

Dark mode

DSNProvider: persists, toggles, syncs Tailwind

TypeScript

Full type definitions included

Installation

npm install dosieungon-ui
yarn add dosieungon-ui
bun add dosieungon-ui

Usage

Import components directly. CSS is injected automatically, no stylesheet import needed.

// 1. Wrap your app root once
import { DSNProvider } from 'dosieungon-ui';

export default function App({ Component, pageProps }) {
  return (
    <DSNProvider>
      <Component {...pageProps} />
    </DSNProvider>
  );
}

// 2. Import and use components anywhere. CSS is injected automatically
import { Button, Input, Modal } from 'dosieungon-ui';

export function MyPage() {
  return <Button variant="primary">Click me</Button>;
}

Components

Button

Trigger actions and events

Card

Container with header/footer support

Chip

Labels, tags and removable items

Input

Text input and textarea fields

Select

Dropdown with search and multi-select

Checkbox

Binary and indeterminate toggles

Radio

Single-choice selection groups

Switch

On/off toggle control

Modal

Dialog overlays with animations

Drawer

Slide-in panels from any edge

DatePicker

Calendar date picker with month and year views

DateTimePicker

Date picker with drum-roll time selector (HH / HH:mm / HH:mm:ss)

TimePicker

Drum-roll time selector without a date (HH / HH:mm / HH:mm:ss)

Table

Data table with sort, fixed columns, scroll, pagination

Breadcrumb

Hierarchical navigation trail showing current location

ColorPicker

Pick solid colors and CSS linear gradients with a visual HSV canvas

InputNumber

Numeric input with currency formatting and spinner controls

Segmented

Single-choice selector with animated sliding indicator

Tooltip

Floating label with 12 placements, hover/click/focus triggers, and custom colors

Popover

Floating card with title header and rich interactive content

Notification

Toast notifications with auto-dismiss, placement, and action support

Popconfirm

Inline confirmation dialog anchored to a trigger element

Skeleton

Animated placeholder blocks while content is loading