Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is a paragraph with bold text, italic text, small text, and a link. You can also have inline code and highlighted text.

This is a blockquote. It can contain multiple paragraphs and is styled with a left border and muted text color.

// Code block example
function greet(name) {
  return `Hello, ${name}!`;
}

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

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

Form Elements

Text Input

Email Input

Password Input

Number Input

Date Input

Time Input

Select Dropdown

Textarea

Range Slider

Checkboxes

Feature A

Feature B

Feature C

Radio Buttons

Option 1

Option 2

Option 3

File Input

Progress

Fieldset Example

First Name

Last Name

Tables

Sample Data Table
Name	Email	Role	Status
John Doe	[email protected]	Developer	Active
Jane Smith	[email protected]	Designer	Active
Bob Johnson	[email protected]	Manager	Away

Details & Summary

What is Restyle?

Restyle is a classless CSS reset that provides sensible defaults for HTML elements. It's designed to be quiet and minimal, letting you build on top of it.

Why use a classless CSS reset?

Classless CSS means you don't need to add classes to every element. Just write semantic HTML and it looks good automatically. This is great for:

Prototypes and MVPs
Markdown content
Quick projects
Design system foundations

How do I customize it?

Use CSS custom properties to customize colors, spacing, typography, and more. Check out the controls in the top-right to see live examples!

:root {
  --color-primary: hsl(280, 80%, 55%);
  --radius-md: 0;
}

Dialog

Native HTML dialog element with backdrop blur.

Byte UI Restyle