@waysnx/ui-kit

Complete WaysNX UI Kit — all 4 packages in one install.

What's Included

• @waysnx/ui-core — Core UI components (Input, Select, Button, DatePicker, etc.)
• @waysnx/ui-form-builder — Schema-driven forms (DynamicForm, FormArray, conditional logic)
• @waysnx/ui-layout — Layout components (Grid, Tabs, Accordion, Wizard, etc.)
• @waysnx/ui-feedback — Feedback & overlay components (Modal, Toast, Drawer, Tooltip, etc.)

Installation

npm install @waysnx/ui-kit react-datepicker

Import CSS

import '@waysnx/ui-core/dist/index.css';
import '@waysnx/ui-form-builder/dist/index.css';
import '@waysnx/ui-layout/dist/styles/index.css';
import '@waysnx/ui-feedback/dist/styles/index.css';
import 'react-datepicker/dist/react-datepicker.css';

Note: CSS must be imported from each package individually — ui-kit is a meta-package that re-exports components but doesn't bundle CSS.

Quick Start

import { Input, Button, DynamicForm } from '@waysnx/ui-kit';
import { Grid, Card } from '@waysnx/ui-kit';
import { ToastProvider, useToast, Modal } from '@waysnx/ui-kit';

All components from all 4 libraries are available from @waysnx/ui-kit.

Theming

All components use CSS variables for theming. Override in your CSS:

:root {
  --wx-color-primary: #2563eb;
  --wx-color-primary-hover: #1d4ed8;
  --wx-color-primary-light: #eff6ff;
  --wx-shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

See the Theming Guide for the full list of 28 variables.

When to Use This Package

✅ Use @waysnx/ui-kit when:

• You want the complete UI toolkit
• You're starting a new project
• You want the simplest installation

❌ Use individual packages when:

• You only need specific libraries
• You want to minimize bundle size

Individual Packages

# Core components only
npm install @waysnx/ui-core react-datepicker

# Core + Schema-driven forms
npm install @waysnx/ui-core @waysnx/ui-form-builder react-datepicker

# Layout components (standalone)
npm install @waysnx/ui-layout

# Feedback & overlay components (standalone)
npm install @waysnx/ui-feedback

Documentation

• @waysnx/ui-core — Core components
• @waysnx/ui-form-builder — Schema-driven forms
• @waysnx/ui-layout — Layout components
• @waysnx/ui-feedback — Feedback components

📖 Live Demo & Installation Guide

Peer Dependencies

• react >= 18
• react-dom >= 18
• react-datepicker ^8.0.0

License

MIT