@kdsui/components

React component library built with Radix UI primitives and Tailwind CSS.

29 accessible, typed components: buttons, inputs, modals, pagination, radio groups, selects, tabs, tooltips, and more.

Installation

npm install @kdsui/components

Peer dependencies (required):

npm install react react-dom

Usage

import { AppButton, AppInput, AppModal } from "@kdsui/components";
import "@kdsui/components/styles";

export function MyForm() {
  return (
    <div>
      <AppInput label="Email" placeholder="[email protected]" fullWidth />
      <AppButton variant="primary" usage="cta">
        Submit
      </AppButton>
    </div>
  );
}

Components

| Category | Components | | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Actions | AppButton | | Form | AppInput, AppTextarea, AppSelect, AppCheckbox, AppCheckboxGroup, AppRadio, AppRadioGroup, AppSwitch, AppQuantityInput, AppTagInput, AppUpload | | Display | AppBadge, AppTag, AppTable, AppTabs, AppPagination, AppSeparator | | Feedback | AppMessage, AppCallout, AppModal, AppTooltip, AppLoadingIcon | | Branding | AppIcon (571 icons), AppIconWallet, AppLabel |

Development

# Storybook dev server (port 6006)
npm run dev

# Build library
npm run build

# Run tests
npm run test
npm run test:watch
npm run test:coverage

# Lint & format
npm run lint
npm run lintfix
npm run lint:prettier

# Type check
npm run typecheck

Node version: 20.20.0 (Volta-managed)

Tech Stack

| Tool | Purpose | | ----------------- | ------------------------------------------------------------------------------ | | React 18/19 | UI framework | | TypeScript | Type safety | | Radix UI | Accessible primitives (checkbox, dialog, radio, select, switch, tabs, tooltip) | | Tailwind CSS | Styling | | Vite | Build (ES module output) | | Storybook | Component documentation | | Vitest | Unit tests | | ESLint + Prettier | Code quality |

Conventions

• Conventional commits enforced via Husky + Commitlint
• Lint-staged runs ESLint + Prettier on pre-commit
• Semantic versioning via semantic-release (automated on main branch)

Commit format

type(scope): description

# Examples:
feat(pagination): add previousLabel/nextLabel props
fix(button): prevent fullWidth stretch in flex containers
docs: update README

Types: feat (minor), fix (patch), docs, style, refactor, test, chore.

Build Output

• ES module (dist/index.js)
• Type declarations (dist/types/)
• Bundled CSS (no code split)

License

MIT