minilive-components
v0.0.1
Published
HTML component library with CSS themes and JavaScript component generators
Maintainers
tluybenReadme
minilive-components
A lightweight HTML component library with CSS themes and JavaScript component generators. Generate semantic HTML with proper styling without the complexity of a full framework.
Installation
npm install minilive-componentsQuick Start
Method 1: Using Component Functions
import { button, card } from "minilive-components";
// Generate HTML
const myButton = button({
text: "Click me",
variant: "primary",
size: "lg",
});
const myCard = card({
title: "Hello World",
content: "<p>This is my card content</p>",
});Method 2: Using Transform (Recommended)
import { transform } from "minilive-components";
// Write HTML with component tags
const html = transform(`
<div>
<button variant="primary" size="lg">Click me</button>
<card title="Hello World">
<p>This is my card content</p>
</card>
</div>
`);Features
- 🎨 Multiple Themes - 8 built-in color themes
- 🧩 52 Components - Buttons, cards, forms, dialogs, and more
- 📦 Zero Dependencies - Pure HTML generation
- 🎯 Type-Safe Options - Clear component APIs
- ♿ Accessible - ARIA attributes included
- 🚀 Lightweight - No JavaScript framework required
- ✨ Transform Function - Write component tags in HTML
Express Integration
import express from "express";
import path from "path";
import { transform } from "minilive-components";
const app = express();
// Serve CSS files
app.use(
"/css",
express.static(
path.join(__dirname, "node_modules/minilive-components/dist/css")
)
);
// Use in routes with transform
app.get("/", (req, res) => {
const html = `
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/css/themes/theme-default.css">
</head>
<body>
${transform(`
<div class="container mx-auto p-8">
<card title="Welcome">
<p>Welcome to our site!</p>
<button variant="primary">Get Started</button>
</card>
</div>
`)}
</body>
</html>
`;
res.send(html);
});Documentation
- components.md - Complete documentation of all components and their options
- tags.md - Guide to using component tags with the transform function
License
MIT