Semantics UI CSS

Imagining Shadcn UI styles by default via a semantic CSS ui library

See code on Val.Town

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.
  1. Ordered list item 1
  2. Ordered list item 2
  3. Ordered list item 3

Buttons

Variants

Sizes

States

As Link

Link as Button

Form elements

Form in a card

Choose a cardinal direction:

Today is the Lord's day

Fart

I can put whatever info I want in here
DefaultSecondaryOutlineDestructive

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.