Marz UI

Framework-agnostic UI components and design system built with Web Components.

Features

• 🎨 Complete Design System - CSS tokens, typography, and theming
• 🌐 Framework Agnostic - Works with React, Vue, Svelte, Angular, or vanilla JS
• 🎯 Web Components - Standards-based Custom Elements
• 🌓 Dark Mode - Built-in light/dark theme support
• 📦 Zero Dependencies - Pure Web Components, no framework required
• 💪 TypeScript - Full type definitions included

Installation

npm install @marz/ui

Usage

Import All Components

import '@marz/ui';
import '@marz/ui/styles'; // Optional: Import styles separately

Import Individual Components

import '@marz/ui/button';
import '@marz/ui/input';
import '@marz/ui/sidepanel';

Components

Button

A versatile button component with multiple variants and sizes.

<!-- Primary button -->
<marz-button primary label="Click me"></marz-button>

<!-- Secondary button -->
<marz-button label="Cancel"></marz-button>

<!-- Different sizes -->
<marz-button size="small" label="Small"></marz-button>
<marz-button size="medium" label="Medium"></marz-button>
<marz-button size="large" label="Large"></marz-button>

<!-- Custom background color -->
<marz-button background-color="#ff0000" label="Custom"></marz-button>

<!-- No outline -->
<marz-button no-outline label="No Border"></marz-button>

Props:

• primary (boolean) - Primary variant style
• size (string) - Button size: 'small', 'medium', 'large'
• label (string) - Button text
• background-color (string) - Custom background color
• no-outline (boolean) - Remove border
• disabled (boolean) - Disable the button

Events:

• click - Fired when button is clicked

Input

A labeled input component with multiple sizes.

<!-- Basic input -->
<marz-input label="Name" placeholder="Enter your name"></marz-input>

<!-- Different sizes -->
<marz-input size="small" label="Small Input"></marz-input>
<marz-input size="medium" label="Medium Input"></marz-input>
<marz-input size="large" label="Large Input"></marz-input>

<!-- With value -->
<marz-input label="Email" value="[email protected]"></marz-input>

<!-- Different input types -->
<marz-input label="Password" type="password"></marz-input>
<marz-input label="Email" type="email"></marz-input>

Props:

• label (string) - Input label text
• placeholder (string) - Placeholder text
• value (string) - Input value
• size (string) - Input size: 'small', 'medium', 'large'
• type (string) - Input type (text, password, email, etc.)
• disabled (boolean) - Disable the input

Events:

• change - Fired when input value changes (detail: { value })

Sidepanel

A modal sidepanel that slides in from the right.

<marz-sidepanel id="myPanel" title="Settings">
  <div slot="content">
    <marz-input label="Name" placeholder="Your name"></marz-input>
    <marz-input label="Email" placeholder="Your email"></marz-input>
  </div>
  <div slot="actions">
    <marz-button label="Cancel"></marz-button>
    <marz-button primary label="Save"></marz-button>
  </div>
</marz-sidepanel>

<script>
  const panel = document.getElementById('myPanel');

  // Open the panel
  panel.setAttribute('is-open', '');
  // or
  panel.isOpen = true;

  // Close the panel
  panel.removeAttribute('is-open');
  // or
  panel.isOpen = false;
</script>

Props:

• is-open (boolean) - Whether the panel is open
• title (string) - Panel title

Slots:

• content - Main content area
• actions - Action buttons area

Events:

• close - Fired when panel is closed

Framework Integration

React

import '@marz/ui';

function App() {
  const handleClick = () => {
    console.log('Button clicked!');
  };

  const handleChange = (e: CustomEvent) => {
    console.log('Input value:', e.detail.value);
  };

  return (
    <div>
      <marz-button
        primary
        label="Click me"
        onClick={handleClick}
      />

      <marz-input
        label="Name"
        placeholder="Enter name"
        onChange={handleChange}
      />
    </div>
  );
}

Vue

<template>
  <div>
    <marz-button
      primary
      label="Click me"
      @click="handleClick"
    />

    <marz-input
      label="Name"
      placeholder="Enter name"
      @change="handleChange"
    />
  </div>
</template>

<script setup>
import '@marz/ui';

const handleClick = () => {
  console.log('Button clicked!');
};

const handleChange = (e) => {
  console.log('Input value:', e.detail.value);
};
</script>

Svelte

<script>
  import '@marz/ui';

  function handleClick() {
    console.log('Button clicked!');
  }

  function handleChange(e) {
    console.log('Input value:', e.detail.value);
  }
</script>

<marz-button primary label="Click me" on:click={handleClick} />
<marz-input label="Name" placeholder="Enter name" on:change={handleChange} />

Styling

Import Styles

// Import all styles
import '@marz/ui/styles';

// Or import specific style files
import '@marz/ui/styles/tokens';       // CSS variables only
import '@marz/ui/styles/components';   // Component styles only

CSS Variables

Marz UI uses CSS custom properties for theming:

:root {
  /* Colors */
  --bg: #f9fbfd;
  --bg-element: rgba(0, 0, 0, 0.02);
  --bg-element-2: rgba(0, 0, 0, 0.04);
  --text: #3b3b3b;
  --heading: #11324a;
  --primary: #2b2b2b;
  --secondary: #ababab;
  --link: #3773E6;
  --accent: #f7d706;

  /* Spacing */
  --small-padding: 12px;
  --safe-padding: 16px;
  --larger-padding: 24px;
}

Dark Mode

Dark mode is automatically applied based on system preferences, or you can force it with a class:

<body class="dark">
  <!-- Your app -->
</body>

Browser Support

• Chrome/Edge 67+
• Firefox 63+
• Safari 13.1+
• All modern browsers with Web Components support

License

MIT