UIkit

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/uikit@3/dist/css/uikit.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/uikit@3/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3/dist/js/uikit-icons.min.js"></script>

Include CSS, JS, and icons in head/body

npm install uikit

import UIkit from "uikit";
import Icons from "uikit/dist/js/uikit-icons";

UIkit.use(Icons);

<div class="uk-card uk-card-default uk-card-body">
  <h3 class="uk-card-title">Card Title</h3>
  <p>Card content goes here.</p>
  <button class="uk-button uk-button-primary">Click me</button>
</div>

Basic card component with button

<div class="uk-child-width-expand@s" uk-grid>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</div>

Equal width columns (requires uk-grid attribute)

<div class="uk-child-width-1-2@s uk-child-width-1-3@m" uk-grid>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</div>

2 columns on small, 3 on medium

Add @s, @m, @l, @xl for responsive

<button class="uk-button uk-button-default">Default</button>
<button class="uk-button uk-button-primary">Primary</button>
<button class="uk-button uk-button-secondary">Secondary</button>
<button class="uk-button uk-button-danger">Danger</button>
<button class="uk-button uk-button-text">Text</button>
<button class="uk-button uk-button-link">Link</button>

<div class="uk-button-group">
  <button class="uk-button uk-button-default">Left</button>
  <button class="uk-button uk-button-default">Middle</button>
  <button class="uk-button uk-button-default">Right</button>
</div>

Groups buttons together horizontally

<div class="uk-card uk-card-default uk-card-body">
  <h3 class="uk-card-title">Title</h3>
  <p>Content goes here.</p>
</div>

<div class="uk-card uk-card-default">
  <div class="uk-card-header">
    <h3 class="uk-card-title">Header</h3>
  </div>
  <div class="uk-card-body">
    <p>Body content</p>
  </div>
  <div class="uk-card-footer">
    <a href="#" class="uk-button uk-button-text"> Read more </a>
  </div>
</div>

<div class="uk-card uk-card-default">
  <div class="uk-card-media-top">
    <img src="image.jpg" alt="" />
  </div>
  <div class="uk-card-body">
    <h3 class="uk-card-title">Title</h3>
    <p>Content</p>
  </div>
</div>

Use uk-card-media-top, uk-card-media-bottom, or uk-card-media-left

<nav class="uk-navbar-container" uk-navbar>
  <div class="uk-navbar-left">
    <ul class="uk-navbar-nav">
      <li class="uk-active"><a href="#">Active</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
    </ul>
  </div>
</nav>

<nav class="uk-navbar-container" uk-navbar>
  <ul class="uk-navbar-nav">
    <li>
      <a href="#">Parent</a>
      <div class="uk-navbar-dropdown">
        <ul class="uk-nav uk-navbar-dropdown-nav">
          <li><a href="#">Item</a></li>
          <li><a href="#">Item</a></li>
        </ul>
      </div>
    </li>
  </ul>
</nav>

<input class="uk-input" type="text" placeholder="Input" />

<select class="uk-select">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<textarea class="uk-textarea" rows="5"></textarea>

<input class="uk-checkbox" type="checkbox" />
<input class="uk-radio" type="radio" />
<input class="uk-range" type="range" />

<form class="uk-form-stacked">
  <div class="uk-margin">
    <label class="uk-form-label">Label</label>
    <div class="uk-form-controls">
      <input class="uk-input" type="text" />
    </div>
  </div>
  <div class="uk-margin">
    <label class="uk-form-label">Email</label>
    <div class="uk-form-controls">
      <input class="uk-input" type="email" />
    </div>
  </div>
</form>

<button uk-toggle="target: #my-modal">Open Modal</button>

<div id="my-modal" uk-modal>
  <div class="uk-modal-dialog uk-modal-body">
    <h2 class="uk-modal-title">Headline</h2>
    <p>Modal content goes here.</p>
    <button class="uk-modal-close" type="button">Close</button>
  </div>
</div>

// Show modal
UIkit.modal("#my-modal").show();

// Hide modal
UIkit.modal("#my-modal").hide();

// Confirmation dialog
UIkit.modal.confirm("Are you sure?").then(
  () => console.log("Confirmed"),
  () => console.log("Rejected"),
);

// Alert dialog
UIkit.modal.alert("Notice!").then(() => console.log("Closed"));

<div id="modal" uk-modal="bg-close: false">
  <!-- Content -->
</div>

<table class="uk-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>john@example.com</td>
    </tr>
  </tbody>
</table>

<table class="uk-table uk-table-divider uk-table-hover">
  <thead>
    <tr>
      <th>Heading</th>
      <th>Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data</td>
      <td>Data</td>
    </tr>
  </tbody>
</table>

<button class="uk-button uk-button-default">Hover</button>
<div uk-dropdown>
  <ul class="uk-nav uk-dropdown-nav">
    <li class="uk-active"><a href="#">Active</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
  </ul>
</div>

<div uk-dropdown="pos: top-right">
  <!-- Content -->
</div>

<div uk-dropdown="mode: click">
  <!-- Opens on click -->
</div>

<span uk-icon="heart"></span>
<span uk-icon="star"></span>
<span uk-icon="home"></span>

<span uk-icon="icon: check; ratio: 2"></span>
<span uk-icon="icon: close; ratio: 1.5"></span>

Ratio scales the icon size

<a href="#" class="uk-icon-button" uk-icon="instagram"></a>
<a href="#" class="uk-icon-button" uk-icon="twitter"></a>
<a href="#" class="uk-icon-button" uk-icon="facebook"></a>

<div class="uk-animation-fade">Fade in</div>

<div class="uk-animation-slide-top">Slide from top</div>

<div class="uk-animation-slide-bottom">Slide from bottom</div>

<div class="uk-animation-slide-left">Slide from left</div>

<div class="uk-animation-slide-right">Slide from right</div>

<div class="uk-animation-scale-up">Scale up</div>

<div class="uk-animation-scale-down">Scale down</div>

<div class="uk-animation-slide-top uk-animation-fast">Fast slide from top</div>

<div class="uk-alert-primary" uk-alert>
  <a class="uk-alert-close" uk-close></a>
  <p>Primary alert message.</p>
</div>

<div class="uk-alert-success" uk-alert>
  <p>Success alert message.</p>
</div>

<div class="uk-alert-warning" uk-alert>
  <p>Warning alert message.</p>
</div>

<div class="uk-alert-danger" uk-alert>
  <p>Danger alert message.</p>
</div>

// Simple notification
UIkit.notification("Message");

// With options
UIkit.notification({
  message: "Notification message",
  status: "primary",
  pos: "top-right",
  timeout: 5000,
});

// Status types
UIkit.notification("Success!", { status: "success" });
UIkit.notification("Warning!", { status: "warning" });
UIkit.notification("Error!", { status: "danger" });

<!-- Hide on mobile, show on tablet+ -->
<div class="uk-visible@s">Visible on small+</div>

<!-- Show on mobile, hide on tablet+ -->
<div class="uk-hidden@s">Hidden on small+</div>

<!-- Responsive grid widths -->
<div class="uk-width-1-2@s uk-width-1-3@m" uk-grid>
  <div>Item</div>
  <div>Item</div>
</div>

<!-- Responsive text alignment -->
<p class="uk-text-center uk-text-left@m">Centered on mobile, left on tablet+</p>

<button uk-toggle="target: #offcanvas">Open Menu</button>

<div id="offcanvas" uk-offcanvas>
  <div class="uk-offcanvas-bar">
    <button class="uk-offcanvas-close" type="button" uk-close></button>
    <h3>Menu</h3>
    <ul class="uk-nav">
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
    </ul>
  </div>
</div>

<div id="offcanvas" uk-offcanvas="mode: push">
  <!-- Push content -->
</div>

<div id="offcanvas" uk-offcanvas="flip: true">
  <!-- Opens from right -->
</div>

<ul uk-accordion>
  <li class="uk-open">
    <a class="uk-accordion-title" href="#"> Item 1 </a>
    <div class="uk-accordion-content">
      <p>Content for item 1.</p>
    </div>
  </li>
  <li>
    <a class="uk-accordion-title" href="#"> Item 2 </a>
    <div class="uk-accordion-content">
      <p>Content for item 2.</p>
    </div>
  </li>
</ul>

<ul uk-accordion="multiple: true">
  <!-- Multiple panels can be open -->
</ul>

// Get component instance
const modal = UIkit.modal("#my-modal");
const dropdown = UIkit.dropdown("#my-dropdown");
const offcanvas = UIkit.offcanvas("#my-offcanvas");

// Show/hide
modal.show();
modal.hide();

// Toggle
dropdown.toggle();

// Listen for events
UIkit.util.on("#my-modal", "beforeshow", () => {
  console.log("Modal about to show");
});

UIkit.util.on("#my-modal", "shown", () => {
  console.log("Modal is visible");
});

UIkit.util.on("#my-modal", "hidden", () => {
  console.log("Modal is hidden");
});

Interactive components (modals, dropdowns, accordions) require uikit.min.js. The uk- attributes trigger JavaScript behavior.

uikit-icons.min.js must be included separately, or uk-icon attributes won't render any icons.

UIkit grid requires the uk-grid HTML attribute, not just CSS classes:

<!-- ✓ Correct -->
<div class="uk-child-width-1-2" uk-grid>
  <!-- ✗ Wrong -->
  <div class="uk-child-width-1-2 uk-grid"></div>
</div>

uk-width-1-2@s applies from 640px and UP, not at that exact size. Use uk-hidden@s to hide on screens ≥640px.

uk-toggle targets by ID. Duplicate IDs cause conflicts:

<!-- ✓ Correct -->
<button uk-toggle="target: #modal-1">Open 1</button>
<div id="modal-1" uk-modal>...</div>

<button uk-toggle="target: #modal-2">Open 2</button>
<div id="modal-2" uk-modal>...</div>

<!-- ✗ Wrong (duplicate IDs) -->
<button uk-toggle="target: #modal">Open 1</button>
<div id="modal" uk-modal>...</div>

<button uk-toggle="target: #modal">Open 2</button>
<div id="modal" uk-modal>...</div>