⚡ Wangs-UI — Fully Typed, Unstyled Web Components

A fully-typed, design-system-ready component library powered by Stencil, with complete Tailwind CSS compatibility through a well defined preset structure per component.

This system is unstyled by default, but every component comes with a strongly typed preset structure. That means you can style your components entirely through TypeScript using utilities like Tailwind CSS — all with full IntelliSense, type safety, and customization control.

🔧 Features

🧩 Unstyled but Structured: You control the styling — we provide a solid, typed preset structure to help you build fast with confidence. 🎯 Fully Typed Presets: Every component has defined shape and preset options, so you get autocomplete and type checking when styling. 🧠 Powered by Stencil: Use modern standards-based Web Components that work in any major framework or with no framework at all. 🌪 TailwindCSS Compatible: Seamlessly integrate with Tailwind CSS for utility-first styling and Intellisense out of the box.

Here's a sample preset structure for a TabMenu component:

import { definePreset } from '@wangs-ui/themes';

export default definePreset('WANGS-TAB-MENU', {
  root: {
    class: 'overflow-x-auto',
  },
  ...
});

🛠 Getting Started

git clone https://github.com/fewangsit/wangs-ui.git
cd wangs-ui
git remote rm origin
pnpm i
pnpm dev

Start developing your components by editing the files in src/components.

🔧 Available Commands

• pnpm dev: Start the dev server and watch for file changes.
• pnpm build: Build the components for production.
• pnpm test: Run unit tests.

🧱 Naming Components

All components in this library follow a consistent naming convention using the wangs- prefix.

<wangs-button></wangs-button>

📦 Usage in Applications

After building and publishing your package to NPM, you can use it in various environments.

1. Lazy Loading via CDN

Add this to your HTML file:

<script type="module" src="https://unpkg.com/@wangs-ui/core@latest"></script>

<wangs-button label="Click Me"></wangs-button>

For direct imports without redirection:

<script type="module" src="https://unpkg.com/@wangs-ui/[email protected]/dist/wangs-ui/wangs-ui.esm.js"></script>

2. Using in a Framework (React, Vue, etc.)

Import the Wrapper package into your app:

// main.tsx or equivalent
import { WangsButton } '@wangs-ui/react';

Then use the components like native HTML elements:

function App() {
  return (
    <div>
      <WangsButton label="Wangs UI"></WangsButton>
    </div>
  );
}

📚 Documentation & Resources

• Stencil Docs
• Publishing to NPM
• Custom Elements Output

💡 Live Demos

• Lazy Load Demo
• Standalone Import Demo

📝 License

This project is proprietary software. It is not open source and may not be copied, modified, or used without permission.