Reusable, standards-based custom elements for modern web development
A custom element for displaying country flags using ISO 3166-1 alpha-2 country codes. Supports both emoji and SVG rendering with customizable size and styling.
<!-- Basic usage -->
<flag-emoji iso="us"></flag-emoji>
<!-- With custom size -->
<flag-emoji iso="gb" size="64"></flag-emoji>
<!-- Multiple flags -->
<flag-emoji iso="de"></flag-emoji>
<flag-emoji iso="fr"></flag-emoji>
<flag-emoji iso="jp"></flag-emoji><!-- Include from CDN -->
<script src="https://customelements-define.github.io/flag-emoji.js"></script>
<!-- Or use ES modules -->
<script type="module">
import 'https://customelements-define.github.io/flag-emoji.js';
</script>A web component for displaying playing cards with customizable ranks and suits. Perfect for card games, tutorials, or decorative elements. Supports all standard suits (♠ ♥ ♦ ♣) and ranks (A, 2-10, J, Q, K).
<!-- Single card -->
<playing-card rank="A" suit="♠"></playing-card>
<!-- Full hand -->
<playing-card rank="K" suit="♥"></playing-card>
<playing-card rank="Q" suit="♦"></playing-card>
<playing-card rank="J" suit="♣"></playing-card>
<playing-card rank="10" suit="♠"></playing-card><!-- Include from CDN -->
<script src="https://customelements-define.github.io/playing-card.js"></script>
<!-- Or use ES modules -->
<script type="module">
import 'https://customelements-define.github.io/playing-card.js';
</script>A customizable color picker component with support for multiple color formats (hex, RGB, HSL). Features a visual palette, sliders, and text input for precise color selection.
<!-- Basic color picker -->
<color-picker value="#667eea"></color-picker>
<!-- With event listener -->
<color-picker id="myPicker"></color-picker>
<script>
document.getElementById('myPicker')
.addEventListener('change', (e) => {
console.log('Selected color:', e.detail.color);
});
</script><script src="https://customelements-define.github.io/color-picker.js"></script>A flexible progress bar component with smooth animations, customizable colors, and percentage display. Perfect for showing upload progress, loading states, or task completion.
<!-- Basic progress bar -->
<progress-bar value="75" max="100"></progress-bar>
<!-- Animated with color -->
<progress-bar
value="50"
max="100"
color="#667eea"
animated
></progress-bar><script src="https://customelements-define.github.io/progress-bar.js"></script>An accessible modal dialog component with keyboard navigation, focus trapping, and backdrop click-to-close. Follows ARIA best practices for screen reader compatibility.
<!-- Basic modal -->
<modal-dialog id="myModal">
<h2>Modal Title</h2>
<p>Modal content goes here</p>
</modal-dialog>
<!-- Open with button -->
<button onclick="document.getElementById('myModal').open = true">
Open Modal
</button><script src="https://customelements-define.github.io/modal-dialog.js"></script>A fully accessible tabbed interface component with keyboard navigation (arrow keys, Home, End) and ARIA attributes for screen readers.
<tab-container>
<tab-panel label="Overview">
<p>Overview content</p>
</tab-panel>
<tab-panel label="Documentation">
<p>Documentation content</p>
</tab-panel>
<tab-panel label="Examples">
<p>Examples content</p>
</tab-panel>
</tab-container><script src="https://customelements-define.github.io/tab-container.js"></script>Lightweight toast notification component for displaying temporary messages. Supports success, error, warning, and info types with auto-dismiss functionality.
<!-- Success notification -->
<toast-notification
message="Successfully saved!"
type="success"
duration="3000"
></toast-notification>
<!-- Error notification -->
<toast-notification
message="An error occurred"
type="error"
></toast-notification><script src="https://customelements-define.github.io/toast-notification.js"></script>A responsive image carousel with touch/swipe support, navigation arrows, and pagination dots. Supports auto-play and customizable transitions.
<image-carousel autoplay interval="3000">
<img src="image1.jpg" alt="Slide 1">
<img src="image2.jpg" alt="Slide 2">
<img src="image3.jpg" alt="Slide 3">
</image-carousel><script src="https://customelements-define.github.io/image-carousel.js"></script>A lightweight code editor component with syntax highlighting, line numbers, and support for multiple programming languages. Perfect for documentation and interactive coding tutorials.
<code-editor language="javascript" theme="dark">
function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet('World'));
</code-editor><script src="https://customelements-define.github.io/code-editor.js"></script>An accordion component for creating collapsible content sections. Supports single or multiple panels open at once, with smooth animations.
<accordion-panel>
<accordion-item title="What is a Web Component?">
<p>Web Components are reusable custom elements...</p>
</accordion-item>
<accordion-item title="How do I use them?">
<p>Simply include the script and use the custom element...</p>
</accordion-item>
</accordion-panel><script src="https://customelements-define.github.io/accordion-panel.js"></script>An interactive star rating component with hover effects, half-star support, and customizable colors. Perfect for reviews, feedback forms, and ratings display.
<!-- Basic rating -->
<star-rating value="4" max="5"></star-rating>
<!-- Interactive with event listener -->
<star-rating id="myRating" interactive></star-rating>
<script>
document.getElementById('myRating')
.addEventListener('change', (e) => {
console.log('Rating:', e.detail.rating);
});
</script><script src="https://customelements-define.github.io/star-rating.js"></script>An accessible tooltip component with smart positioning, keyboard support, and customizable styling. Automatically adjusts position to stay within viewport.
<!-- Basic tooltip -->
<tooltip-element text="This is helpful information">
Hover over me
</tooltip-element>
<!-- Positioned tooltip -->
<tooltip-element
text="Top tooltip"
position="top"
>
Hover me
</tooltip-element><script src="https://customelements-define.github.io/tooltip-element.js"></script>A versatile avatar component that displays user images with automatic initials fallback. Supports status indicators (online, offline, busy) and customizable sizes.
<!-- With image -->
<user-avatar
src="user.jpg"
name="John Doe"
size="large"
></user-avatar>
<!-- With initials fallback -->
<user-avatar
name="Jane Smith"
status="online"
></user-avatar><script src="https://customelements-define.github.io/user-avatar.js"></script>An accessible date picker component with calendar popup, keyboard navigation, and localization support. Includes min/max date validation and custom date formatting.
<!-- Basic date picker -->
<date-picker value="2024-01-01"></date-picker>
<!-- With min/max dates -->
<date-picker
min="2024-01-01"
max="2024-12-31"
></date-picker><script src="https://customelements-define.github.io/date-picker.js"></script>Try different search terms or clear the search to see all components.