RawBlock

Brutalist UI Component Library — 0px radius, thick black borders, zero shadows, full color inversions.

32 components, zero dependencies. Just CSS + 5KB of vanilla JS.

npm install rawblock-ui

Quick Start

import RB from 'rawblock-ui'
import 'rawblock-ui/rawblock.css'

Or via CDN:

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

Quick Start

// ESM
import RB from 'rawblock'
import 'rawblock/rawblock.css'

// CJS
require('rawblock/rawblock.css')
const RB = require('rawblock')

Or via CDN:

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

Components

| # | Component | CSS Class | JS | |---|---|---|---| | 1 | Typography | .rb-h1–.rb-h4, .rb-mono, .rb-link | — | | 2 | Button | .rb-btn, -primary, -secondary, -ghost, -danger | — | | 3 | Input | .rb-input, .rb-label, .rb-helper | — | | 4 | Textarea | .rb-textarea | — | | 5 | Select | .rb-select | — | | 6 | Checkbox | .rb-checkbox | — | | 7 | Radio | .rb-radio | — | | 8 | Toggle | .rb-toggle | — | | 9 | Card | .rb-card, .rb-card-elevated | — | | 10 | Chip | .rb-chip, status variants | — | | 11 | Tabs | .rb-tabs, 3 variants (invert/underline/pill) | ✓ | | 12 | Breadcrumb | .rb-breadcrumb | — | | 13 | Pagination | .rb-pagination | — | | 14 | Accordion | .rb-accordion | ✓ | | 15 | Modal | .rb-modal, 4 positions | ✓ | | 16 | Tooltip | .rb-tooltip | ✓ hover | | 17 | Table | .rb-table, striped + compact | — | | 18 | List | .rb-list | — | | 19 | Avatar | .rb-avatar, 4 sizes | — | | 20 | Badge | .rb-badge, outline variant | — | | 21 | Progress | .rb-progress, indeterminate | — | | 22 | Skeleton | .rb-skeleton | — | | 23 | Divider | .rb-divider, labeled variant | — | | 24 | Alert | .rb-alert, dismissible | — | | 25 | Toast | .rb-toast | ✓ RB.toast() | | 26 | Dropdown | .rb-dropdown | ✓ | | 27 | Slider | .rb-slider | — | | 28 | Stepper | .rb-steps | — | | 29 | File Input | .rb-file | ✓ | | 30 | Code Block | .rb-code, syntax highlight | ✓ RB.highlight() | | 31 | Drawer | .rb-drawer | ✓ | | 32 | Spinner | .rb-spinner-*, 8 variants | — |

Usage

Buttons

<button class="rb-btn rb-btn-primary rb-btn-md">Primary</button>
<button class="rb-btn rb-btn-secondary rb-btn-md">Secondary</button>
<button class="rb-btn rb-btn-danger rb-btn-md">Danger</button>
<button class="rb-btn rb-btn-primary rb-btn-block rb-btn-lg">Full Width</button>

Modals

<button data-modal="#my-modal">Open Modal</button>

<div class="rb-overlay" id="my-modal" hidden>
  <div class="rb-modal">
    <div class="rb-modal-header">
      <span class="rb-modal-title">Title</span>
      <button class="rb-modal-close">×</button>
    </div>
    <p class="rb-body-text">Modal content here.</p>
    <div class="rb-modal-footer">
      <button class="rb-btn rb-btn-primary rb-btn-sm">OK</button>
    </div>
  </div>
</div>

Tabs

<div class="rb-tab-group-wrapper">
  <div class="rb-tabs" data-tab-group="my-tabs">
    <button class="rb-tab rb-active" data-tab="t1">Tab 1</button>
    <button class="rb-tab" data-tab="t2">Tab 2</button>
  </div>
  <div class="rb-tab-panel rb-active" id="t1" data-tab-group="my-tabs">Panel 1</div>
  <div class="rb-tab-panel" id="t2" data-tab-group="my-tabs">Panel 2</div>
</div>

Toasts

RB.toast('Item saved', 'success')
RB.toast('Error occurred', 'error', { duration: 5000, onClose: () => console.log('closed') })

Callbacks

RB.on('modal:open', ({ modal }) => console.log('opened'))
RB.on('modal:close', ({ overlay }) => console.log('closed'))
RB.on('tab:change', ({ prev, current }) => console.log(prev, '→', current))
RB.on('drawer:open', ({ drawer }) => console.log('opened'))
RB.on('toast:show', ({ message }) => console.log(message))
RB.on('accordion:open', ({ panel }) => console.log('opened'))

Syntax Highlight

<pre class="rb-code" data-lang="js">
function hello() {
  return "world"
}
</pre>

Design Principles

• 0px border-radius (always)
• 3-5px black borders replace shadows
• Full black/white color inversions on hover
• Archivo Black + Work Sans + Space Mono fonts
• No decorative elements — content and typography do the work

License

MIT