zyntaxUI

Quick Start & Documentation

Step 1 — Link Stylesheets

Add Bootstrap 5 first, then zyntaxUI after it in your <head>.

<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- zyntaxUI Override -->
<link href="https://zyntaxui.pages.dev/zyntaxUI.css" rel="stylesheet">

Step 2 — Add JS Bundle (Optional)

Required for interactive components (modals, accordions, dropdowns). Place before </body>.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

Buttons

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-outline-primary">Outline</button>
<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary btn-sm">Small</button>

Cards

Basic Card

Card Title

A simple card with a header and body content area.

Action

New

No Header

A card without a header. Clean and minimal.

Just now

Project Status

StaffTrack v2

Enterprise system — 85% complete.

85%

<div class="card">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Title</h5>
    <p class="card-text">Content goes here.</p>
    <a href="#" class="btn btn-primary btn-sm">Action</a>
  </div>
  <div class="card-footer">Footer</div>
</div>

Alerts

Success! Your changes have been saved successfully.

Error! Something went wrong. Please try again.

Warning! This action cannot be undone.

Info: Your session will expire in 10 minutes.

<div class="alert alert-success">Success message</div>
<div class="alert alert-danger">Error message</div>
<div class="alert alert-warning">Warning message</div>
<div class="alert alert-info">Info message</div>

Tables

#	Task Name	Assignee	Status
1	Setup zyntaxUI	Pasan S.	Done
2	Design Component Library	Pasan S.	In Progress
3	Write Documentation	TBD	Pending

<table class="table table-striped table-hover">
  <thead class="table-dark">
    <tr><th>#</th><th>Name</th><th>Status</th></tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th><td>Task Name</td>
      <td><span class="badge bg-success">Done</span></td>
    </tr>
  </tbody>
</table>

Badges

Primary Secondary Success Danger Warning Info

Heading New

<span class="badge bg-primary">Primary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>

Forms & Inputs

Sample Form

First Name

Project Type

Message

I agree to the terms

Option A

<label class="form-label">Email</label>
<input type="email" class="form-control" placeholder="name@example.com">

<select class="form-select">
  <option>Option One</option>
</select>

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="c1">
  <label class="form-check-label" for="c1">Agree</label>
</div>

List Groups

Active Item
Second Item
Third Item
Fourth Item

Inbox 14
Sent 2
Drafts 7

<ul class="list-group">
  <li class="list-group-item active">Active</li>
  <li class="list-group-item">Item</li>
  <li class="list-group-item d-flex justify-content-between">
    Inbox <span class="badge bg-primary">14</span>
  </li>
</ul>

Progress Bars

Design — 100%

100%

Development — 75%

75%

Testing — 40%

40%

Deployment — 10%

10%

<div class="progress">
  <div class="progress-bar" style="width: 75%">75%</div>
</div>

Accordion

zyntaxUI is a brutalist, black & white Bootstrap 5 CSS override that gives your project a stark, high-contrast aesthetic with a single stylesheet.

Just add the CDN link after your Bootstrap CSS in the <head> tag. No build step or npm required.

Yes — all colors and spacing are controlled by CSS custom properties in :root. Just override the variables in your own stylesheet.

<div class="accordion" id="myAccordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#c1">
        Question
      </button>
    </h2>
    <div id="c1" class="accordion-collapse collapse show">
      <div class="accordion-body">Answer here.</div>
    </div>
  </div>
</div>

Modal

<!-- Trigger -->
<button data-bs-toggle="modal" data-bs-target="#myModal">Open Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Title</h5>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">Content here.</div>
      <div class="modal-footer">
        <button class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
        <button class="btn btn-primary">Save</button>
      </div>
    </div>
  </div>
</div>

Nav Tabs & Pills

This is the Overview tab content. zyntaxUI is a brutalist CSS override for Bootstrap 5.

This is the Details tab. Add more technical information here for your users.

This is the Settings tab. Place configuration options or user preferences here.

<!-- Tabs -->
<ul class="nav nav-tabs" id="myTabs">
  <li class="nav-item">
    <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#t1">Tab 1</button>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade show active" id="t1">Content here.</div>
</div>

<!-- Pills -->
<ul class="nav nav-pills">
  <li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
</ul>

Spinners

<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm me-2"></span>
  Loading...
</button>

Pagination

<nav>
  <ul class="pagination">
    <li class="page-item disabled"><a class="page-link" href="#">Prev</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

Dropdowns

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Actions
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">View</a></li>
    <li><a class="dropdown-item" href="#">Edit</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Delete</a></li>
  </ul>
</div>

Breadcrumbs

<nav>
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Section</a></li>
    <li class="breadcrumb-item active">Current</li>
  </ol>
</nav>