Setup Guide
Installing packages
Install react-ui / preact-ui using your preferred package manager.
NPM
# React Components
npm i @konj-org/react-ui
# Preact Components
npm i @konj-org/preact-ui
PNPM
# React Components
pnpm add @konj-org/react-ui
# Preact Components
pnpm add @konj-org/preact-ui
Setup TailwindCSS
Follow the official TailwindCSS guide for your framework of choice, then modify the tailwind.config.js
to mimic the following configuration.
// tailwind.config.js
import colors from "tailwindcss/colors";
import containerQueries from "@tailwindcss/container-queries";
/** @type {import('tailwindcss').Config} */
const config = {
// ... //
content: [
// ... //
// Incase your using preact-ui //
"node_modules/@konj-org/preact-ui/**/*.tsx",
// Incase your using react-ui //
"node_modules/@konj-org/react-ui/**/*.tsx",
// ... //
],
theme: {
transitionTimingFunction: {
elastic: "cubic-bezier(0.68, 0, 0.32, 1.2)",
},
fontFamily: {
sans: [
"system-ui",
"-apple-system",
"BlinkMacSystemFont",
"Segoe UI",
"Roboto",
"Oxygen",
"Ubuntu",
"Cantarell",
"Open Sans",
"Helvetica Neue",
"sans-serif",
],
mono: [
"SF Mono",
"SFMono-Regular",
"ui-monospace",
"DejaVu Sans Mono",
"Menlo",
"Consolas",
"monospace",
],
},
extend: {
keyframes: {
"opacity-keyframes": {
"0%": {
opacity: 0,
},
"100%": {
opacity: 1,
},
},
"loading-keyframes": {
from: {
opacity: 0.5,
},
to: {
opacity: 1,
},
},
},
animation: {
"fade-in": "opacity-keyframes .5s ease-in-out forwards",
loading: "loading-keyframes infinite",
},
colors: {
// You can modify the primary color to your linking
primary: colors.green,
},
screens: {
standalone: {
raw: "(display-mode: standalone)",
},
"iphone-portrait": {
raw: `
(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait),
(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait),
(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait),
(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait),
(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)
`,
},
},
},
},
plugins: [
containerQueries,
// ... //
],
};
export default config;
Adding Global styling
Add the following CSS snippet to your global CSS file.
/* global.css */
*,
*::after,
*::before {
-webkit-tap-highlight-color: transparent;
}
*:focus-visible {
@apply accent-primary-500/60 dark:accent-primary-300/60 outline-primary-500/60 dark:outline-primary-300/60;
}
body {
@apply bg-neutral-50 dark:bg-neutral-950 text-black dark:text-white;
}
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
}
}
@media (prefers-color-scheme: light) {
:root {
color-scheme: light;
}
}
html[data-modal-open="true"] * {
touch-action: none;
}
html[data-modal-open="true"]
[data-dialog-open="true"]
[data-scrollable="true"]
* {
touch-action: auto;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
@apply appearance-none m-0;
}
Troubleshooting
Incase you're using an old version of npm, you might have to install peer dependencies manually. The peer dependencies include the following packages:
- class-variance-authority: Adds multiple styling state support single components.
- tailwind-merge: Adds class name merging support.
- @tailwindcss/container-queries: Providing container quires support for TailwindCSS.
npm install @tailwindcss/container-queries class-variance-authority tailwind-merge