Developer-Centric Minimalist Theme

Layout & Structure

Core layout primitives for building page structures.

Grid System

1

2

3

1

2

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

<!-- Auto-fit grid -->
<div class="c-grid c-grid--cols-auto">
  <div>Auto-sized</div>
  <div>Auto-sized</div>
</div>

Stack

Stack Item 1

Stack Item 2

Stack Item 3

Divider

Content above

Content below

Cards

Container components for grouping related content.

Card body content goes here. This is a basic card component.

Simple Card

A card without header and footer.

Accordion

Expandable sections for organizing content.

What is this component library?

A production-ready, framework-agnostic UI component library built with semantic HTML, CSS variables, and vanilla JavaScript.

How do I use these components?

Simply copy the HTML, CSS, and JavaScript for each component and paste it into your project. No build tools required.

Are these components accessible?

Yes! All components are built with WCAG 2.1 accessibility guidelines in mind.

Breadcrumbs

Navigation aid showing current location.

Tabs

Keyboard accessible tabbed interface.

Overview content. This panel is visible when the first tab is selected.

Pagination

Navigate between pages of content.

Stepper

Multi-step progress indicator.

Account

2

Profile

3

Confirm

Buttons

Button variants for different use cases.

Variants

Sizes

With Icons

Button Group

Disabled State

Text Inputs

Various text input types and states.

Text Input

This is helper text.

Required Field

Error State

This field is invalid.

Disabled

Search Input

Password Input

Textarea

Message

Select

Dropdown selection components.

Choose an option

Checkbox & Radio

Selection controls.

Checkboxes

Option A (checked) Option B Option C (disabled)

Choose a plan

Free Pro Enterprise

Switch

Binary toggle controls.

Notifications enabled Dark mode

File Upload

Drag and drop file upload zone.

Click to upload or drag and drop

PNG, JPG, GIF up to 10MB

Alerts

Alert banners for user feedback.

Success

Your changes have been saved successfully.

Error

Failed to save changes. Please try again.

Warning

Your session will expire in 5 minutes.

Information

A new version is available.

Toast Notifications

Temporary notification messages.

Progress & Loading

Progress indicators and loading states.

Progress Bar

Indeterminate Progress

Spinner

Skeleton

Modal

Accessible modal dialogs with focus trap.

Drawer

Slide-in panels.

Dropdown

Keyboard navigable dropdown menus.

Tooltip & Popover

Contextual overlays.

Tooltip

Popover

Table

Responsive data tables.

Name	Status	Role	Email
Alice Johnson	Active	Admin	alice@example.com
Bob Smith	Pending	Editor	bob@example.com
Carol White	Inactive	Viewer	carol@example.com

Badges & Tags

Status indicators and removable tags.

Badges

Default Success Warning Error Info

Avatar

User avatar with initials.

JS

AB

CD

Code Block

Formatted code display.

function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet('World');

Inline Code

Use the npm install command to install dependencies.

Keyboard Shortcuts

Press Ctrl + S to save.

Empty State

Placeholder for empty content areas.

No files yet

Upload your first file to get started.

Utility Classes

Helper classes for common patterns.

Text Colors

.u-text-muted

.u-text-accent

.u-text-success

.u-text-warning

.u-text-error

Spacing

.u-p-2

.u-p-4

.u-p-6

HTML Components Showcase