@fewangsit/wangstencil

⚡ WangStencil — 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:

const preset: ToRawPreset<TabMenuPreset, TabMenuPresetMethodOptions> = {
  root: {
    class: 'overflow-x-auto',
  },
  ...
};

🛠 Getting Started

git clone https://github.com/fewangsit/wangstencil.git
cd wangstencil
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

Avoid using stencil in your component names. Instead, use a namespace relevant to your design system or company, such as:

<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/wangstencil@latest"></script>

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

For direct imports without redirection:

<script type="module" src="https://unpkg.com/wangstencil@0.0.1/dist/wangstencil/wangstencil.esm.js"></script>

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

Import the compiled components into your app:

// main.tsx or equivalent
import 'wangstencil/dist/wangstencil/wangstencil.esm.js';

Then use the components like native HTML elements:

function App() {
  return (
    <div>
      <wang-button label="Stencil + Tailwind FTW"></wang-button>
    </div>
  );
}

3. Standalone Component Import

Make sure you’ve enabled dist-custom-elements in stencil.config.ts. Then you can import individual components directly:

import 'wangstencil/my-component';

📚 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.