Introduction

Frontech is a production-ready UI component library and template system. Zero dependencies, fully accessible, and built to work with React, Vue, Svelte, or plain HTML.

New to Frontech? Start with Installation to get set up in under 2 minutes, or jump to Quick Start for a hands-on example.

Installation

Frontech ships as a single CSS file with optional JavaScript for interactive components. No build step required.

npm / yarn

# npm
npm install frontech

# yarn
yarn add frontech

CDN (no build step)

<link rel="stylesheet" href="https://cdn.frontech.dev/v4/frontech.min.css"/>
<script src="https://cdn.frontech.dev/v4/frontech.min.js"></script>

Copy-paste (HTML projects)

Download the raw CSS and JS files from the releases page and include them directly in your project. Every component works with zero tooling.

Quick Start

Here's a complete example with a themed button, input, and card in under 20 lines:

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="frontech.min.css"/>
</head>
<body>
  <div class="fe-card">
    <input class="fe-input" placeholder="Enter your email"/>
    <button class="fe-btn fe-btn--primary">Subscribe</button>
  </div>
</body>
</html>

Theming

Every color, spacing, and typography value is controlled by CSS custom properties. Override them in your own stylesheet to rebrand the entire library.

:root {
  --fe-accent: #7C6AEF;
  --fe-accent-strong: #9C8DFF;
  --fe-bg: #0C0E13;
  --fe-surface: #151823;
  --fe-text: #EEF0F4;
  --fe-radius: 10px;
}

Design Tokens

Tokens are the foundation of the design system. They ensure consistency across every component.

TokenDefaultDescription
--fe-accent#7C6AEFPrimary brand color
--fe-accent-strong#9C8DFFBrighter accent for hover/focus
--fe-bg#0C0E13Page background
--fe-surface#151823Card and panel background
--fe-border#242835Default border color
--fe-text#EEF0F4Primary text color
--fe-text-muted#9AA1B2Secondary text color
--fe-radius10pxBorder radius for components
--fe-font-bodyInterBody font family
--fe-font-displaySpace GroteskHeading font family

Dark Mode

Dark mode is built in. Toggle it by adding data-theme="dark" to the <html> element.

<html data-theme="dark">

Or toggle via JavaScript:

document.documentElement.setAttribute('data-theme', 'dark');

// Toggle back
document.documentElement.removeAttribute('data-theme');
Tip: Use prefers-color-scheme media query to auto-detect the user's system preference.

Responsive Design

All components are responsive out of the box. Breakpoints follow a mobile-first approach:

BreakpointWidthUsage
sm640pxMobile landscape
md768pxTablet
lg1024pxDesktop
xl1280pxWide desktop

Button

The Button component supports multiple variants, sizes, and states.

Usage

<button class="fe-btn fe-btn--primary">Primary</button>
<button class="fe-btn fe-btn--ghost">Ghost</button>
<button class="fe-btn fe-btn--coral">Coral</button>

Variants

ClassDescription
fe-btn--primaryFilled button with accent background
fe-btn--ghostOutlined button, transparent background
fe-btn--coralFilled button with coral accent
fe-btn--smSmall size variant
fe-btn--lgLarge size variant
fe-btn--iconIcon-only button (square)

Accessibility

Input

Text inputs with labels, placeholders, validation states, and helper text.

Usage

<div class="fe-field">
  <label class="fe-label">Email</label>
  <input class="fe-input" type="email" placeholder="you@example.com"/>
  <p class="fe-hint">We'll never share your email.</p>
</div>

States

ClassDescription
fe-input--errorRed border + error message
fe-input--successGreen border + success message
fe-input--disabledGrayed out, non-interactive

Card

A flexible container for grouping related content.

<div class="fe-card">
  <h3>Card title</h3>
  <p>Card content goes here.</p>
</div>

Variants

Accessible dialog overlay for confirmations, forms, and focused tasks.

<div class="fe-modal" role="dialog" aria-modal="true">
  <div class="fe-modal-content">
    <h3>Confirm action</h3>
    <p>Are you sure?</p>
    <button class="fe-btn fe-btn--primary">Confirm</button>
  </div>
</div>

Features

Table

Data table with sortable columns, row hover, and responsive overflow.

<table class="fe-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alex Morgan</td>
      <td><span class="fe-badge fe-badge--active">Active</span></td>
    </tr>
  </tbody>
</table>

Features