Hero illustration
Coming Soon

Stylish
UI components
for developers

Powerful HTML components that you can copy/paste to create new pages in just a few minutes 💪

Be the first to find out!
Key Features

Purpose UI gives you the power to rapidly concept and build your own websites using your favorite technologies.

Modular

Select and import what you need and use it in any combination.

Responsive

All components and pages are optimized to work on most devices.

Customizable

Change a few Sass variables and the whole website adapts instantly.

Scalable

Start small and add new features anytime, while remaining consistent.

Components

Detailed block and component library

Whether you’re building a simple page or coming up with concepts for a whole new web app, we’ve prepared the UI tools you need for an amazing development experience.

Stockholm-icons / Layout / Layout-4-blocks Created with Sketch.

Base Components

You'll find all the common elements: buttons, cards, avatars, and more.

Stockholm-icons / Layout / Layout-top-panel-2 Created with Sketch.

Application Components

All the components needed for building dashboards and admin panels.

Stockholm-icons / Layout / Layout-horizontal Created with Sketch.

Marketing Components

Find the sections you need and combine them into beautiful web pages.

Pages and Layouts

Beautiful collection of designer-made templates

Get your new web design project started with these amazing templates, or copy and paste elements into your existing projects to give them a creative boost.

Stockholm-icons / Design / Layers Created with Sketch.

Block-based pages

Pre-build and fully-responsive pages for multiple scenarios.

Stockholm-icons / Layout / Layout-left-panel-1 Created with Sketch.

Limitless layouts

Simple layout and page examples to quickly get a project started.

Stockholm-icons / Design / Pen&ruller Created with Sketch.

Complete design system

Align your projects and maintain consistency with a solid style guide.

Build Tools

Build tools and extensive documention

Automate painful or time-consuming tasks in your development workflow, so you can stop messing around and build something using Gulp, Webpack, or Laravel Mix.


$ npm install
# Everything in installed

$ npm run watch
# SCSS watching
# LiveReload started
# Opening localhost:3000

$ build something great
# That's it! when you're done run the command below:

$ npm run production
# Your CSS and JS were compiled and minified

Install via npm

Install all dependencies from your command line via npm.

Stockholm-icons / Code / Terminal Created with Sketch.

Compile source files

All JS, CSS, and Sass files will be automatically compiled.

Stockholm-icons / Code / Time-schedule Created with Sketch.

Live reload

Your browser will automatically refresh and display the changes.

What's inside

A combination of features to develop modern websites at ease.

Based on Bootstrap 5

Get started with Bootstrap, the world’s most popular CSS toolkit for building responsive, mobile-first sites.

Stockholm-icons / Design / Pen&ruller Created with Sketch.
Styleguide

Comprehensive style guide to help you adapt your projects and maintain consistency.

Stockholm-icons / Text / Font Created with Sketch.
Complete design system

Create beautiful and production-ready user interfaces, while remaining consistent.

Stockholm-icons / Design / Color Created with Sketch.
Meaningful Colors

Color variables and utilities offer powerful styling options without being tied to structure.

Stockholm-icons / Layout / Layout-grid Created with Sketch.
Flexible Grid

Use Bootstrap's flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system.

Stockholm-icons / Layout / Layout-arrange Created with Sketch.
Spacing System

Spacings bring vertical and horizontal consistency, while remaining flexible so you can tweak layouts when needed.

Stockholm-icons / Design / Component Created with Sketch.
Modular Approach

Depending on your project's purpose, you have multiple pre-built options to support your work.

Stockholm-icons / Devices / Tablet Created with Sketch.
100% Responsive

Breakpoints enable you to control when your layout can be adapted at a particular viewport or device size.

Get Early Access

Want to be among the first to find out?

We are working on the last details before we launch the 1st version of our UI components and templates library.