<div>
<button>Primary Action</button>
<button>Secondary Action</button>
<button>Tertiary Action</button>
</div>Components Library
All NoCSS components with live code examples. No classes, just semantic HTML.
Forms
Semantic forms with automatic styling. No classes needed.
<form>
<label>
Name
<input type="text" placeholder="Enter your name" required>
</label>
<label>
Email
<input type="email" placeholder="your@email.com" required>
</label>
<label>
Message
<textarea rows="4" placeholder="Your message here..."></textarea>
</label>
<label>
<input type="checkbox" required>
I agree to the terms
</label>
<div>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</div>
</form>Tables
Responsive tables with zebra striping and hover effects.
| Name | Role | Status | Actions |
|---|---|---|---|
| John Doe | Developer | Active | |
| Jane Smith | Designer | Active | |
| Bob Johnson | Manager | Away |
<table>
<thead>
<tr>
<th>Name</th>
<th>Role</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>Developer</td>
<td>Active</td>
<td><button>Edit</button></td>
</tr>
</tbody>
</table>Tabs
Chrome-style tabs with automatic styling and JavaScript behavior.
Home Content
This is the home tab content.
<div data-tabs>
<nav>
<a href="#tab1" aria-selected="true">Home</a>
<a href="#tab2">Profile</a>
<a href="#tab3">Settings</a>
</nav>
<div>
<div data-tab="tab1">Home Content</div>
<div data-tab="tab2" style="display: none;">Profile Content</div>
<div data-tab="tab3" style="display: none;">Settings Content</div>
</div>
</div>Modals
Accessible modal dialogs with backdrop.
<button data-modal-trigger="example-modal">Open Modal</button>
<dialog id="example-modal">
<header>
<h3>Example Modal</h3>
<button data-modal-close>×</button>
</header>
<article>
<p>Modal content</p>
</article>
<footer>
<button data-modal-close>Cancel</button>
<button>Confirm</button>
</footer>
</dialog>Cards
Article elements automatically become cards.
Card Title
Subtitle or metadata
Card content goes here. Articles are automatically styled as cards with padding, borders, and shadows.
Another Card
Multiple articles side by side create a card grid.
<div>
<article>
<header>
<h3>Card Title</h3>
<p>Subtitle</p>
</header>
<p>Card content</p>
<footer>
<button>Action</button>
</footer>
</article>
</div>Cards with Images
Seaside Villa 4
Malibu, California
Beautiful villa with ocean views and modern amenities.
Urban Loft
Tebet, Indonesia
Spacious loft in the heart of the city.
Stat Cards
Total Revenue
$52,930
Closed Deals
142
Active Users
8,245
Cards with Badges
Messages 4
You have unread messages waiting for your attention.
Notifications 12
Recent activity from your team members.
Message List with Avatars
Messages
-
4
Sarah Jenkins
Pricing inquiry regarding the loft...
-
2
Marcus Chen
Great idea! I'll send the docs over.
-
Elara Vance
Thanks, I appreciate the update!
Typography
Beautiful typography with semantic HTML.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
This is a paragraph with bold text, italic text, and a link.
This is a blockquote. It's automatically styled with a left border and italic text.
- Unordered list item 1
- Unordered list item 2
- Unordered list item 3
- Ordered list item 1
- Ordered list item 2
- Ordered list item 3
<h1>Heading 1</h1>
<p>Paragraph with <strong>bold</strong> and <em>italic</em></p>
<blockquote>Quote</blockquote>
<ul>
<li>List item</li>
</ul>Code & Syntax Highlighting
Automatic syntax highlighting with data-lang attribute.
// JavaScript example
const greeting = 'Hello, NoCSS!';
function sayHello(name) {
return `${greeting} Welcome, ${name}!`;
}
console.log(sayHello('Developer'));CSS Syntax
/* CSS example */
nav {
display: flex;
align-items: center;
gap: var(--space-4);
background-color: var(--color-background);
}
nav a:hover {
color: var(--color-primary-600);
}Containers
Responsive containers and grid layouts.
Column 1
Column 2
Column 3
<div>
<div><p>Column 1</p></div>
<div><p>Column 2</p></div>
<div><p>Column 3</p></div>
</div>Alerts
Alert messages and notifications using div with role="alert" and data-type attributes.
Success! Your changes have been saved.
Error! Something went wrong. Please try again.
Warning! This action cannot be undone.
Info: You have 3 unread messages.
<div role="alert" data-type="success">
<strong>Success!</strong> Your changes have been saved.
</div>
<div role="alert" data-type="error">
<strong>Error!</strong> Something went wrong.
</div>
<div role="alert" data-type="warning">
<strong>Warning!</strong> This action cannot be undone.
</div>
<div role="alert" data-type="info">
<strong>Info:</strong> You have 3 unread messages.
</div>Accordions
Expandable sections using details/summary elements for FAQs and collapsible content.
Click to expand
This content is hidden by default and revealed when you click the summary.
Perfect for FAQs or collapsible content sections.
This one is open by default
You can use the 'open' attribute to show content by default.
Another accordion item
Each details element works independently as an accordion.
<details>
<summary>Click to expand</summary>
<p>Hidden content revealed on click.</p>
</details>
<details open>
<summary>Open by default</summary>
<p>Visible by default.</p>
</details>Switch Button
Toggle switch component with smooth animations.
<label data-switch>
<input type="checkbox">
Enable notifications
</label>
<label data-switch>
<input type="checkbox" checked>
Dark mode
</label>
<label data-switch>
<input type="checkbox" disabled>
Disabled option
</label>