❤
npm
Sign UpSign In

test-lit-ui
TypeScript icon, indicating that this package has built-in type declarations

1.6.13 • Public • Published

🎨 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="you@example.com"
  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

Readme

Keywords

Package Sidebar

Install

npm i test-lit-ui

Repository

github.com/your-username/lit-ui

Homepage

github.com/your-username/lit-ui#readme

Weekly Downloads

2

Version

1.6.13

License

MIT

Unpacked Size

126 kB

Total Files

34

Last publish

Collaborators

  • canceyd
Try on RunKit
Report malware