Statik UI
Docs
Install & Configure
Statik UI is built on top of TailwindCSS. The first step in using Statik UI is installing it!
Statik UI uses a couple of additions to the default Tailwind config. The easiest way to get started is to just copy our entire config:
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
theme: {
fontFamily: {
sans: ['Montserrat', ...defaultTheme.fontFamily.sans],
},
extend: {
borderRadius: {
lg: '1rem',
},
boxShadow: {
outline: '0 0 0 4px rgb(102, 126, 234, 0.5)',
'outline-dark': '0 0 0 4px rgb(0, 0, 0, 0.2)',
'outline-light': '0 0 0 4px rgb(255, 255, 255, 0.2)',
},
spacing: {
'2/3': '66.666667%',
'1/2': '50%',
},
animation: {
'-translate-100': '-translate-100 30s linear infinite',
},
keyframes: {
'-translate-100': {
'0%': { transform: 'translate3d(0, 0, 0)' },
'100%': { transform: 'translate3d(0, -50%, 0)' },
},
},
backgroundOpacity: {
15: '0.15',
},
},
},
variants: {
backgroundColor: [
'responsive',
'hover',
'focus',
'disabled',
'focus-within',
'group-hover',
],
textColor: ['responsive', 'hover', 'focus', 'active', 'group-hover'],
opacity: [
'responsive',
'hover',
'focus',
'disabled',
'group-hover',
'group-focus',
],
width: ['responsive', 'group-hover', 'group-focus'],
translate: [
'responsive',
'hover',
'focus',
'active',
'group-hover',
'group-focus',
],
scale: [
'responsive',
'hover',
'focus',
'active',
'group-hover',
'group-focus',
],
boxShadow: ['responsive', 'hover', 'focus', 'active', 'focus-within'],
borderColor: ['responsive', 'hover', 'focus', 'active', 'group-hover'],
borderRadius: [
'responsive',
'hover',
'focus',
'active',
'group-hover',
'group-focus',
],
backgroundOpacity: [
'responsive',
'hover',
'focus',
'active',
'group-hover',
],
},
}
Install Font
The last thing to do is include the Montserrat font. It's a free font from Google Fonts. You can include it either in your CSS:
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');Or in your HTML Head:
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">