Build UIs with
Nought

Get Started

Drop two files into your project. That's it. No npm, no webpack, no config.

<link rel="stylesheet" href="nought.css">
<script src="nought.js"></script>

<link rel="stylesheet" href="https://unpkg.com/nought-ui/nought.css">
<script src="https://unpkg.com/nought-ui/nought.js"></script>

Buttons

Semantic button variants with hover states, focus rings, and keyboard support.

<button class="n-btn">Primary</button>
<button class="n-btn n-btn-secondary">Secondary</button>
<button class="n-btn n-btn-outline">Outline</button>
<button class="n-btn n-btn-ghost">Ghost</button>
<button class="n-btn n-btn-danger">Danger</button>
<button class="n-btn n-btn-success">Success</button>
<button class="n-btn n-btn-sm">Small</button>
<button class="n-btn n-btn-lg">Large</button>

Cards

Versatile content containers with optional hover effects.

<div class="n-card n-card-hover">
  <div class="n-card-header">Title</div>
  <div class="n-card-body">Content</div>
  <div class="n-card-footer">Footer</div>
</div>

Badges & Tags

Small status indicators and categorization labels.

Alerts

Contextual feedback messages with semantic border accents.

<div class="n-alert n-alert-success">
  Changes saved successfully!
</div>

Forms

Accessible form controls with validation states and custom switches.

<div class="n-field">
  <label class="n-label" for="name">Name</label>
  <input class="n-input" type="text" id="name">
  <p class="n-hint">Helper text</p>
</div>

<label class="n-switch">
  <input type="checkbox">
  <span class="n-switch-track"></span>
  <span>Label</span>
</label>

Table

Responsive, hover-enabled data tables.

Progress

Slim progress bars with color variants.

Avatars

User representations with initials, images, and groups.

S RC LG

+3

Kbd & Code

Keyboard shortcut indicators and inline code styling.

const greet = (name) => {
  return `Hello, ${name}!`;
};

console.log(greet('Nought'));

Tooltips

CSS-only tooltips using aria-label — accessible by default.

<span class="n-tooltip" aria-label="Tooltip text">
  <button class="n-btn">Hover me</button>
</span>

Skeleton

Animated loading placeholders.

Breadcrumbs

Navigation trail for hierarchical pages.

Spinner

Loading indicators in multiple sizes.

List

Structured list items with hover states.

Tabs

Keyboard-navigable tabbed interface with ARIA roles.

<!-- Custom element: works in RSC, SSR, plain HTML -->
<n-tabs>
  <div class="n-tabs" role="tablist">
    <button class="n-tab active" role="tab"
      aria-selected="true" aria-controls="panel-id">
      Tab Label
    </button>
  </div>
  <div id="panel-id" class="n-tab-panel active"
    role="tabpanel">Content</div>
</n-tabs>

Accordion

Collapsible content sections with smooth animations.

<!-- Custom element: server-renders as-is -->
<n-accordion>
  <div class="n-accordion-item">
    <button class="n-accordion-trigger"
      aria-expanded="false">Question?</button>
    <div class="n-accordion-content">
      <div class="n-accordion-content-inner">
        Answer.
      </div>
    </div>
  </div>
</n-accordion>

Modal

Focus-trapping dialog with backdrop blur and keyboard dismissal.

<!-- Custom element: SSR/RSC compatible -->
<n-modal>
  <div class="n-modal-overlay" aria-hidden="true">
    <div class="n-modal" role="dialog">
      <div class="n-modal-header">
        <h3>Title</h3>
        <button class="n-modal-close">&times;</button>
      </div>
      <div class="n-modal-body">Content</div>
    </div>
  </div>
</n-modal>

<!-- Open/close via JS: -->
<script>
  document.querySelector('n-modal').open();
  document.querySelector('n-modal').close();
</script>

Dropdown

Context menus with click-outside dismissal.

<!-- Custom element: auto-handles open/close -->
<n-dropdown class="n-dropdown">
  <button aria-expanded="false"
    aria-haspopup="true">Options ▾</button>
  <div class="n-dropdown-menu" role="menu">
    <button class="n-dropdown-item">Edit</button>
    <button class="n-dropdown-item">Delete</button>
  </div>
</n-dropdown>

Toast

Non-blocking notification messages via the JS API.

<!-- Place once in your HTML -->
<n-toast-area></n-toast-area>

// Show via the element API:
document.querySelector('n-toast-area').show('Saved!', 'success');

// Or the global shortcut:
Nought.toast.show('Saved!', 'success');
Nought.toast.show('Error!', 'danger');
Nought.toast.show('Warning!', 'warning', 6000);

Drawer

Slide-out panel for secondary content or navigation.

<!-- Custom element: SSR/RSC compatible -->
<n-drawer>
  <div class="n-drawer-overlay"></div>
  <aside class="n-drawer">
    <div class="n-drawer-header">
      <h3>Title</h3>
      <button data-drawer-close>&times;</button>
    </div>
    <div class="n-drawer-body">Content</div>
  </aside>
</n-drawer>

<!-- Open/close via JS: -->
<script>
  document.querySelector('n-drawer').open();
  document.querySelector('n-drawer').close();
</script>

Dark Mode

System-aware theming that respects prefers-color-scheme with manual override.

<!-- Custom element: auto-detects system theme -->
<n-theme-toggle aria-label="Toggle dark mode">
  🌓 Toggle Theme
</n-theme-toggle>

// Or customize theming via CSS custom properties:
:root {
  --n-primary: #your-brand-color;
}

Layout & Grid

Responsive grid system and flex utilities.

<div class="n-grid n-cols-3">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</div>

<div class="n-container">
  <div class="n-flex n-flex-between">...</div>
</div>

Utilities

Spacing, sizing, and helper classes.