Installation
Get started any way you want
Install it from npm, drop in a CDN link, or copy the quick-start markup straight into a page. Every component is plain HTML and CSS classes — there's nothing to configure.
npm install @flickui/cssimport '@flickui/css/css/min';
import '@flickui/css'; // auto-initializes on DOMContentLoaded<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@flickui/css/dist/flickui.min.css">
<script src="https://cdn.jsdelivr.net/npm/@flickui/css/dist/flickui.min.js" defer></script><button type="button" class="btn btn-primary btn-filled btn-md toggle-target"
aria-controls="hello">
<span class="btn-label">Open modal</span>
</button>
<dialog class="modal" id="hello" aria-labelledby="hello-title">
<div class="modal-panel">
<header class="modal-header">
<h2 class="modal-title" id="hello-title">Hello!</h2>
<button type="button" class="modal-close action-close" aria-label="Close">✕</button>
</header>
<div class="modal-body"><p>This is FlickUI.</p></div>
</div>
</dialog>Plain HTML
Drop the two files into any page and start writing markup — no build step, no framework runtime.
Vite / bundler
Import the CSS and JS as modules, call FlickUI.init() after your app mounts new markup client-side.
React / any framework
Render real FlickUI markup as JSX/templates — the class vocabulary is the only API surface.