UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
- Homepage - Learn more about UIkit
- @getuikit - Get the latest buzz on Twitter
- Discord Chat - Join our developer chat on Discord.
UIkit is an Open Source project developed by YOOtheme.
You have the following options to get UIkit:
- Download the latest release with pre-built CSS and JS.
- Install with npm to get all source files as they are available on GitHub:
npm install uikit
- Install with yarn to get all source files as they are available on GitHub:
yarn add uikit
- Directly load UIkit from jsDelivr: https://www.jsdelivr.com/package/npm/uikit
- Clone the repo to get all source files including build scripts:
git clone git://github.com/uikit/uikit.git
To always have the latest development version of UIkit, even before a release, you may want to use npm or yarn with the
- Using npm:
npm install [email protected]
- Using yarn:
yarn add [email protected]
- Using cdn: https://cdn.jsdelivr.net/npm/[email protected]
Finding bugs, sending pull requests or improving our docs - any contribution is welcome and highly appreciated. To get started, head over to our contribution guidelines. Thanks!
UIkit is maintained by using the Semantic Versioning Specification (SemVer).
Copyright and License
Copyright YOOtheme GmbH under the MIT license.
UIkit 3 Ideas and Suggestions
UPDATE: Get ready... UIkit 3 beta is coming on Monday 9th, January 🎉💥
We would love to get your feedback and ideas for UIkit 3. Just post them here.
The following lists are a short roundup of all feature requests below (hope I did not miss one) and what our thoughts are about them. I will update the list if new ideas are posted.
On our todo list
Following feature requests are planned or already in development.
Following feature requests are taken into consideration.
.psdfile for quicker mockups
Not very likely
Following feature requests will most likely not be added to UIkit. But no final decision made. So it is open for discussion.
Following feature requests are already available in UIkit.
uk-hidden-small) - Docs, Test
Please don't use this thread to report bugs. Instead open a new issue.
interested in [official] SASS port of uikit
Are you guys interested in an SASS port for this project?
Originally I am a bootstrapper, but I like the style and structure of uikit.
I am not new to this, previously I was one of the contributor of the jlong/sass-bootstrap project. Did the translation for many bootstrap 2.x and 3.x versions.
I don't know, if a project-fork is the right decision, as the guys did for twbs/bootstrap-sass. Maybe a
scssdirectory structure inside this repo would be fine. With some smart conversion scripts around. But that is to much detail for the moment.
What are your thoughts..?
Icons not showing (beta7)
I updated the less and js files to the latest beta7 and the icons are not appearing, then i replaced the uikit.js with the beta6 one and they appear again. I get no errors in the console so i have no idea what's wrong
Also i would like to suggest a global variable for the directory of the icons, that way 99.99% of the people will just replace one variable instead of 32457398472398792, thanks
Where is the Date and Time Picker?
Sorry if I'm asking this here but where is the Date and Time Picker? There's no way to customize the current I can't find JS and CSS that refers to it also.
Dropdown with Multiple checkbox select
Hi UiKit Team, u did awesome framework for developers and compared to bootstrap ur given full feature and functionality. and one more i request to you pls develop Dropdown with Multiple checkbox select option, for example find bellow one link http://hemantnegi.github.io/jquery.sumoselect/sumoselect_demo.html
i dont want to use external plugin for developement. i want to use only one that is your file . so pls develeop it
UIKit3: Icons don't work.
<span uk-icon="icon: check"></span>icons.svg are not loaded, because there are loaded from path 'css/dist/images'. In project we have dir: css, js and images where are icons.svg.
Feature request - Sticky Footer
This may already be possible, but there is nothing in the documentation for it, so am guessing it currently is not. But it would be great if the Sticky component could be used to make a sticky footer.
Thanks very much :)
CDN auto-update broken
I'm Peter from @cdnjs, as requested in #153, @aheinze made a pull request: https://github.com/cdnjs/cdnjs/pull/2189 to host uikit on cdnjs, to make sure the human works minimum, I further enabled auto-update in https://github.com/cdnjs/cdnjs/commit/5a6c3a0dc2c3331a1a114859186f93fa0eaca96a, which will pull new releases via git tags, using
dist/folder, however, this folder seems to be removed since v2.27.3, which makes auto-update broken on CDNJS, I wonder if is possible to add it back so that we can pull the latest release automatically? Thanks a lot!
uk-tabs will change from click and dragging mouse inside tab content in IE, Edge, and older Chrome
Using the uk-tab functionality, we have run into a major bug that occurs in older versions of Chrome + newest version on older OSX, plus newest versions of Edge and Internet Explorer.
While inside an active uk-tab, if I click and drag to the left or the right, the active tab changes. This is a major issue for us. Here is an example: http://codepen.io/eroc/pen/NRVJKB
Click next to the h1 inside the tab's content, and drag to the left or right and you will see the tabs change.
I have observed this behavior on the following operating systems and browsers: Mac OS X Mavericks v.10.9.5 - Chrome - latest version 54.0.2840.71 Mac OS X El Capitan v.10.11.6 - Chrome version 53.0.2785 (it is working in latest v 54.0.2840.71) Windows 10 - Microsoft Edge - latest version 38.14393 Windows 10 - Microsoft IE11 - latest versions 11.187.143
*please note the windows machines are NOT touch devices.
How to use with npm and webpack
Are there any examples of how to use this with NPM? All the documentation says is to do
npm install uikitbut not on how to actually use it/include additional components such as
When I try the following code in my main
I get the following error:
Module not found: Error: Can't resolve 'uikit'
Has anyone used uikit with webpack/webpack2?
Double uk-icon when inside vue.js instance element
https://jsfiddle.net/egw6ha1g/6/ (every time in chrome & firefox, 2s timer) https://jsfiddle.net/egw6ha1g/4/ (every time in chrome, sometimes in firefox) (search for uk-icon in the HTML) (this is race condition, if vue.js loads first then the problem doesn't manifest itself)
Steps to reproduce
Put an element with
uk-icontag inside of vue.js instance element.
What is Expected?
One icon appears.
What is actually happening?
Two icons appear.
I'm assuming this is because vue.js re-adds the elements after it parses them, causing uikit notice another uk-icon tag and it just adds the icon. Not sure if this is uikit or vue.js bug.
Navbar broken afer 3.15.19 update
Updating 3.5.9 to 3.15.19 breaks navbar, sticky, parallax....
Margins also disappeared in navbar, the same problem even on Ukit's example pages. https://getuikit.com/docs/navbar
This code works fine on version 3.5.9, switch to version 3.15.19 and everything breaks.
uk-scroll prevent href="#link" from working
UIkit Version 3.15.14
What happened? Screenshots please, if relevant! I am using one-site page (my-domain.com), where are anchors to another site , ie. cookies page (my-domain.com/cookies). But on my navigation I am using hashtag navigation (my-domain.com/#about-us etc.), When I am on Cookies page and want to use hashtag navigation, it stops working!
What should have happened? Redirecting from my-domain.com/cookies to my-domain.com/#about-us should have worked.
Steps to Reproduce the Problem
no aria-expanded for toggle modal-dialogs
The recommend markup to open a modal-dialog is with uk-toggle. BUT uk-toggle adds aria-expanded="false" to the HTML-element. This is wrong behaviour for modal-dialogs (see WCAG).
If I use uk-toggle AND the target is a uk-modal THEN there should not be an automatic aria-expanded on the uk-toggle.
When opening modal with iframe in it, the dimensions of the modal cannot be in percent
I want to load HTML like an article from Joomla into a modalbox using uikit modal function. The dimensions of that modal should harmonize with the available screen width. This could be achieved easily by setting the dimensions in percent values. But the uk-modal does not allow, setting dimensions in percent.
Feature Request: It should be possible, to set dimensions of a modalbox with an iframe in it in percent values.
5 - because I need this function in my new websites.
Article Slider empty slides on tags in joomla plugin
We use ukit slider and article in combination as plugin for joomla 4.2.5 php8.1.
the slider shows all slides for the posts. But as soon as keywords are added and these are selected, the filtering goes haywire and shows too many slides instead of just the ones selected via tags.
You can test it here: https://codepen.io/WM-Loose/pen/dyKLPRx
All and Tag1 is ok but Tag2 not.
Hope you can help!
Greatings from germany Dirk
When opening a modal with audio in it, audio won't stop after closing the modal
When I start a modal window with an audio in the modalbox and I start playing the audio and then closing the modal box, the audio will keep on playing. In the uikit description for playing videos in a modalbox, they give a strong advice, to add "uk-video" at the end of the src definition. Consequently I am missing the function of a "uk-audio" term.
Please add the missing event handler to uk-audio!
PS: I am using YOOtheme pagebuilder and do not want to use their lightbox instead of the modal because of many flaws.
_On a scale of 1-5, how important is this feature to you? It is of big importance = 5 for me, because actually I am redesigning my two websites and do want this function in both websites.