How to install

Simply add this to your head tag in your HTML

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

Instructions on how to use this with Tailwind CSS and shadcn/ui CSS themes coming soon!

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is a paragraph with bold text, italic text, and a link.

Here's some inline code and a code block:

console.log('Hello, World!');

This is a blockquote. It's styled automatically.

Unordered list item 1
Unordered list item 2
Unordered list item 3

Ordered list item 1
Ordered list item 2
Ordered list item 3

Buttons

Variants

Sizes

States

As Link

Link as Button

Form elements

Form in a card

Email

User id (read only)

Random disabled input

About me

Remember me

Is this checkbox inside a <label> element?

Choose a cardinal direction:

North

East

South

West

Switch Switch

Card

Today is the Lord's day

Fart

I can put whatever info I want in here

Badge

Default Secondary Outline Destructive

Stacks (helper classes)

This is an `.x-stack`

New

This is a `.y-stack`

New

Spinner

All you need to do is add aria-busy="true" to any element

And, if you want an overlay, you'll need to also add data-variant="overlay"

This is a card

All the things and contents in here

Item

Basic Item

A simple item with title and description.

Link Item

Another simple item with title and description.

Accordion

What is an accordion?

All I know is that it plays music...

What is Sensible UI?

Think "shadcn/ui" as a semantic CSS library. We are a fork of BasecoatCSS and influenced by Oat

Can you have a connected accordion?

Yep!

Who lives in a pineapple under the sea?

I'm afraid that's copyrighted.

Sensible UI