Sellmate Design System

A comprehensive web components library built with Stencil for Sellmate.

Installation

npm install @sellmate/design-system

or

yarn add @sellmate/design-system

Quick Start

Lazy Loading (Recommended for most projects)

Include this script in your HTML:

<script type="module" src="https://unpkg.com/@sellmate/design-system"></script>

Then use any component:

<sd-button>Click me</sd-button>

ES Module Import

import '@sellmate/design-system/dist/design-system/design-system.esm.js';

function App() {
  return (
    <sd-button 
      label='Click me' 
      onClick={() => console.log('clicked')}
    >
    </sd-button>
  );
}

export default App;

CommonJS (Node.js)

const { defineCustomElements } = require('@sellmate/design-system/loader');

defineCustomElements();

Available Components

• sd-button - Button component
• sd-input - Input field component
• sd-checkbox - Checkbox component
• sd-select - Select dropdown component
• sd-table - Data table component
• sd-tag - Tag/badge component
• sd-icon - Icon component
• sd-tooltip - Tooltip component
• sd-popover - Popover component
• sd-date-picker - Date picker component
• sd-date-range-picker - Date range picker component
• sd-pagination - Pagination component

Framework Integration

React

Use the React wrapper package for better TypeScript support:

npm install @sellmate/design-system-react

import { SdButton } from '@sellmate/design-system-react';

export function App() {
  return <SdButton>Click me</SdButton>;
}

Vue 3

Use the Vue wrapper package:

npm install @sellmate/design-system-vue

<template>
  <SdButton @click="handleClick">Click me</SdButton>
</template>

<script setup>
import { SdButton } from '@sellmate/design-system-vue';

const handleClick = () => {
  console.log('clicked');
};
</script>

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT