My Design System

A robust, framework-agnostic collection of web components built with Stencil.js and styled with Tailwind CSS. Designed for consistency, accessibility, and ease of use across any web project.

Getting Started

Follow these instructions to install and integrate the component library into your project.

Step 1: Install the Package

Install the package from npm using your favorite package manager:

npm install @anis_conceptlz/stencil-dls-test

Step 2: Import the Component Loader

To use the components, you must import the loader in your project's main entry file (e.g., index.js, main.ts). This only needs to be done once.

For Plain HTML

Include the following script tag in your index.html.

<script type="module" src="node_modules/@anis_conceptlz/stencil-dls-test/dist/stencil-dls-test/stencil-dls-test.esm.js"></script>

For JavaScript Frameworks (React, Vue, Angular)

In your main entry file (like src/index.js or src/main.ts), add the following lines:

import { defineCustomElements } from '@anis_conceptlz/stencil-dls-test/loader';

defineCustomElements();

Components

<ds-button>

A versatile button component with support for different styles, sizes, and states.

Usage Examples

Basic Usage

<ds-button>Click Me</ds-button>

Variants Use the variant prop to change the visual style.

<ds-button variant="primary">Primary</ds-button>
<ds-button variant="secondary">Secondary</ds-button>
<ds-button variant="danger">Danger</ds-button>

Sizes Use the size prop to change the button's dimensions.

<ds-button size="small">Small</ds-button>
<ds-button size="medium">Medium</ds-button>
<ds-button size="large">Large</ds-button>

Disabled State Use the disabled prop to prevent user interaction.

<ds-button disabled>Disabled Button</ds-button>

Properties

| Property | Attribute | Description | Type | Default | |------------|------------|------------------------------------|--------------------------------------|-------------| | variant | variant | The visual style of the button. | 'primary' \| 'secondary' \| 'danger' | 'primary' | | size | size | How large the button should be. | 'small' \| 'medium' \| 'large' | 'medium' | | disabled | disabled | If true, the user cannot interact. | boolean | false | | type | type | The native HTML button type. | 'button' \| 'submit' \| 'reset' | 'button' |

Contributing

Contributions are welcome! Once the project is on a version control platform like GitHub, you will be able to open issues or submit pull requests.

License

This project is licensed under the MIT License.