Web Components UI Library

A modern UI library built with vanilla web components, TypeScript, and Vite.

Installation

npm install wc-npm-starter

Usage

ES Modules

import "wc-npm-starter"

UMD

<script src="https://unpkg.com/wc-npm-starter/dist/wc-ui-library.umd.js"></script>

Components

Button Component

The ds-button component provides a flexible button with multiple variants and configurations.

Basic Usage

<ds-button>Click me</ds-button>

Variants

<ds-button variant="default">Default</ds-button>
<ds-button variant="secondary">Secondary</ds-button>
<ds-button variant="destructive">Destructive</ds-button>
<ds-button variant="outline">Outline</ds-button>
<ds-button variant="ghost">Ghost</ds-button>
<ds-button variant="link">Link</ds-button>

Sizes

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

States

<ds-button disabled>Disabled</ds-button> <ds-button loading>Loading</ds-button>

Link Button

<ds-button linkable href="https://example.com" new-tab>
  External Link
</ds-button>

Icon Only

<ds-button icon-only size="small">
  <svg>...</svg>
</ds-button>

Development

Setup

npm install

Development Server

npm run dev

Build

npm run build

Storybook

npm run storybook

API Reference

Button Props

| Prop | Type | Default | Description | | ------------ | ----------------------------------------------------------------------------- | ----------- | ------------------------ | | variant | 'default' \| 'secondary' \| 'destructive' \| 'outline' \| 'ghost' \| 'link' | 'default' | Button style variant | | size | 'small' \| 'medium' \| 'large' | 'medium' | Button size | | disabled | boolean | false | Disable the button | | loading | boolean | false | Show loading state | | linkable | boolean | false | Render as anchor tag | | href | string | '#' | URL for linkable buttons | | new-tab | boolean | false | Open link in new tab | | icon-only | boolean | false | Button with icon only | | type | 'button' \| 'submit' \| 'reset' | 'button' | Button type | | auto-focus | boolean | false | Auto focus on mount |

TypeScript Support

The library includes full TypeScript support with type definitions:

import { DsButton, ButtonProps } from "wc-npm-starter"

// TypeScript will provide full intellisense
const button = document.createElement("ds-button") as DsButton

Browser Support

• Chrome 67+
• Firefox 63+
• Safari 11.1+
• Edge 79+

License

MIT