ds-ui

Vanilla CSS + JS design system. No framework, no build step.

Install

npm install ds-ui

Usage

1. Import all CSS (Vite / webpack / bundler)

import 'ds-ui/css/all.css';

Or import only what you need:

import 'ds-ui/css/tokens.css';
import 'ds-ui/css/button.css';
import 'ds-ui/css/table.css';

2. Import JS utilities

import { showMsg, showNotif, openModal, toggleSelect } from 'ds-ui';

3. CDN (no bundler)

<link rel="stylesheet" href="https://unpkg.com/ds-ui/css/all.css">
<script type="module">
  import { showMsg } from 'https://unpkg.com/ds-ui/index.js';
  window.showMsg = showMsg;
</script>

Components

| Component | CSS file | JS export | |-----------|----------|-----------| | Design Tokens | css/tokens.css | — | | Button | css/button.css | — | | Badge | css/badge.css | — | | Input | css/input.css | — | | Select | css/select.css | toggleSelect, pickOpt, filterOpts, closeAllSelects | | Checkbox / Radio | css/checkbox.css | — | | Card | css/card.css | — | | Table | css/table.css | — | | Pagination | css/pagination.css | createPagination | | Tabs | css/tabs.css | switchTab | | Modal | css/modal.css | openModal, closeModal, closeOnBackdrop | | Message Toast | css/message.css | showMsg | | Notification | css/notification.css | showNotif | | DateTimePicker | css/datepicker.css | dpInit, dpTogglePanel, dpGoToday | | Layout | css/layout.css | — |

Quick Examples

Button

<button class="btn btn-primary btn-size-md">主要操作</button>
<button class="btn btn-ghost btn-size-md">取消</button>
<button class="btn btn-danger-plain btn-size-sm">删除</button>

Sizes: btn-size-sm · btn-size-md · btn-size-lg
Variants: btn-ghost · btn-primary · btn-success · btn-warning · btn-danger · btn-info
Plain: add -plain suffix (e.g. btn-primary-plain)

Message Toast

import { showMsg } from 'ds-ui';

showMsg('success', '保存成功');
showMsg('error', '请求失败，请稍后重试');
showMsg('warning', '库存不足');
showMsg('info', '正在同步...', 5000); // custom duration ms

Modal

<div class="modal-backdrop" id="my-modal" onclick="closeOnBackdrop(event,'my-modal')">
  <div class="modal">
    <div class="modal-header">
      <span class="modal-title">标题</span>
      <button class="modal-close" onclick="closeModal('my-modal')">×</button>
    </div>
    <div class="modal-body">内容</div>
    <div class="modal-footer">
      <button class="btn btn-ghost btn-size-md" onclick="closeModal('my-modal')">取消</button>
      <button class="btn btn-primary btn-size-md">确认</button>
    </div>
  </div>
</div>

import { openModal, closeModal, closeOnBackdrop } from 'ds-ui';
openModal('my-modal');

Select

<div class="select-wrap select-size-md" id="my-select">
  <div class="select-trigger" onclick="toggleSelect('my-select')">
    <span class="select-val ph">请选择</span>
    <svg class="select-arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
      <path d="M4 6l4 4 4-4"/>
    </svg>
  </div>
  <div class="select-dropdown">
    <div class="select-opts">
      <div class="select-opt" onclick="pickOpt('my-select',this,'选项A')">
        <span>选项A</span><span class="select-opt-check">✓</span>
      </div>
    </div>
  </div>
</div>

import { toggleSelect, pickOpt, filterOpts } from 'ds-ui';
window.toggleSelect = toggleSelect;
window.pickOpt = pickOpt;

Tabs

<div id="my-tabs">
  <div class="tabs tabs-line">
    <div class="tab-item active" onclick="switchTab('my-tabs',this,0)">全部</div>
    <div class="tab-item" onclick="switchTab('my-tabs',this,1)">进行中</div>
  </div>
  <div class="tab-panel">全部内容</div>
  <div class="tab-panel" style="display:none">进行中内容</div>
</div>

import { switchTab } from 'ds-ui';
window.switchTab = switchTab;

Pagination

import { createPagination } from 'ds-ui';

const pg = createPagination({
  containerId: 'my-pg',
  prevId: 'pg-prev',
  nextId: 'pg-next',
  total: 10,
  page: 1,
  onChange: (page) => console.log('page =', page),
});

<div class="pagination" id="my-pg">
  <span class="pagination-info">共 100 条</span>
  <button class="page-btn page-btn-prev" id="pg-prev" onclick="pg.changePage(-1)">‹</button>
  <button class="page-btn" data-page="1" onclick="pg.setPage(1)">1</button>
  <button class="page-btn" data-page="2" onclick="pg.setPage(2)">2</button>
  <button class="page-btn page-btn-next" id="pg-next" onclick="pg.changePage(1)">›</button>
</div>

Customise Tokens

Override any token after importing the CSS:

:root {
  --color-primary: #7C3AED;   /* change brand color */
  --radius-md: 14px;           /* rounder cards */
  --shadow-md: 0 2px 8px rgba(0,0,0,.12);
}