CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-uikit

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

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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;
}
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/uikit@3.23.x
Publish Source
CLI
Badge
tessl/npm-uikit badge