// 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

📧 Email: your.email@example.com
🐛 Issues: GitHub Issues
💬 Discussions: GitHub Discussions

Keywords

FAQs

What is @canceyd/simple-ds?

Is @canceyd/simple-ds well maintained?

Package last updated on 20 Jun 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@canceyd/simple-ds

🎨 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

Keywords

Related posts

Node.js Drops Bug Bounty Rewards After Funding Dries Up

The Hidden Blast Radius of the Axios Compromise