Via CDN

<link rel="stylesheet" href="https://unpkg.com/pocketcss/pocket.css">

Via npm

npm install pocketcss

/* In your CSS or JS entry */
import 'pocketcss/pocket.css'

Manual download

Download pocket.css and place it in your project, then reference it with a standard <link> tag. That's it.

<!-- Light (default, no class) -->
<body>

<!-- Dark -->
<body class="pc-dark-theme">

<!-- Sepia -->
<body class="pc-sepia-theme">

<!-- High Contrast -->
<body class="pc-contrast-theme">

Heading H1 — 2.5rem

Heading H2 — 1.75rem

Heading H3 — 1.25rem

Section Title — uppercase label

Regular paragraph text. Bold weight, italic style, and underlined text are all supported inline.

Muted text using .pc-text-muted for secondary content and captions.

<h1 class="pc-h1">Heading H1</h1>
<h2 class="pc-h2">Heading H2</h2>
<h3 class="pc-h3">Heading H3</h3>
<p class="pc-title">Section Label</p>
<p class="pc-text">Paragraph text</p>
<p class="pc-text pc-text-muted">Muted text</p>

Blockquote

"Simplicity is the ultimate sophistication." — Leonardo da Vinci

<blockquote class="pc-blockquote">
  "Your quote here."
</blockquote>

Inline Code

Use .pc-code for inline code snippets like const x = 42 within body text.

<code class="pc-code">const x = 42</code>

Variants

<button class="pc-btn pc-btn-primary">Primary</button>
<button class="pc-btn pc-btn-secondary">Secondary</button>
<button class="pc-btn pc-btn-outline">Outline</button>

Sizes

<button class="pc-btn pc-btn-primary pc-btn-sm">Small</button>
<button class="pc-btn pc-btn-primary">Default</button>
<button class="pc-btn pc-btn-primary pc-btn-lg">Large</button>

As anchor

<a href="#" class="pc-btn pc-btn-primary">Link Button</a>

<form class="pc-form">
  <div class="pc-form-group">
    <label class="pc-label">Full Name</label>
    <input type="text" class="pc-input" placeholder="Jane Doe">
  </div>
  <div class="pc-form-group">
    <label class="pc-label">Message</label>
    <textarea class="pc-textarea"></textarea>
  </div>
  <div class="pc-form-group">
    <label class="pc-label">Country</label>
    <select class="pc-select">...</select>
  </div>
  <div class="pc-form-check">
    <input type="checkbox" class="pc-checkbox">
    <label>I agree</label>
  </div>
</form>

<table class="pc-table">
  <thead class="pc-thead">
    <tr><th class="pc-th">Name</th></tr>
  </thead>
  <tbody class="pc-tbody">
    <tr class="pc-tr"><td class="pc-td">Value</td></tr>
  </tbody>
</table>

<span class="pc-badge pc-badge-success">Success</span>
<span class="pc-badge pc-badge-warning">Warning</span>
<span class="pc-badge pc-badge-danger">Danger</span>
<span class="pc-badge pc-badge-info">Info</span>

Card with Image

A simple card component with an image, title, and body text.

Read More

Feature

Text-only Card

Cards work just as well without images — great for feature lists or content blocks.

Available

<div class="pc-card">
  <img src="..." class="pc-img-fluid">
  <div class="pc-card-body">
    <h4 class="pc-card-title">Title</h4>
    <p class="pc-card-text">Description text.</p>
  </div>
</div>

• Zero dependencies — pure CSS
• Four built-in themes with token system
• Responsive out of the box
• Accessible focus states on all interactive elements

<ul class="pc-list">
  <li class="pc-list-item">Item one</li>
  <li class="pc-list-item">Item two</li>
</ul>