@amped17/glint-ui

v1.1.1

Published

a month ago

Glint — modern, minimal Web Components UI library

0High
0Medium
0Low

web-components ui-library components shadow-dom custom-elements ui design-system framework-agnostic typescript zero-dependencies glint

Modern, minimal Web Components UI library built with Shadow DOM

One CSS file. One JS file. Zero dependencies.

Documentation • Components • Quick Start • Installation

🚀 Why Glint?

Glint is a modern, lightweight Web Components UI library built with Shadow DOM. Inspired by shadcn/ui's elegant API and UX, Glint ships as a single JavaScript file and CSS file—no build step required. Perfect for building framework-agnostic UI components that work everywhere.

✨ Key Features

🎯 Zero Dependencies - One CSS file, one JS file. No build step required.
♿ Fully Accessible - Built with ARIA attributes, keyboard navigation, and focus management.
🌙 Dark Mode Ready - System preference detection and manual theme switching out of the box.
🎨 Highly Customizable - CSS custom properties for easy theming and customization.
🎭 Motion Options - Subtle, snappy, or bounce animations. Respects prefers-reduced-motion.
🔒 Shadow DOM - Styles are encapsulated. No CSS conflicts. Works alongside any stylesheet.
📦 Tree Shakeable - Import only what you need (ESM). Shadow DOM encapsulation doesn't prevent tree-shaking of unused component definitions.
🚀 Framework Agnostic - Works with React, Vue, Angular, Svelte, or vanilla JavaScript.
⚙️ TypeScript Ready - Full TypeScript support with comprehensive type definitions.
🎪 50+ Components - Complete component list with forms, navigation, overlays, feedback, and layout components.

🎯 Quick Start

<!DOCTYPE html>
<html lang="en" class="glint">
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@amped17/[email protected]/dist/glint.css" />
</head>
<body>
  <gl-button>Click me</gl-button>
  <script src="https://cdn.jsdelivr.net/npm/@amped17/[email protected]/dist/glint.js"></script>
</body>
</html>

That's it! The defineGlint() function is called automatically and is idempotent (safe to call multiple times).

📦 Installation

npm

npm install @amped17/glint-ui

CDN / Plain HTML

<!-- Recommended: Pin to specific version for stability -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@amped17/[email protected]/dist/glint.css" />
<script src="https://cdn.jsdelivr.net/npm/@amped17/[email protected]/dist/glint.js"></script>

Note: Always pin to a specific version in production. The CDN script automatically calls defineGlint() (idempotent).

ESM

import "@amped17/glint-ui/glint.css";
import { defineGlint } from "@amped17/glint-ui";

defineGlint(); // Idempotent - safe to call multiple times

CommonJS

require("@amped17/glint-ui/glint.css");
const { defineGlint } = require("@amped17/glint-ui");

defineGlint(); // Idempotent - safe to call multiple times

📊 Browser Support

Glint works in all modern browsers that support Web Components (Custom Elements v1) and Shadow DOM v1.

Supported browsers:

Chrome/Edge 67+
Firefox 63+
Safari 10.1+
Opera 54+

Note: Glint requires CSS Custom Properties support, which is available in all modern browsers listed above.

🎨 Theming & Customization

Glint uses CSS custom properties for easy theming. Set theme on any container:

<html class="glint" data-glint-theme="dark">

Supported themes:

data-glint-theme="light" - Light mode
data-glint-theme="dark" - Dark mode
data-glint-theme="system" - Follows system preference

Override design tokens:

:root {
  --gl-primary: #693B93;
  --gl-radius: 16px;
  --gl-space-4: 20px;
}

🎭 Motion & Animations

Most components support customizable motion:

<gl-button motion="subtle">Subtle</gl-button>
<gl-button motion="snappy">Snappy</gl-button>
<gl-button motion="bounce">Bounce</gl-button>
<gl-button motion="none">No animation</gl-button>

Glint automatically respects prefers-reduced-motion for accessibility.

🎪 Components

Form Controls

Button - Multiple variants, sizes, and motion options
Input - Text input with validation states
Textarea - Multi-line text input
Select - Dropdown select with options
Checkbox - Selection checkbox
Radio - Radio button groups
Switch - Toggle switch
Slider - Range input with keyboard support
Date Picker - Calendar-based date selection with range support (advanced)
Time Picker - Time selection input with custom picker UI
Color Picker - Color selection with hex/rgb/hsl support
File Upload - Drag & drop file upload with preview and validation
Search Input - Search input with autocomplete suggestions
Tag Input - Multi-tag input with add/remove functionality
Rating - Star rating component with keyboard navigation
Form - Form wrapper with validation and submission handling

Layout & Navigation

Card - Container with header, body, footer slots
Navbar - Navigation bar with brand, nav links, and actions
Topbar - Top bar with left, center, right slots
Tabs - Tabbed interface with keyboard navigation
Accordion - Collapsible content panels
Breadcrumb - Navigation trail
Pagination - Page navigation controls
Stepper - Step-by-step wizard component with navigation
Menu - Context menu with keyboard navigation
Command Palette - Command palette with search and keyboard shortcuts (advanced)
Split Pane - Resizable split pane layout
Stack - Flexbox and Grid layout component
Container - Responsive container component

Overlays & Modals

Modal - Dialog with focus trap and backdrop
Drawer - Slide-out drawer component with backdrop and multiple positions
Sidebar - Slide-out panel
Popover - Positioned popup with rich content
Tooltip - Hover/focus tooltip
Dropdown - Menu dropdown

Feedback & Display

Alert - Alert messages with variants
Toast - Notification toasts with auto-dismiss
Progress - Progress bar with animation
Spinner - Loading spinner
Badge - Status indicator
Avatar - User avatar with status
Skeleton - Loading placeholders
Divider - Horizontal and vertical dividers

Code & Data

Codeblock - Syntax-highlighted code blocks with copy
Table - Data tables with variants
Link - Styled link component with variants

📚 Documentation

Full Component Documentation

Visit our component gallery for complete documentation, examples, and API reference.

Key Concepts

Effects & Surfaces

<!-- Glassmorphism effect -->
<gl-card surface="glass">...</gl-card>

<!-- 3D tilt effect on hover -->
<gl-card effect="tilt" motion="snappy">...</gl-card>

<!-- Both effects -->
<gl-card surface="glass" effect="tilt">...</gl-card>

Component Triggers

Auto-wire buttons to open/close components without JavaScript:

<gl-button trigger="modal:myModal">Open Modal</gl-button>
<gl-button trigger="sidebar:mySidebar">Open Sidebar</gl-button>
<gl-button trigger="drawer:myDrawer">Open Drawer</gl-button>
<gl-button trigger="toast" toast-title="Success!" toast-description="Action completed">Show Toast</gl-button>
<gl-button trigger="close:myModal">Close</gl-button>

Gradient Text

<h1 class="gl-gradient-text" data-animate="true">Animated Gradient</h1>

🌟 Use Cases

Dashboard & Admin Panels - Complete admin interfaces with command palettes, data tables, navigation, and modals
Form Heavy Applications - Beautiful, accessible forms with validation, date/time pickers, file uploads, and multi-step wizards
Marketing Websites - Stunning landing pages with glassmorphism effects and smooth animations
Design Systems - Customizable foundation for building your own design system
Framework-Agnostic Projects - Works seamlessly with React, Vue, Angular, Svelte, or vanilla JavaScript

🔧 Framework Integration

React

import { useEffect } from 'react';
import '@amped17/glint-ui/glint.css';
import { defineGlint } from '@amped17/glint-ui';

function App() {
  useEffect(() => {
    defineGlint();
  }, []);

  return <gl-button>Click me</gl-button>;
}

Vue

<template>
  <gl-button>Click me</gl-button>
</template>

<script setup>
import '@amped17/glint-ui/glint.css';
import { defineGlint } from '@amped17/glint-ui';

defineGlint();
</script>

Angular

import { Component, OnInit } from '@angular/core';
import '@amped17/glint-ui/glint.css';
import { defineGlint } from '@amped17/glint-ui';

@Component({
  selector: 'app-root',
  template: '<gl-button>Click me</gl-button>'
})
export class AppComponent implements OnInit {
  ngOnInit() {
    defineGlint();
  }
}

🛠️ Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Lint code
npm run lint

# Format code
npm run format:write

Examples

After building, open:

examples/index.html - Marketing homepage
examples/components.html - Component gallery and documentation

📊 Browser Support

Glint works in all modern browsers that support Web Components (Custom Elements v1) and Shadow DOM v1.

Supported browsers:

Chrome/Edge 67+
Firefox 63+
Safari 10.1+
Opera 54+

Note: Glint requires CSS Custom Properties support, which is available in all modern browsers listed above.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🔄 Comparison

Glint vs Other Libraries

| Feature | Glint | shadcn/ui | Radix UI | Shoelace | |---------|-------|-----------|----------|----------| | Framework | Web Components | React | React | Web Components | | Shadow DOM | ✅ Yes | ❌ No | ❌ No | ✅ Yes | | Zero Dependencies | ✅ Yes | ⚠️ React required | ⚠️ React required | ✅ Yes | | Framework Agnostic | ✅ Yes | ❌ React only | ❌ React only | ✅ Yes | | Build Step Required | ❌ No | ✅ Yes | ✅ Yes | ❌ No | | TypeScript | ✅ Yes | ✅ Yes | ✅ Yes | ✅ Yes | | Tree Shakeable | ✅ Yes (ESM) | ✅ Yes | ✅ Yes | ✅ Yes |

When to choose Glint:

You need framework-agnostic components
You want zero dependencies and no build step
You're building with vanilla JavaScript or multiple frameworks
You need Shadow DOM encapsulation for style isolation

🙏 Acknowledgments

Inspired by shadcn/ui structure, API, and UX
Built with modern web standards and best practices

Made with ❤️ by Amped

⭐ Star on GitHub • 📖 Documentation • 🐛 Report Bug • 💡 Request Feature

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

🚀 Why Glint?

✨ Key Features

🎯 Quick Start

📦 Installation

npm

CDN / Plain HTML

ESM

CommonJS

📊 Browser Support

🎨 Theming & Customization

🎭 Motion & Animations

🎪 Components

Form Controls

Layout & Navigation

Overlays & Modals

Feedback & Display

Code & Data

📚 Documentation

Full Component Documentation

Key Concepts

Effects & Surfaces

Component Triggers

Gradient Text

🌟 Use Cases

🔧 Framework Integration

React

Vue

Angular

🛠️ Development

Examples

📊 Browser Support

🤝 Contributing

📄 License

🔄 Comparison

Glint vs Other Libraries

🙏 Acknowledgments