UI Tools is an open-source ui-tools for design engineers, developer. It's a creative toolbox featuring shadow, SVG, gradient, and background pattern generators, color. Open-source, fast, and made for builders.
You must install tailwindcss. As most of our components use motion install it too.
npm install motion clsx tailwind-mergeMust Add it in the utils.ts:
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}use this hooks for mediaQueries:
import { useEffect, useState } from "react";
export function useMediaQuery(query: string) {
const [value, setValue] = useState(false);
useEffect(() => {
function onChange(event: MediaQueryListEvent) {
setValue(event.matches);
}
const result = matchMedia(query);
result.addEventListener("change", onChange);
setValue(result.matches);
return () => result.removeEventListener("change", onChange);
}, [query]);
return value;
}- Shadows
- Svg Clip-Path
- BG Snippets
- Mesh-Gradients
- Colors with Shadcn/themes
- X: @naymur_dev
- LinkedIn: in/naymur-rahman