Plain HTML · CSS · TypeScript

Build faster with
Basix

A lightweight, framework-free component library. Drop in the CSS, import the modules you need — done.

Get started
$ npm install @dodlhuat/basix
No framework
Works with any stack — or none at all.
CSS custom properties
Theme anything with a handful of variables.
TypeScript
Fully typed modules with clean public APIs.
Accessible
ARIA roles, keyboard nav, and focus management.
Dark mode
Built-in light/dark/system theme support.

Everything you need

40+ components across 6 categories — from basic inputs to rich interactive widgets.

Foundation
Grid, typography, colors, icons, and design tokens.
4 topics
Forms
Inputs, selects, checkboxes, date pickers, file upload, validation.
5 components
Navigation
Push menu, flyout, dropdown, tabs, breadcrumbs.
5 components
Overlays
Modal, popover, tooltip, bottom sheet, toast notifications.
5 components
Components
Buttons, alerts, accordion, table, tree, carousel, charts, and more.
17 components
Utilities
Theme toggle, smooth scroll, context menu.
3 utilities

Quick start

Up and running in three steps.

1
Install npm install @dodlhuat/basix
2
Add the stylesheet <link rel="stylesheet" href="node_modules/@dodlhuat/basix/css/style.css">
3
Import a component import { Popover } from '@dodlhuat/basix/js/popover.js';