or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

animation-effects.mdcontent-components.mdform-components.mdindex.mdinteractive-components.mdjavascript-api.mdlayout-components.mdnavigation-components.mdutility-classes.md
tile.json

tessl/npm-uikit

UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/uikit@3.23.x

To install, run

npx @tessl/cli install tessl/npm-uikit@3.23.0

index.mddocs/

UIkit

UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces. It provides a complete set of UI components, utilities, and styling tools for building modern web applications with both CSS-only components and interactive JavaScript functionality.

Package Information

  • Package Name: uikit
  • Package Type: npm
  • Language: JavaScript/TypeScript/CSS
  • Installation: npm install uikit or yarn add uikit or pnpm add uikit

Core Imports

ESM (recommended):

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

// Register icons
UIkit.use(Icons);

CommonJS:

const UIkit = require('uikit');
const Icons = require('uikit/dist/js/uikit-icons');

// Register icons
UIkit.use(Icons);

CSS Import:

@import 'uikit/dist/css/uikit.css';

CDN:

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

Basic Usage

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.23.12/dist/css/uikit.min.css" />
</head>
<body>
    <!-- Navigation -->
    <nav class="uk-navbar-container" uk-navbar>
        <div class="uk-navbar-left">
            <a class="uk-navbar-item uk-logo" href="#">Logo</a>
        </div>
        <div class="uk-navbar-right">
            <ul class="uk-navbar-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="uk-section uk-section-primary">
        <div class="uk-container">
            <h1 class="uk-heading-large">Welcome to UIkit</h1>
            <p class="uk-text-lead">Build fast and powerful web interfaces.</p>
            <button class="uk-button uk-button-secondary" uk-toggle="target: #modal">Open Modal</button>
        </div>
    </section>

    <!-- Modal -->
    <div id="modal" uk-modal>
        <div class="uk-modal-dialog uk-modal-body">
            <h2 class="uk-modal-title">Hello World</h2>
            <p>This is a modal dialog.</p>
            <button class="uk-button uk-button-default uk-modal-close" type="button">Close</button>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/uikit@3.23.12/dist/js/uikit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.23.12/dist/js/uikit-icons.min.js"></script>
</body>
</html>

Architecture

UIkit is built around several key architectural patterns:

  • CSS-First Design: Components work without JavaScript for basic functionality
  • Progressive Enhancement: JavaScript adds interactivity to CSS components
  • Component System: Modular architecture with independent, reusable components
  • Data Attributes: HTML data attributes (uk-*) configure component behavior
  • Global API: Single UIkit object provides component management and utilities
  • Plugin System: Extensible architecture supporting custom components and mixins
  • Utility Classes: Comprehensive utility class system for rapid development

Capabilities

Core JavaScript API

Main UIkit object providing component management, lifecycle control, and utility functions for dynamic component interaction.

declare const UIkit: {
  // Static properties
  version: string;
  options: Record<string, any>;
  util: Record<string, Function>;
  container: HTMLElement;
  
  // Component management
  component(name: string, definition?: ComponentDefinition): ComponentConstructor | void;
  getComponent(element: HTMLElement, name?: string): ComponentInstance | Record<string, ComponentInstance>;
  getComponents(element: HTMLElement): Record<string, ComponentInstance>;
  
  // Global operations
  update(element?: HTMLElement, event?: Event): void;
  use(plugin: Plugin): typeof UIkit;
  mixin(mixin: Mixin, component?: string | ComponentConstructor): void;
  extend(options: ComponentOptions): ComponentConstructor;
};

interface ComponentInstance {
  $el: HTMLElement;
  $options: Record<string, any>;
  $container: HTMLElement;
  $mount(element: HTMLElement): void;
  $destroy(removeEl?: boolean): void;
  $create(component: string, element: HTMLElement, options?: Record<string, any>): ComponentInstance;
  $emit(event: Event): void;
  $update(element?: HTMLElement, event?: Event): void;
  $reset(): void;
  $getComponent(name: string): ComponentInstance;
}

JavaScript API

Layout Components

Core layout systems including responsive grids, navigation bars, and positioning utilities for structuring web interfaces.

/* Grid System */
.uk-grid { /* Responsive grid container */ }
.uk-grid-column-small { /* Small screen columns */ }
.uk-grid-column-medium { /* Medium screen columns */ }
.uk-grid-column-large { /* Large screen columns */ }

/* Container */
.uk-container { /* Content container with max-width */ }
.uk-container-small { /* Small container variant */ }
.uk-container-large { /* Large container variant */ }

/* Section */
.uk-section { /* Content section with padding */ }
.uk-section-primary { /* Primary themed section */ }
.uk-section-secondary { /* Secondary themed section */ }

Layout Components

Navigation Components

Navigation systems including navbars, menus, breadcrumbs, and pagination for site navigation and wayfinding.

/* Navbar */
.uk-navbar-container { /* Navbar container */ }
.uk-navbar-left { /* Left navbar section */ }
.uk-navbar-right { /* Right navbar section */ }
.uk-navbar-nav { /* Navbar navigation list */ }
.uk-navbar-item { /* Navbar item */ }

/* Nav */
.uk-nav { /* Navigation list */ }
.uk-nav-default { /* Default nav styling */ }
.uk-nav-primary { /* Primary nav styling */ }

/* Breadcrumb */
.uk-breadcrumb { /* Breadcrumb navigation */ }

Navigation Components

Interactive Components

JavaScript-powered components including modals, dropdowns, accordions, and tooltips for user interaction.

// Modal component
UIkit.modal(element: HTMLElement, options?: {
  keyboard?: boolean;
  stack?: boolean;
  container?: boolean | string;
}): ModalComponent;

// Dropdown component  
UIkit.dropdown(element: HTMLElement, options?: {
  toggle?: string;
  pos?: string;
  mode?: string;
  offset?: number;
}): DropdownComponent;

// Tooltip component
UIkit.tooltip(element: HTMLElement, options?: {
  title?: string;
  pos?: string;
  offset?: number;
  animation?: string;
}): TooltipComponent;

Interactive Components

Form Components

Form styling and input components including buttons, form controls, and validation styling for user input interfaces.

/* Form Controls */
.uk-input { /* Text input styling */ }
.uk-select { /* Select dropdown styling */ }
.uk-textarea { /* Textarea styling */ }
.uk-radio { /* Radio button styling */ }
.uk-checkbox { /* Checkbox styling */ }

/* Buttons */
.uk-button { /* Base button styling */ }
.uk-button-default { /* Default button variant */ }
.uk-button-primary { /* Primary button variant */ }
.uk-button-secondary { /* Secondary button variant */ }
.uk-button-danger { /* Danger button variant */ }

Form Components

Content Components

Content display components including cards, tables, lists, and media elements for presenting information.

/* Card */
.uk-card { /* Card container */ }
.uk-card-default { /* Default card styling */ }
.uk-card-primary { /* Primary card styling */ }
.uk-card-header { /* Card header */ }
.uk-card-body { /* Card body */ }
.uk-card-footer { /* Card footer */ }

/* Table */
.uk-table { /* Table styling */ }
.uk-table-striped { /* Striped table variant */ }
.uk-table-hover { /* Hover effect variant */ }

/* List */
.uk-list { /* List styling */ }
.uk-list-divider { /* Divided list variant */ }
.uk-list-striped { /* Striped list variant */ }

Content Components

Utility Classes

Comprehensive utility class system for spacing, typography, colors, positioning, and responsive design.

/* Margin */
.uk-margin { /* Standard margin */ }
.uk-margin-small { /* Small margin */ }
.uk-margin-large { /* Large margin */ }
.uk-margin-remove { /* Remove margin */ }

/* Padding */
.uk-padding { /* Standard padding */ }
.uk-padding-small { /* Small padding */ }
.uk-padding-large { /* Large padding */ }
.uk-padding-remove { /* Remove padding */ }

/* Text */
.uk-text-center { /* Center text */ }
.uk-text-left { /* Left align text */ }
.uk-text-right { /* Right align text */ }
.uk-text-lead { /* Lead text styling */ }

Utility Classes

Animation & Effects

Animation utilities and transition effects for creating dynamic and engaging user interfaces.

/* Animations */
.uk-animation-fade { /* Fade animation */ }
.uk-animation-slide-top { /* Slide from top */ }
.uk-animation-slide-bottom { /* Slide from bottom */ }
.uk-animation-slide-left { /* Slide from left */ }
.uk-animation-slide-right { /* Slide from right */ }

/* Transitions */
.uk-transition-toggle { /* Transition container */ }
.uk-transition-fade { /* Fade transition */ }
.uk-transition-scale-up { /* Scale up transition */ }
.uk-transition-slide-top { /* Slide transition */ }

Animation & Effects

Types

interface ComponentDefinition {
  mixins?: Mixin[];
  data?: Record<string, any>;
  props?: Record<string, PropDefinition>;
  computed?: Record<string, ComputedProperty>;
  methods?: Record<string, Function>;
  events?: EventDefinition[];
  connected?(): void;
  disconnected?(): void;
  beforeConnect?(): void;
  beforeDisconnect?(): void;
  destroy?(): void;
}

interface ComponentOptions {
  el?: HTMLElement;
  data?: Record<string, any>;
  [key: string]: any;
}

interface Plugin {
  installed?: boolean;
  (UIkit: typeof UIkit): void;
}

interface Mixin {
  [key: string]: any;
}

type ComponentConstructor = new (options?: ComponentOptions) => ComponentInstance;

interface PropDefinition {
  type?: string | string[];
  default?: any;
  validator?(value: any): boolean;
}

interface ComputedProperty {
  get?(): any;
  set?(value: any): void;
}

interface EventDefinition {
  name: string;
  handler: string | Function;
  el?: string | Function;
  delegate?: string;
  filter?: Function;
  self?: boolean;
}