simar-ui

Free · Open source · MIT

Controls you can feel.

An accessible UI library, built on native HTML.

Nearly forty components, from knobs and faders to wizards, charts and bottom sheets. Each one is a real element underneath, so it works with the keyboard, with a screen reader, and even without JavaScript. Set options with attributes and drop in two files.

Try the live docs npm install simar-ui Star on GitHub

Live, not a screenshot

This is the real library. Turn the knobs, drag the faders, press the keys, or use the arrow keys.

Output
Faders
Keys
Licence
MITFree for personal and commercial use
Dependencies
NonePlain CSS and one script
Weight
~55 KBGzipped: CSS, script and icons together
Accessibility
WCAG 2.2 AAChecked with axe, the keyboard and contrast tests

How it works

Native underneath. Configured in HTML.

Every control is an <input>, <select>, <button>, <meter> or <dialog>, so forms, labels, validation, focus and screen-reader behavior come from the browser. Where no native element exists, such as tabs, menus and the combobox, it follows the matching WAI-ARIA pattern. The script only adds to that.

Options are attributes, not config objects. Write the native markup, or use a short tag that expands into it.

<!-- short tags... -->
<simar-fader label="Brightness" name="brightness"
  min="0" max="100" value="40" unit="%"></simar-fader>
<simar-knob label="Tone" name="tone" max="3" step="1"
  labels="Flat,Warm,Bright,Punch"></simar-knob>

<!-- ...or the highlight color, on anything -->
<section data-lit="blue">…</section>

  • No framework

    Two files from a CDN, or npm install. Use it in plain HTML or alongside whatever framework you already have.

  • Works without JavaScript

    Knobs and faders fall back to plain range sliders, keys stay buttons, and forms still submit and validate.

  • Tokens all the way down

    Shape, depth, color and type are CSS custom properties. Pick one of nine styles, light or dark, a palette, and one --lit value that recolors every lit part.

  • Responsive

    Mobile first, with breakpoints, a grid and display helpers sized in rem so they follow the reader’s text size. Nothing scrolls sideways at 320 px.

  • Feels like an app

    Optional haptics tick and click on supported phones (Android), and data-haptic tunes or silences them. Toasts open from a button or from script with SimarUI.toast().

The kit

Everything a page needs, in one style.

Content, forms and components share one look and one way of working, and all of them are keyboard-ready. Open the live docs and press HTML under any example to see exactly how it was added. There are also four suggested flows: sign in, checkout, onboarding, and empty and error pages.

  • Forms

    • Form control
    • Select
    • Autocomplete
    • Checks & switches
    • Radios
    • Range pickers
    • Knobs
    • Date range
    • Time picker
    • Search bar
    • Rating
    • Check list
    • Wizard
    • Input group
    • Validation

  • Components

    • Accordion
    • Alerts & toasts
    • App bars
    • Badge
    • Bottom navigation
    • Bottom sheet
    • Breadcrumb
    • Buttons
    • Button group
    • Charts
    • Chips
    • Confirmation dialog
    • Dialog
    • Dropdown menu
    • Floating button
    • Map
    • Meter
    • Pagination
    • Progress
    • Side menu
    • Speed dial
    • Spinners
    • Table
    • Tabs
    • Tooltips

  • Content

    • Avatar
    • Card
    • Carousel & gallery
    • Code
    • Divider
    • Embed
    • Empty state
    • Lists
    • Media
    • Quotes
    • Refreshable list
    • Skeleton
    • Steps
    • Swipe list
    • Tile list
    • Timeline
    • Typography
    • Grid & breakpoints

  • Customize

    • Nine styles
    • Light & dark
    • Six page palettes
    • Highlight colors
    • Button variants
    • Fonts
    • Design tokens

Charts and the map are optional add-ons. Next up: more chart types, popover variants, a tree view and a file dropzone.

Accessibility

Built for everyone to use, and tested that way.

  • Keyboard operable. Every control is reachable, with a visible focus ring in both themes.
  • Real names. Every knob and fader is a real input with a real label, and the library warns you while you build if you forget one.
  • No dragging required. A click on a knob’s ring or a range’s groove sets the value (WCAG 2.5.7).
  • Contrast. Text meets 4.5:1 in light, dark and every highlight preset. Disabled controls are held to it too.
  • Reduced motion and forced colors. Both are respected, and every target is at least 24 by 24 px.
  • Checked across browsers. The full test suite runs in Chrome and Edge, and a smoke test covers Firefox and WebKit.
  • Tab Move between controls
  • ←→ Turn a knob or slide a fader
  • HomeEnd Jump to the minimum or maximum
  • Space Press a key, toggle a switch
  • Esc Close a dialog, menu or calendar

Install

Two lines, or one command.

The script starts itself and adds its own icons. Nothing else is downloaded unless you choose a web font.

01 From a CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/roboteight/simar-ui@1/dist/simar-ui.min.css">
<script src="https://cdn.jsdelivr.net/gh/roboteight/simar-ui@1/dist/simar-ui.min.js" defer></script>

02 Or with npm

npm install simar-ui

// then, in your entry file
import 'simar-ui/css';
import 'simar-ui'; // starts itself

Free, and kept that way

Use it. Change it. Ship it.

simar-ui is public and MIT licensed. If it saves you time, a star on the repo or a sponsorship helps it keep growing.

Open the live docs View on GitHub Sponsor on GitHub Support on Patreon