Logo FrankUI FrankUI
Back Home

Installation Guide

Get up and running with FrankUI. Choose between NPM package installation or integrating the static CDN links directly.

jsDelivr CDN Installation

The quickest way to integrate FrankUI into your project is via the jsDelivr CDN. This is perfect for prototyping, quick layouts, and basic websites. Add the stylesheet and scripts directly to your main HTML file.

Add to HTML head 
<!-- Include FrankUI Stylesheet -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@frankui/frankui@1.0.0/frankui.bundle.min.css">

<!-- Include FrankUI JS Script -->
<script src="https://cdn.jsdelivr.net/npm/@frankui/frankui@1.0.0/frankui.bundle.min.js" defer></script>

NPM Installation

For professional production applications, bundlers (like Vite, Webpack, or Next.js), and team workflows, install the framework from the npm registry.

Step 1: Install Package 
npm install @frankui/frankui
Step 2: Import in JavaScript

Import the JavaScript module and the minified stylesheet inside your main entry file (e.g., index.js or main.js):

// Import FrankUI JS modules
import '@frankui/frankui';

// Import FrankUI styles
import '@frankui/frankui/frankui.bundle.min.css';

Quick Start Boilerplate

Copy this clean HTML template to start building responsive interfaces with FrankUI instantly: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FrankUI App</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@frankui/frankui@1.0.0/frankui.bundle.min.css">
    <script src="https://cdn.jsdelivr.net/npm/@frankui/frankui@1.0.0/frankui.bundle.min.js" defer></script>
</head>
<body>
    <main class="container" style="padding: 40px;">
        <h1>Frankly, a better UI</h1>
        <p>Start building your modern web page.</p>
        <button class="btn primary">Get Started</button>
    </main>
</body>
</html>