Sensible UI CSS

A semantic-ish CSS component library in the likeness of Shadcn UI, without the front-end framework overhead.

• Styles native HTML elements by default, like typography elements, buttons, inputs, anchor tags, etc.
• Want components like cards, items, loading-spinners, etc.? Then we use data attributes, classes, and aria attributes.

Try Sensible UI Now!

@import 'https://cdn.jsdelivr.net/npm/@faith-tools/sensible-ui@latest/dist/sensible-ui.min.css';

<link href="https://cdn.jsdelivr.net/npm/@faith-tools/sensible-ui@latest/dist/sensible-ui.min.css" type="text/css" rel="stylesheet">

Features

• Semantic HTML (as much as possible): Native elements like <button>, <input>, <h1> are styled automatically
• Lightweight: Just CSS, zero framework dependencies
• Accessible: Semantic HTML and ARIA roles baked in
• Dark mode ready: Built-in dark theme support
• Easy customization: Override a handful of CSS variables to theme everything
• Free and open source: MIT licensed

Components

• Accordion
• Badge
• Button
• Image
• Input
• Item
• Loading Spinner
• Table
• Typography
• More to be thought out soon...

Development

bun install
bun dev

Attributions

Note

This project is a fork of Basecoat by Ronan Berder (hunvreus), originally a vanilla CSS/JS port of shadcn/ui. This fork reimagines Basecoat as a semantic CSS library — styling native HTML elements directly instead of using utility classes.

SVG's come from Lucide.dev

License

MIT