test-lit-ui

v1.6.13

Published

7 months ago

A modern UI component library built with Lit and Vite

0High
0Medium
0Low

canceyd

lit web-components ui-library typescript vite

🎨 Lit UI

A modern, lightweight UI component library built with Lit and Vite. Create beautiful, accessible web components with TypeScript support.

✨ Features

🚀 Modern: Built with Lit 3.0 and latest web standards
📦 Lightweight: Tree-shakeable components with minimal bundle size
🎨 Beautiful: Modern design with smooth animations and hover effects
♿ Accessible: WCAG compliant with proper ARIA attributes
🔧 TypeScript: Full TypeScript support with type definitions
🎯 Framework Agnostic: Works with any framework or vanilla JavaScript
📱 Responsive: Mobile-first design approach

📦 Installation

npm install @your-username/lit-ui

🚀 Quick Start

Import Components

// Import individual components
import '@your-username/lit-ui/dist/index.js';

// Or import specific components
import { LitButton, LitCard, LitInput } from '@your-username/lit-ui';

Use in HTML

<!DOCTYPE html>
<html>
<head>
  <script type="module" src="node_modules/@your-username/lit-ui/dist/index.js"></script>
</head>
<body>
  <lit-button variant="primary">Click me!</lit-button>

  <lit-card>
    <h3 slot="header">Card Title</h3>
    <p slot="content">Card content goes here</p>
    <lit-button slot="footer" variant="outline">Action</lit-button>
  </lit-card>

  <lit-input label="Email" type="email" placeholder="Enter your email"></lit-input>
</body>
</html>

Use with React

import '@your-username/lit-ui';

function App() {
  return (
    <div>
      <lit-button variant="primary" onClick={handleClick}>
        Click me!
      </lit-button>

      <lit-input
        label="Email"
        type="email"
        onLit-input={handleInput}
      />
    </div>
  );
}

Use with Vue

<template>
  <div>
    <lit-button variant="primary" @lit-click="handleClick">
      Click me!
    </lit-button>

    <lit-input
      label="Email"
      type="email"
      @lit-input="handleInput"
    />
  </div>
</template>

<script>
import '@your-username/lit-ui';

export default {
  methods: {
    handleClick(event) {
      console.log('Button clicked!', event.detail);
    },
    handleInput(event) {
      console.log('Input changed:', event.detail.value);
    }
  }
}
</script>

🧩 Components

LitButton

A versatile button component with multiple variants and states.

<lit-button variant="primary" size="medium">Primary Button</lit-button>
<lit-button variant="outline" loading>Loading...</lit-button>
<lit-button variant="danger" disabled>Disabled</lit-button>

Props:

variant: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' (default: 'primary')
size: 'small' | 'medium' | 'large' (default: 'medium')
disabled: boolean (default: false)
loading: boolean (default: false)
type: 'button' | 'submit' | 'reset' (default: 'button')

Events:

lit-click: Fired when button is clicked

LitCard

A flexible card component with header, content, and footer slots.

<lit-card variant="elevated" hoverable>
  <h3 slot="header">Card Title</h3>
  <p slot="content">Card content</p>
  <div slot="footer">
    <lit-button variant="primary">Action</lit-button>
  </div>
</lit-card>

Props:

variant: 'default' | 'elevated' | 'outlined' (default: 'default')
hoverable: boolean (default: false)

Slots:

header: Card header content
content: Main card content (default slot also works)
footer: Card footer content

LitInput

A modern input component with floating labels and validation.

<lit-input
  label="Email Address"
  type="email"
  placeholder="[email protected]"
  required
  error="Please enter a valid email"
></lit-input>

Props:

type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' (default: 'text')
value: string (default: '')
placeholder: string (default: '')
label: string (default: '')
error: string (default: '')
disabled: boolean (default: false)
required: boolean (default: false)
name: string (default: '')

Events:

lit-input: Fired when input value changes
lit-focus: Fired when input gains focus
lit-blur: Fired when input loses focus

🎨 Customization

CSS Custom Properties

You can customize the appearance using CSS custom properties:

:root {
  --focus-color: #3b82f6;
  --primary-color: #1d4ed8;
  --danger-color: #dc2626;
}

Custom Styling

Since these are web components, you can style them using CSS:

lit-button {
  margin: 8px;
}

lit-card {
  max-width: 400px;
}

lit-input {
  width: 100%;
  margin-bottom: 16px;
}

🛠️ Development

Prerequisites

Node.js 18+
npm or yarn

Setup

# Clone the repository
git clone https://github.com/your-username/lit-ui.git
cd lit-ui

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Run tests
npm test

# Lint code
npm run lint

Project Structure

lit-ui/
├── src/
│   ├── components/
│   │   ├── button/
│   │   ├── card/
│   │   └── input/
│   └── index.ts
├── dist/                 # Built files
├── package.json
├── vite.config.ts
├── tsconfig.json
└── README.md

📄 License

MIT License - see LICENSE file for details.

🤝 Contributing

Contributions are welcome! Please read our Contributing Guide for details.

📞 Support

📧 Email: [email protected]
🐛 Issues: GitHub Issues
💬 Discussions: GitHub Discussions

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

🎨 Lit UI

✨ Features

📦 Installation

🚀 Quick Start

Import Components

Use in HTML

Use with React

Use with Vue

🧩 Components

LitButton

LitCard

LitInput

🎨 Customization

CSS Custom Properties

Custom Styling

🛠️ Development

Prerequisites

Setup

Project Structure

📄 License

🤝 Contributing

📞 Support