ui-layouts/ui-tools

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.

Installation

You must install tailwindcss. As most of our components use motion install it too.

npm install motion clsx tailwind-merge

Must 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;
}

Tools

• Mesh-Gradients
• Shadows
• Svg Clip-Path
• BG Snippets

TODO List

• Shadows
• Svg Clip-Path
• BG Snippets
• Mesh-Gradients
• Colors with Shadcn/themes

👤 Author (Naymur)

• X: @naymur_dev
• LinkedIn: in/naymur-rahman

Be A Sponsor