getting started

Get started

Psyn UI is plain CSS plus a tiny JS file. No build step, no framework, no repo to clone.

1 · Download

One zip with the CSS, JS, icon font, and SVG/PNG icons — drop it into your app.

Download psyn-ui.zip v0.1.1 · 688 KB

Prefer to link straight to a CDN-style copy instead of hosting your own? Point at this site directly:

<link rel="stylesheet" href="https://ui.psyn.app/dist/psyn-ui.css"> <link rel="stylesheet" href="https://ui.psyn.app/dist/icons/psyn-icons.css"> <script defer src="https://ui.psyn.app/dist/psyn-ui.js"></script>

2 · Unzip and include the files

Unzip into your app (e.g. a psyn-ui/ folder) and link it:

<link rel="stylesheet" href="/psyn-ui/psyn-ui.css"> <link rel="stylesheet" href="/psyn-ui/icons/psyn-icons.css"> <script defer src="/psyn-ui/psyn-ui.js"></script>

3 · Use it

Every class is prefixed psy-.

new 
<button class="psy-btn psy-btn-primary">
  <svg class="psy-i"><use href="icons/sprite.svg#download"></use></svg> Download
</button>

Icons — four ways

Same icon, pick what fits.

<!-- sprite (crisp strokes, recommended) --> <svg class="psy-i"><use href="icons/sprite.svg#heart"></use></svg> <!-- icon font (filled glyphs) --> <i class="psy-i psy-i-heart"></i> <!-- standalone svg / png --> <img src="icons/svg/heart.svg" width="24"> <img src="icons/png/heart-32.png" width="32">

Theming

Dark is the default. Opt into light per-document or per-subtree:

<html data-theme="light"> … </html>

Try the toggle in the top-right of this site — it persists your choice.