Sensible UI CSS

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

\n \n

See code on Val.Town

\n \n\n

\n\n

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

\n\n

\n This is a paragraph with bold text,{\" \"}\n italic text, and a link.\n

\n\n

\n Here's some inline code and a code block:\n

\n\n

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

\n\n

\n This is a blockquote. It's styled automatically.\n

\n\n

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

\n\n

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

\n\n

Buttons

\n\n

Variants

\n \n \n \n \n \n \n

\n\n

Sizes

\n \n \n \n \n

\n\n

States

\n \n \n

\n\n

As Link

\n Link as Button\n\n

Form elements

Form in a card

\n Email\n \n

\n\n

\n User id (read only)\n \n

\n\n

\n Random disabled input\n \n

\n\n

\n About me\n \n \n

\n\n

\n \n Remember me\n

\n\n

\n \n \n Is this checkbox inside a <label> element?\n \n

\n\n

\n Choose a cardinal direction:\n\n

\n \n North\n

\n\n

\n \n East\n

\n\n

\n \n South\n

\n\n

\n \n West\n

\n\n \n\n \n Switch\n \n \n Switch\n \n\n \n

\n\n

Today is the Lord's day

Fart

I can put whatever info I want in here

\n \n

\n\n

\n Default\n Secondary\n \n Outline\n \n Destructive\n

\n\n

\n This is an `.x-stack`\n

\n New\n

\n\n

\n This is a `.y-stack`\n

\n New\n

\n\n

Spinner

\n All you need to do is add aria-busy=\"true\"{\" \"}\n to any element\n

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

This is a card

All the things and contents in here

\n\n

Item

\n\n

Basic Item

A simple item with title and description.

\n\n \n

\n\n \n \n \n \n

Link Item

Another simple item with title and description.

\n \n \n \n \n

\n \n ,\n );\n});\n\nexport default app.fetch;","deleted","label",[103],"permalink","https://www.val.town/x/cameronpak/sensible-ui/code/main.tsx","extension","actionData","errors"]

Sensible UI CSS

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Buttons

Variants

Sizes

States

As Link

Form elements

\n This is an .x-stack\n

\n This is a .y-stack\n

Spinner

Item

Basic Item

Link Item

\n This is an `.x-stack`\n

\n This is a `.y-stack`\n