@moving-walls/design-system

v1.0.4

Published

6 days ago

A comprehensive React component library and design system with TypeScript support, providing modern UI components, design tokens, and a complete icon system.

Downloads

528

0High
0Medium
0Low

react components design-system ui typescript tailwind icons design-tokens

🎨 MW Design System

A comprehensive React component library and design system built with TypeScript, providing modern UI components, design tokens, and a complete icon system.

📦 Installation

npm install @mw-design/system
# or
yarn add @mw-design/system
# or
pnpm add @mw-design/system

🚀 Quick Start

import { Button, Card, DynamicIcon } from '@mw-design/system'
import '@mw-design/system/dist/styles/globals.css'

function App() {
  return (
    <Card>
      <Button variant="primary">
        <DynamicIcon name="heart" size={16} />
        Get Started
      </Button>
    </Card>
  )
}

📖 Documentation

Visit our live documentation for complete guides, examples, and API references.

🧩 Features

✨ 50+ React Components

Buttons: Primary, secondary, ghost, destructive variants
Forms: Input, textarea, select, checkbox, switch, radio
Data Display: Tables, cards, badges, avatars, tooltips
Navigation: Tabs, breadcrumbs, pagination, steppers
Feedback: Alerts, toasts, modals, progress indicators
Layout: Containers, grids, panels, sidebars

🎯 Icon System

1000+ Lucide Icons: Complete icon library with dynamic loading
DynamicIcon Component: Smart icon loading with fallbacks
Multiple Formats: SVG, React components, and sprite sheets

🎨 Design Tokens

CSS Custom Properties: Dark/light theme support
SCSS Variables: For Sass-based projects
JavaScript Objects: For dynamic styling
JSON Format: For design tools integration

🔧 Developer Experience

TypeScript: Full type safety and IntelliSense
Tree Shaking: Import only what you need
SSR Ready: Next.js, Remix, and other frameworks
Customizable: CSS variables and component props

📱 Component Categories

Core Components

import { 
  Button, Card, Input, Modal, Badge, 
  Alert, Avatar, Checkbox, Switch 
} from '@mw-design/system'

Advanced Components

import { 
  DataGrid, Calendar, FileUpload, 
  RichTextEditor, Carousel, TreeView 
} from '@mw-design/system'

Layout & Navigation

import { 
  Navigation, Sidebar, Tabs, Breadcrumb,
  Pagination, Stepper 
} from '@mw-design/system'

🎨 Design Tokens Usage

CSS Custom Properties

/* Automatically available when importing styles */
.my-component {
  background: var(--color-primary);
  padding: var(--spacing-4);
  border-radius: var(--radius-md);
}

JavaScript/TypeScript

import { tokens } from '@mw-design/system'

const styles = {
  background: tokens.colors.primary[500],
  padding: tokens.spacing[4]
}

SCSS Variables

@import '@mw-design/system/dist/tokens/tokens.scss';

.button {
  background: $primary-500;
  padding: $spacing-4;
}

🎭 Theming

Automatic Dark Mode

// Dark mode activated via system preference or class
<html className="dark">
  <body>
    <App />
  </body>
</html>

Custom Theme Variables

:root {
  --color-primary: #your-brand-color;
  --color-secondary: #your-secondary-color;
}

📁 Bundle Formats

The package provides multiple formats for different use cases:

ESM: @mw-design/system (recommended)
CommonJS: @mw-design/system/dist/index.js
UMD: @mw-design/system/dist/index.umd.js

🔗 CDN Usage

<!-- Include via CDN -->
<link rel="stylesheet" href="https://unpkg.com/@mw-design/system/dist/styles/globals.css">
<script src="https://unpkg.com/@mw-design/system/dist/index.umd.js"></script>

<script>
  const { Button, Card } = MWDesignSystem;
</script>

🛠️ Build Integration

Next.js

// pages/_app.tsx
import '@mw-design/system/dist/styles/globals.css'
import type { AppProps } from 'next/app'

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

Vite/React

// main.tsx
import '@mw-design/system/dist/styles/globals.css'
import { createRoot } from 'react-dom/client'
import App from './App'

createRoot(document.getElementById('root')!).render(<App />)

🔧 Advanced Usage

Tree Shaking

// Import only what you need
import { Button } from '@mw-design/system/dist/components/ui/Button'
import { Card } from '@mw-design/system/dist/components/ui/Card'

Custom Icon Loading

import { DynamicIcon } from '@mw-design/system'

// Icons are loaded dynamically based on name
<DynamicIcon name="shopping-cart" size={24} />
<DynamicIcon name="user-plus" size={16} />

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

📄 License

MIT License - see LICENSE file for details.

🔗 Links

Built with ❤️ for modern React applications