Develop your own dynamic forms builder with our React Form Builder library React Form Builder.
Kometa UI Kit
Free
We are giving away our first UI kit for free. It includes over 130 sections, built with TailwindCSS, for your awesome projects.
All the sections are fully responsive and available in HTML, VueJS, and React.
You can use them on unlimited personal and commercial projects.
The Config
This UI kit doesn't rely on any 3rd party plugins, or anything too custom. We've included a custom color palette & font family, and a couple of spacings and variants. Just copy the entire config, and you're ready to go.
Note that Kometa UI Kit is built on top of Tailwind CSS 1.4.1.
const defaultTheme = require('tailwindcss/defaultTheme');module.exports = {theme: {extend: {fontFamily: {sans: ['Montserrat', ...defaultTheme.fontFamily.sans],},colors: {red: {'50': '#ffebee','100': '#ffcdd2','200': '#ef9a9a','300': '#e57373','400': '#ef5350','500': '#f44336','600': '#e53935','700': '#d32f2f','800': '#c62828','900': '#b71c1c','accent-100': '#ff8a80','accent-200': '#ff5252','accent-400': '#ff1744','accent-700': '#d50000',},purple: {50: '#f3e5f5',100: '#e1bee7',200: '#ce93d8',300: '#ba68c8',400: '#ab47bc',500: '#9c27b0',600: '#8e24aa',700: '#7b1fa2',800: '#6a1b9a',900: '#4a148c','accent-100': '#ea80fc','accent-200': '#e040fb','accent-400': '#d500f9','accent-700': '#aa00ff',},'deep-purple': {50: '#ede7f6',100: '#d1c4e9',200: '#b39ddb',300: '#9575cd',400: '#7e57c2',500: '#673ab7',600: '#5e35b1',700: '#512da8',800: '#4527a0',900: '#311b92','accent-100': '#b388ff','accent-200': '#7c4dff','accent-400': '#651fff','accent-700': '#6200ea',},teal: {50: '#e0f2f1',100: '#b2dfdb',200: '#80cbc4',300: '#4db6ac',400: '#26a69a',500: '#009688',600: '#00897b',700: '#00796b',800: '#00695c',900: '#004d40','accent-100': '#a7ffeb','accent-200': '#64ffda','accent-400': '#1de9b6','accent-700': '#00bfa5',},indigo: {50: '#e8eaf6',100: '#c5cae9',200: '#9fa8da',300: '#7986cb',400: '#5c6bc0',500: '#3f51b5',600: '#3949ab',700: '#303f9f',800: '#283593',900: '#1a237e','accent-100': '#8c9eff','accent-200': '#536dfe','accent-400': '#3d5afe','accent-700': '#304ffe',},pink: {50: '#fce4ec',100: '#f8bbd0',200: '#f48fb1',300: '#f06292',400: '#ec407a',500: '#e91e63',600: '#d81b60',700: '#c2185b',800: '#ad1457',900: '#880e4f','accent-100': '#ff80ab','accent-200': '#ff4081','accent-400': '#f50057','accent-700': '#c51162',},blue: {50: '#e3f2fd',100: '#bbdefb',200: '#90caf9',300: '#64b5f6',400: '#42a5f5',500: '#2196f3',600: '#1e88e5',700: '#1976d2',800: '#1565c0',900: '#0d47a1','accent-100': '#82b1ff','accent-200': '#448aff','accent-400': '#2979ff','accent-700': '#2962ff',},'light-blue': {50: '#e1f5fe',100: '#b3e5fc',200: '#81d4fa',300: '#4fc3f7',400: '#29b6f6',500: '#03a9f4',600: '#039be5',700: '#0288d1',800: '#0277bd',900: '#01579b','accent-100': '#80d8ff','accent-200': '#40c4ff','accent-400': '#00b0ff','accent-700': '#0091ea',},cyan: {50: '#e0f7fa',100: '#b2ebf2',200: '#80deea',300: '#4dd0e1',400: '#26c6da',500: '#00bcd4',600: '#00acc1',700: '#0097a7',800: '#00838f',900: '#006064','accent-100': '#84ffff','accent-200': '#18ffff','accent-400': '#00e5ff','accent-700': '#00b8d4',},gray: {50: '#fafafa',100: '#f5f5f5',200: '#eeeeee',300: '#e0e0e0',400: '#bdbdbd',500: '#9e9e9e',600: '#757575',700: '#616161',800: '#424242',900: '#212121',},'blue-gray': {50: '#eceff1',100: '#cfd8dc',200: '#b0bec5',300: '#90a4ae',400: '#78909c',500: '#607d8b',600: '#546e7a',700: '#455a64',800: '#37474f',900: '#263238',},green: {50: '#e8f5e9',100: '#c8e6c9',200: '#a5d6a7',300: '#81c784',400: '#66bb6a',500: '#4caf50',600: '#43a047',700: '#388e3c',800: '#2e7d32',900: '#1b5e20','accent-100': '#b9f6ca','accent-200': '#69f0ae','accent-400': '#00e676','accent-700': '#00c853',},'light-green': {50: '#f1f8e9',100: '#dcedc8',200: '#c5e1a5',300: '#aed581',400: '#9ccc65',500: '#8bc34a',600: '#7cb342',700: '#689f38',800: '#558b2f',900: '#33691e','accent-100': '#ccff90','accent-200': '#b2ff59','accent-400': '#76ff03','accent-700': '#64dd17',},lime: {50: '#f9fbe7',100: '#f0f4c3',200: '#e6ee9c',300: '#dce775',400: '#d4e157',500: '#cddc39',600: '#c0ca33',700: '#afb42b',800: '#9e9d24',900: '#827717','accent-100': '#f4ff81','accent-200': '#eeff41','accent-400': '#c6ff00','accent-700': '#aeea00',},amber: {50: '#fff8e1',100: '#ffecb3',200: '#ffe082',300: '#ffd54f',400: '#ffca28',500: '#ffc107',600: '#ffb300',700: '#ffa000',800: '#ff8f00',900: '#ff6f00','accent-100': '#ffe57f','accent-200': '#ffd740','accent-400': '#ffc400','accent-700': '#ffab00',},yellow: {50: '#fffde7',100: '#fff9c4',200: '#fff59d',300: '#fff176',400: '#ffee58',500: '#ffeb3b',600: '#fdd835',700: '#fbc02d',800: '#f9a825',900: '#f57f17','accent-100': '#ffff8d','accent-200': '#ffff00','accent-400': '#ffea00','accent-700': '#ffd600',},orange: {50: '#fff3e0',100: '#ffe0b2',200: '#ffcc80',300: '#ffb74d',400: '#ffa726',500: '#ff9800',600: '#fb8c00',700: '#f57c00',800: '#ef6c00',900: '#e65100','accent-100': '#ffd180','accent-200': '#ffab40','accent-400': '#ff9100','accent-700': '#ff6d00',},'deep-orange': {50: '#fbe9e7',100: '#ffccbc',200: '#ffab91',300: '#ff8a65',400: '#ff7043',500: '#ff5722',600: '#f4511e',700: '#e64a19',800: '#d84315',900: '#bf360c','accent-100': '#ff9e80','accent-200': '#ff6e40','accent-400': '#ff3d00','accent-700': '#dd2c00',},brown: {50: '#efebe9',100: '#d7ccc8',200: '#bcaaa4',300: '#a1887f',400: '#8d6e63',500: '#795548',600: '#6d4c41',700: '#5d4037',800: '#4e342e',900: '#3e2723',},},spacing: {'7': '1.75rem','9': '2.25rem','28': '7rem','80': '20rem','96': '24rem',},height: {'1/2': '50%',},scale: {'30': '.3',},boxShadow: {outline: '0 0 0 3px rgba(101, 31, 255, 0.4)',},},},variants: {scale: ['responsive', 'hover', 'focus', 'group-hover'],textColor: ['responsive', 'hover', 'focus', 'group-hover'],opacity: ['responsive', 'hover', 'focus', 'group-hover'],backgroundColor: ['responsive', 'hover', 'focus', 'group-hover'],},plugins: [],};
Below you'll find more info about the color palette and the font family.
Color Palette
This UI kit was built on top of Material Design color palette. Teal and deep purple are the two main colors used in all components, however we've included the full Material Design color palette in the config, so you'll be able to easily switch the colors to match your brand and identity.
red
red-50
#ffebee
red-100
#ffcdd2
red-200
#ef9a9a
red-300
#e57373
red-400
#ef5350
red-500
#f44336
red-600
#e53935
red-700
#d32f2f
red-800
#c62828
red-900
#b71c1c
red-accent-100
#ff8a80
red-accent-200
#ff5252
red-accent-400
#ff1744
red-accent-700
#d50000
purple
purple-50
#f3e5f5
purple-100
#e1bee7
purple-200
#ce93d8
purple-300
#ba68c8
purple-400
#ab47bc
purple-500
#9c27b0
purple-600
#8e24aa
purple-700
#7b1fa2
purple-800
#6a1b9a
purple-900
#4a148c
purple-accent-100
#ea80fc
purple-accent-200
#e040fb
purple-accent-400
#d500f9
purple-accent-700
#aa00ff
deep purple
deep-purple-50
#ede7f6
deep-purple-100
#d1c4e9
deep-purple-200
#b39ddb
deep-purple-300
#9575cd
deep-purple-400
#7e57c2
deep-purple-500
#673ab7
deep-purple-600
#5e35b1
deep-purple-700
#512da8
deep-purple-800
#4527a0
deep-purple-900
#311b92
deep-purple-accent-100
#b388ff
deep-purple-accent-200
#7c4dff
deep-purple-accent-400
#651fff
deep-purple-accent-700
#6200ea
teal
teal-50
#e0f2f1
teal-100
#b2dfdb
teal-200
#80cbc4
teal-300
#4db6ac
teal-400
#26a69a
teal-500
#009688
teal-600
#00897b
teal-700
#00796b
teal-800
#00695c
teal-900
#004d40
teal-accent-100
#a7ffeb
teal-accent-200
#64ffda
teal-accent-400
#1de9b6
teal-accent-700
#00bfa5
indigo
indigo-50
#e8eaf6
indigo-100
#c5cae9
indigo-200
#9fa8da
indigo-300
#7986cb
indigo-400
#5c6bc0
indigo-500
#3f51b5
indigo-600
#3949ab
indigo-700
#303f9f
indigo-800
#283593
indigo-900
#1a237e
indigo-accent-100
#8c9eff
indigo-accent-200
#536dfe
indigo-accent-400
#3d5afe
indigo-accent-700
#304ffe
pink
pink-50
#fce4ec
pink-100
#f8bbd0
pink-200
#f48fb1
pink-300
#f06292
pink-400
#ec407a
pink-500
#e91e63
pink-600
#d81b60
pink-700
#c2185b
pink-800
#ad1457
pink-900
#880e4f
pink-accent-100
#ff80ab
pink-accent-200
#ff4081
pink-accent-400
#f50057
pink-accent-700
#c51162
blue
blue-50
#e3f2fd
blue-100
#bbdefb
blue-200
#90caf9
blue-300
#64b5f6
blue-400
#42a5f5
blue-500
#2196f3
blue-600
#1e88e5
blue-700
#1976d2
blue-800
#1565c0
blue-900
#0d47a1
blue-accent-100
#82b1ff
blue-accent-200
#448aff
blue-accent-400
#2979ff
blue-accent-700
#2962ff
light blue
light-blue-50
#e1f5fe
light-blue-100
#b3e5fc
light-blue-200
#81d4fa
light-blue-300
#4fc3f7
light-blue-400
#29b6f6
light-blue-500
#03a9f4
light-blue-600
#039be5
light-blue-700
#0288d1
light-blue-800
#0277bd
light-blue-900
#01579b
light-blue-accent-100
#80d8ff
light-blue-accent-200
#40c4ff
light-blue-accent-400
#00b0ff
light-blue-accent-700
#0091ea
cyan
cyan-50
#e0f7fa
cyan-100
#b2ebf2
cyan-200
#80deea
cyan-300
#4dd0e1
cyan-400
#26c6da
cyan-500
#00bcd4
cyan-600
#00acc1
cyan-700
#0097a7
cyan-800
#00838f
cyan-900
#006064
cyan-accent-100
#84ffff
cyan-accent-200
#18ffff
cyan-accent-400
#00e5ff
cyan-accent-700
#00b8d4
green
green-50
#e8f5e9
green-100
#c8e6c9
green-200
#a5d6a7
green-300
#81c784
green-400
#66bb6a
green-500
#4caf50
green-600
#43a047
green-700
#388e3c
green-800
#2e7d32
green-900
#1b5e20
green-accent-100
#b9f6ca
green-accent-200
#69f0ae
green-accent-400
#00e676
green-accent-700
#00c853
light green
light-green-50
#f1f8e9
light-green-100
#dcedc8
light-green-200
#c5e1a5
light-green-300
#aed581
light-green-400
#9ccc65
light-green-500
#8bc34a
light-green-600
#7cb342
light-green-700
#689f38
light-green-800
#558b2f
light-green-900
#33691e
light-green-accent-100
#ccff90
light-green-accent-200
#b2ff59
light-green-accent-400
#76ff03
light-green-accent-700
#64dd17
lime
lime-50
#f9fbe7
lime-100
#f0f4c3
lime-200
#e6ee9c
lime-300
#dce775
lime-400
#d4e157
lime-500
#cddc39
lime-600
#c0ca33
lime-700
#afb42b
lime-800
#9e9d24
lime-900
#827717
lime-accent-100
#f4ff81
lime-accent-200
#eeff41
lime-accent-400
#c6ff00
lime-accent-700
#aeea00
yellow
yellow-50
#fffde7
yellow-100
#fff9c4
yellow-200
#fff59d
yellow-300
#fff176
yellow-400
#ffee58
yellow-500
#ffeb3b
yellow-600
#fdd835
yellow-700
#fbc02d
yellow-800
#f9a825
yellow-900
#f57f17
yellow-accent-100
#ffff8d
yellow-accent-200
#ffff00
yellow-accent-400
#ffea00
yellow-accent-700
#ffd600
amber
amber-50
#fff8e1
amber-100
#ffecb3
amber-200
#ffe082
amber-300
#ffd54f
amber-400
#ffca28
amber-500
#ffc107
amber-600
#ffb300
amber-700
#ffa000
amber-800
#ff8f00
amber-900
#ff6f00
amber-accent-100
#ffe57f
amber-accent-200
#ffd740
amber-accent-400
#ffc400
amber-accent-700
#ffab00
orange
orange-50
#fff3e0
orange-100
#ffe0b2
orange-200
#ffcc80
orange-300
#ffb74d
orange-400
#ffa726
orange-500
#ff9800
orange-600
#fb8c00
orange-700
#f57c00
orange-800
#ef6c00
orange-900
#e65100
orange-accent-100
#ffd180
orange-accent-200
#ffab40
orange-accent-400
#ff9100
orange-accent-700
#ff6d00
deep orange
deep-orange-50
#fbe9e7
deep-orange-100
#ffccbc
deep-orange-200
#ffab91
deep-orange-300
#ff8a65
deep-orange-400
#ff7043
deep-orange-500
#ff5722
deep-orange-600
#f4511e
deep-orange-700
#e64a19
deep-orange-800
#d84315
deep-orange-900
#bf360c
deep-orange-accent-100
#ff9e80
deep-orange-accent-200
#ff6e40
deep-orange-accent-400
#ff3d00
deep-orange-accent-700
#dd2c00
brown
brown-50
#efebe9
brown-100
#d7ccc8
brown-200
#bcaaa4
brown-300
#a1887f
brown-400
#8d6e63
brown-500
#795548
brown-600
#6d4c41
brown-700
#5d4037
brown-800
#4e342e
brown-900
#3e2723
gray
gray-50
#fafafa
gray-100
#f5f5f5
gray-200
#eeeeee
gray-300
#e0e0e0
gray-400
#bdbdbd
gray-500
#9e9e9e
gray-600
#757575
gray-700
#616161
gray-800
#424242
gray-900
#212121
blue gray
blue-gray-50
#eceff1
blue-gray-100
#cfd8dc
blue-gray-200
#b0bec5
blue-gray-300
#90a4ae
blue-gray-400
#78909c
blue-gray-500
#607d8b
blue-gray-600
#546e7a
blue-gray-700
#455a64
blue-gray-800
#37474f
blue-gray-900
#263238
Font Family
Our font of choice for this UI kit was Montserrat. It is available for free on Google Fonts.
It can be easily installed by copying this code into your CSS:
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
Or by copying this code into the <head> of your HTML:
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
font-black
Montserrat is a cool font
font-extrabold
Montserrat is a cool font
font-bold
Montserrat is a cool font
font-semibold
Montserrat is a cool font
font-medium
Montserrat is a cool font
font-normal
Montserrat is a cool font
font-light
Montserrat is a cool font
font-thin
Montserrat is a cool font
font-hairline
Montserrat is a cool font
Less time coding.
More time building.
A marketplace of fully responsive, multi-purpose UI kits, built with Tailwind CSS, for start-ups and products of any kind.
