Quick Start

Build Web Components once, use them everywhere.

Install

pnpm add @zeus-js/zeus
pnpm add -D @zeus-js/vite-plugin @zeus-js/output-wc

Create a component

import { defineElement, Host, Slot } from '@zeus-js/zeus'

export interface ButtonProps {
  variant?: 'default' | 'outline'
  disabled?: boolean
}

export const ZButton = defineElement<ButtonProps>(
  'z-button',
  {
    shadow: false,
    props: {
      variant: {
        type: String,
        default: 'default',
        reflect: true,
      },
      disabled: {
        type: Boolean,
        default: false,
        reflect: true,
      },
    },
  },
  props => {
    return (
      <Host
        data-variant={props.variant}
        data-disabled={props.disabled ? '' : undefined}
      >
        <button disabled={props.disabled}>
          <Slot />
        </button>
      </Host>
    )
  },
)

Configure Vite

import { defineConfig } from 'vite'
import zeus from '@zeus-js/vite-plugin/vite'
import wc from '@zeus-js/output-wc/vite'

export default defineConfig({
  plugins: [
    zeus({
      components: {
        include: ['src/components/**/*.{ts,tsx}'],
      },
      outputs: [
        wc({
          outDir: 'dist/wc',
        }),
      ],
    }),
  ],
})

Use it

import './dist/wc/z-button.js'

<z-button variant="outline">Button</z-button>

Next steps

• Web Components — deep dive into defineElement, Host, and Slot
• React — generate React wrappers from the same source
• Vue — generate Vue wrappers
• Registry — use the shadcn-like component registry CLI