@canceyd/wc-ui-library

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