Write, Run & Share UIkit code online using OneCompiler's UIkit online editor for free. It's one of the robust, feature-rich online editors for UIkit. Getting started with the OneCompiler's UIkit online editor is really simple and pretty fast. The editor shows sample boilerplate code when you choose language as 'UIkit' and start writing code to learn and test online without worrying about tedious process of installation.
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces. Created by YOOtheme, UIkit provides a comprehensive collection of HTML, CSS, and JavaScript components with smooth animations.
UIkit uses a Flexbox-based responsive grid system that automatically adapts to the viewport size with smooth transitions. The grid uses the uk-grid attribute for initialization and supports fractional widths like uk-width-1-2 or uk-width-1-3 for precise control over column sizing. Responsive suffixes (@s, @m, @l, @xl) let you define different layouts at various breakpoints, while modifiers control gap spacing and enable features like equal-height columns with uk-grid-match.
<!-- Basic grid with uk-grid attribute -->
<div class="uk-grid" uk-grid>
<div class="uk-width-1-3">1/3</div>
<div class="uk-width-1-3">1/3</div>
<div class="uk-width-1-3">1/3</div>
</div>
<!-- Widths: uk-width-1-2, uk-width-1-3, uk-width-1-4, uk-width-2-3, uk-width-auto, uk-width-expand -->
<!-- Responsive: @s (640px), @m (960px), @l (1200px), @xl (1600px) -->
<div class="uk-grid" uk-grid>
<div class="uk-width-1-1 uk-width-1-2@s uk-width-1-3@m">Responsive</div>
</div>
<!-- Gap modifiers: uk-grid-small, uk-grid-medium, uk-grid-large, uk-grid-collapse -->
<!-- Match height: uk-grid-match -->
<div class="uk-grid uk-grid-small uk-grid-match" uk-grid>...</div>
<!-- Container: uk-container, uk-container-small, uk-container-large, uk-container-expand -->
<div class="uk-container">Centered content</div>
UIkit provides a comprehensive typography system with heading classes, text styles, and utility modifiers for complete control over text presentation. Heading classes from uk-heading-small to uk-heading-xlarge create impactful titles independent of HTML heading levels, while text styles like uk-text-lead and uk-text-meta serve specific content purposes. Alignment, transformation, weight, and color utilities can all be applied responsively, making it easy to craft readable layouts that adapt to different screen sizes.
<!-- Headings: uk-heading-small, uk-heading-medium, uk-heading-large, uk-heading-xlarge -->
<h1 class="uk-heading-medium">Medium heading</h1>
<!-- Text styles: uk-text-lead, uk-text-meta, uk-text-small, uk-text-large -->
<p class="uk-text-lead">Lead paragraph</p>
<!-- Alignment: uk-text-left, uk-text-center, uk-text-right, uk-text-justify -->
<!-- Responsive: uk-text-center uk-text-left@m -->
<!-- Transform: uk-text-uppercase, uk-text-lowercase, uk-text-capitalize -->
<!-- Weight: uk-text-light, uk-text-normal, uk-text-bold, uk-text-lighter, uk-text-bolder -->
<p class="uk-text-center uk-text-bold">Centered bold text</p>
<!-- Colors: uk-text-muted, uk-text-emphasis, uk-text-primary, uk-text-secondary, uk-text-success, uk-text-warning, uk-text-danger -->
<p class="uk-text-success">Success text</p>
<!-- Wrap: uk-text-truncate, uk-text-break, uk-text-nowrap -->
UIkit buttons feature smooth hover transitions and a clean design with multiple style and size options. The default button provides a subtle outlined look, while primary, secondary, danger, text, and link variants cover common use cases. Buttons can be combined with UIkit icons for enhanced visual communication, and the button group component allows you to cluster related actions together with seamless borders between adjacent buttons.
<!-- Styles: uk-button-default, uk-button-primary, uk-button-secondary, uk-button-danger, uk-button-text, uk-button-link -->
<button class="uk-button uk-button-primary">Primary</button>
<!-- Sizes: uk-button-small, (default), uk-button-large -->
<button class="uk-button uk-button-default uk-button-small">Small</button>
<!-- Full width: uk-width-1-1 -->
<!-- Button group: uk-button-group -->
<div class="uk-button-group">
<button class="uk-button uk-button-default">Left</button>
<button class="uk-button uk-button-default">Right</button>
</div>
Cards in UIkit are flexible content containers with optional sections for headers, bodies, footers, and media content. The component supports three style variants - default with a subtle border, primary with themed background, and secondary with a muted background. The hover modifier adds a lift effect on mouse interaction, and cards integrate smoothly with the grid system for creating responsive card layouts across your pages.
<!-- Styles: uk-card-default, uk-card-primary, uk-card-secondary -->
<!-- Sizes: uk-card-small, uk-card-large -->
<!-- Hover: uk-card-hover -->
<div class="uk-card uk-card-default uk-card-hover">
<div class="uk-card-header"><h3 class="uk-card-title">Title</h3></div>
<div class="uk-card-body">Content</div>
<div class="uk-card-footer"><a class="uk-button uk-button-text">More</a></div>
</div>
<!-- With media: uk-card-media-top, uk-card-media-bottom -->
Alerts provide contextual feedback messages for user actions, system status, or important notices that need attention. They come in four semantic variants - primary for general information, success for positive feedback, warning for caution, and danger for errors or critical messages. Each alert can include a close button for dismissal, and the component smoothly animates when closed using UIkit's built-in JavaScript functionality.
<!-- Types: uk-alert-primary, uk-alert-success, uk-alert-warning, uk-alert-danger -->
<div class="uk-alert-success" uk-alert>
<a class="uk-alert-close" uk-close></a>
<p>Success message</p>
</div>
UIkit forms feature clean, minimal styling with consistent spacing and smooth focus transitions across all input types. The framework provides separate classes for inputs, selects, textareas, checkboxes, and radios to ensure proper styling. Form layouts can be stacked or horizontal, and the inline wrapper with form icons creates search bars or inputs with visual indicators for password, email, or other field types.
<form class="uk-form-stacked">
<div class="uk-margin">
<label class="uk-form-label">Name</label>
<div class="uk-form-controls">
<input class="uk-input" type="text" placeholder="Name" />
</div>
</div>
<div class="uk-margin">
<select class="uk-select">
<option>Option 1</option>
</select>
</div>
<div class="uk-margin">
<textarea class="uk-textarea" rows="3"></textarea>
</div>
<label><input class="uk-checkbox" type="checkbox" /> Checkbox</label>
<label><input class="uk-radio" type="radio" name="r" /> Radio</label>
<button class="uk-button uk-button-primary">Submit</button>
</form>
<!-- Form layouts: uk-form-stacked, uk-form-horizontal -->
<!-- Sizes: uk-form-small, uk-form-large -->
<!-- States: uk-form-danger, uk-form-success -->
<!-- Widths: uk-form-width-large, uk-form-width-medium, uk-form-width-small -->
<!-- Icon: <div class="uk-inline"><span class="uk-form-icon" uk-icon="icon: user"></span><input class="uk-input"></div> -->
The navbar component creates responsive horizontal navigation that works seamlessly across desktop and mobile devices. It's structured with left, center, and right sections for flexible item placement, and supports dropdown menus with smooth animations. The navbar can be made sticky using the uk-sticky component, transparent for overlay effects, and includes a mobile toggle pattern for hamburger menu navigation on smaller screens.
<nav class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-left">
<a class="uk-navbar-item uk-logo" href="#">Logo</a>
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li>
<a href="#">Dropdown</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li><a href="#">Item</a></li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
<!-- Modifiers: uk-navbar-transparent -->
<!-- Sticky: <div uk-sticky><nav class="uk-navbar-container" uk-navbar>...</nav></div> -->
Modals create overlay dialogs for focused content, forms, confirmations, or any interaction that requires user attention before proceeding. The modal dialog supports structured sections for header, body, and footer, providing consistent spacing and styling throughout. Modals are triggered via the uk-toggle component and can be closed with the close button, clicking outside the dialog, or pressing Escape. The full modifier creates full-screen modals for immersive experiences.
<button class="uk-button uk-button-default" uk-toggle="target: #my-modal">
Open
</button>
<div id="my-modal" uk-modal>
<div class="uk-modal-dialog">
<button class="uk-modal-close-default" uk-close></button>
<div class="uk-modal-header"><h2 class="uk-modal-title">Title</h2></div>
<div class="uk-modal-body">Content</div>
<div class="uk-modal-footer uk-text-right">
<button class="uk-button uk-button-default uk-modal-close">Cancel</button>
<button class="uk-button uk-button-primary">Save</button>
</div>
</div>
</div>
<!-- Full screen: uk-modal-full -->
Tabs organize related content into switchable panels, allowing users to navigate between sections without leaving the page. The tab navigation uses the uk-tab attribute and automatically connects with corresponding switcher content panels. UIkit provides alignment options for centered or right-aligned tabs, and supports vertical tab layouts using the uk-tab-left or uk-tab-right modifiers for side navigation patterns.
<ul uk-tab>
<li class="uk-active"><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
</ul>
<ul class="uk-switcher uk-margin">
<li>Content 1</li>
<li>Content 2</li>
</ul>
<!-- Alignment: uk-flex-center, uk-flex-right, uk-child-width-expand -->
<!-- Vertical: uk-tab-left, uk-tab-right -->
UIkit includes a rich library of additional components for building complete user interfaces with consistent styling and behavior. Accordions provide collapsible content sections with smooth animations, dropdowns create contextual menus, and tables support hover and striped styling. Navigation breadcrumbs show location hierarchy, pagination handles multi-page content, and progress bars visualize completion. Badges and labels offer compact status indicators with semantic colors.
<!-- Accordion -->
<ul uk-accordion>
<li class="uk-open">
<a class="uk-accordion-title" href="#">Item 1</a>
<div class="uk-accordion-content">Content 1</div>
</li>
</ul>
<!-- Dropdown: uk-dropdown, mode: click/hover, pos: top-left, bottom-right, etc. -->
<div class="uk-inline">
<button class="uk-button uk-button-default">Menu</button>
<div uk-dropdown>
<ul class="uk-nav uk-dropdown-nav">
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
<!-- Table: uk-table, uk-table-divider, uk-table-striped, uk-table-hover, uk-table-small -->
<table class="uk-table uk-table-striped uk-table-hover">
...
</table>
<!-- Breadcrumb -->
<ul class="uk-breadcrumb">
<li><a href="#">Home</a></li>
<li><span>Current</span></li>
</ul>
<!-- Pagination: uk-pagination, uk-flex-center, uk-flex-right -->
<ul class="uk-pagination">
<li>
<a href="#"><span uk-pagination-previous></span></a>
</li>
<li class="uk-active"><span>1</span></li>
<li><a href="#">2</a></li>
<li>
<a href="#"><span uk-pagination-next></span></a>
</li>
</ul>
<!-- Progress -->
<progress class="uk-progress" value="50" max="100"></progress>
<!-- Badge & Label: uk-badge, uk-label, uk-label-success, uk-label-warning, uk-label-danger -->
<span class="uk-badge">5</span>
<span class="uk-label uk-label-success">Success</span>
<!-- Icons: <span uk-icon="heart"></span>, ratio: 2 for size -->
UIkit provides an extensive utility system for spacing, backgrounds, borders, shadows, visibility, and animations without requiring custom CSS. The margin and padding utilities use a scale system with directional variants for precise spacing control on any side. Background and border utilities handle visual styling, while visibility classes show or hide elements responsively. The scrollspy component triggers animations as elements enter the viewport, adding dynamic visual interest to page scrolling.
<!-- Margin: uk-margin, uk-margin-small, uk-margin-medium, uk-margin-large, uk-margin-remove, uk-margin-auto -->
<!-- Direction: uk-margin-top, uk-margin-bottom, uk-margin-left, uk-margin-right -->
<div class="uk-margin-medium-top">Margin medium top</div>
<!-- Padding: uk-padding, uk-padding-small, uk-padding-large, uk-padding-remove -->
<!-- Background: uk-background-default, uk-background-muted, uk-background-primary, uk-background-secondary -->
<!-- Border: uk-border-rounded, uk-border-circle, uk-border-pill -->
<!-- Shadow: uk-box-shadow-small, uk-box-shadow-medium, uk-box-shadow-large, uk-box-shadow-hover-* -->
<!-- Visibility: uk-hidden, uk-invisible, uk-hidden@s, uk-hidden@m, uk-visible@s, uk-visible@m -->
<div class="uk-hidden@s">Hidden on 640px and up</div>
<!-- Display: uk-display-block, uk-display-inline, uk-display-inline-block -->
<!-- Float: uk-float-left, uk-float-right, uk-clearfix -->
<!-- Overflow: uk-overflow-auto, uk-overflow-hidden -->
<!-- Animation: uk-animation-fade, uk-animation-scale-up, uk-animation-slide-top, uk-animation-slide-bottom -->
<!-- Scrollspy: <div uk-scrollspy="cls: uk-animation-fade">Fade on scroll</div> -->
<!-- Offcanvas -->
<button uk-toggle="target: #offcanvas">Menu</button>
<div id="offcanvas" uk-offcanvas>
<div class="uk-offcanvas-bar">
<button class="uk-offcanvas-close" uk-close></button>Content
</div>
</div>
<!-- Options: overlay: true, flip: true -->
