UIKit CSS Installation
UIKit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
Method 1: CDN (Quickest)
Add these to your HTML head for quick setup:
CDN Links
<!-- UIKit CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/css/uikit.min.css" /> <!-- UIKit JS --> <script src="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/js/uikit.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/js/uikit-icons.min.js"></script>
Method 2: NPM/Yarn
Install with NPM
npm install uikit
Install with Yarn
yarn add uikit
Import in JavaScript/React
// Import CSS import 'uikit/dist/css/uikit.min.css'; // Import JS with Icons import UIkit from 'uikit'; import Icons from 'uikit/dist/js/uikit-icons'; // Load icons UIkit.use(Icons);
Method 3: Manual Download
- Download from getuikit.com
- Extract the ZIP file
- Link the files in your HTML:
<!-- Link to your local UIKit files --> <link rel="stylesheet" href="/path/to/uikit.min.css" /> <script src="/path/to/uikit.min.js"></script> <script src="/path/to/uikit-icons.min.js"></script>
Framework Integration
Next.js Setup
// _app.js or _app.tsx
import 'uikit/dist/css/uikit.min.css';
import { useEffect } from 'react';
function MyApp({ Component, pageProps }) {
useEffect(() => {
import('uikit').then(({ default: UIkit }) => {
import('uikit/dist/js/uikit-icons').then((Icons) => {
UIkit.use(Icons.default || Icons);
});
});
}, []);
return <Component {...pageProps} />;
}
export default MyApp;Vue.js Setup
// main.js import Vue from 'vue'; import 'uikit/dist/css/uikit.min.css'; import UIkit from 'uikit'; import Icons from 'uikit/dist/js/uikit-icons'; UIkit.use(Icons); // Make UIkit available globally Vue.prototype.$uikit = UIkit;
Basic HTML Template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UIKit Starter</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/css/uikit.min.css" />
</head>
<body>
<div class="uk-container uk-margin-top">
<h1 class="uk-heading-primary">Welcome to UIKit</h1>
<button class="uk-button uk-button-primary">Click Me</button>
<button class="uk-button uk-button-secondary">Secondary</button>
<button class="uk-button uk-button-default">Default</button>
</div>
<!-- UIKit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/js/uikit-icons.min.js"></script>
</body>
</html>Verification Test
Try this code to verify installation:
Troubleshooting Tips:
- JavaScript not working: Make sure UIKit JS is loaded after CSS
- Icons not showing: Include uikit-icons.min.js
- Components not interactive: Check JavaScript console for errors
