Self-contained adaptive web components — one file, zero dependencies, place anywhere
<search size="full" theme="dark" variant="rounded" placeholder="Search..." buttons="search,clear"></search>
<contact size="medium" theme="dark" title="Get in Touch"></contact>
<modal size="medium" title="Welcome" content="..." trigger-text="Open Modal"></modal>
<toast position="top-right" theme="dark"></toast>
<scroll animation="fadeUp" threshold="0.1">...</scroll>
<typewriter texts="Hello World!, I'm a developer" speed="60" loop="true"></typewriter>
<counter value="1000" duration="2000" prefix="$" suffix="+"></counter>
<rating value="4" size="32" label="Rate this"></rating>
<progress value="75" label="Bar Progress"></progress>
A collection of self-contained adaptive web components that work on any website with zero dependencies.
Just add the script tag and use the custom element. No configuration needed.
<search size="full"></search>
Yes! All components are open source and free to use.
<accordion><accordion-item title="Question">Answer</accordion-item></accordion>
This is the overview tab. Tabs are self-contained and adaptive.
Configure your preferences here.
<tabs style="pill"><tab label="Overview" icon="home">...</tab></tabs>
<dropdown options='["Option 1", "Option 2"]' placeholder="Select..."></dropdown>
<tooltip text="Tooltip text" position="top"><button>Hover me</button></tooltip>
<spinner type="spinner" size="40" color="#6c63ff"></spinner>
<skeleton type="text" rows="4"></skeleton>
<video src="video.mp4" poster="poster.jpg" theme="dark"></video>
<audio src="audio.mp3" title="My Audio" theme="dark"></audio>
<datepicker placeholder="Select date..." theme="dark" clearable="true"></datepicker>
<pagination total="100" per-page="10" current="3" theme="dark"></pagination>
Self-contained adaptive components
Works anywhere, instantly
Adjusts to any container
<carousel height="300px" autoplay="true"><carousel-item title="Slide">...</carousel-item></carousel>