# UI Tools: the package called mandatory is missing from its own install command

> UI Tools is a Next.js and TypeScript toolbox with four generators, mesh gradients, shadows, SVG clip paths and background snippets, plus a class-merging helper you write yourself. The README calls tailwindcss mandatory and then omits it from the command it shows.

**ui-layouts/ui-tools** — Open Source UI-TOOLS for Designer/Developer.

- Repository: https://github.com/ui-layouts/ui-tools
- Website: https://tools.ui-layouts.com/
- Stars: 774 · Forks: 44
- Language: TypeScript
- License: not declared
- Published: 2026-09-10 · Updated: 2026-09-10 · Language: en
- Canonical page: https://hysenlabs.com/projects/ui-layouts-ui-tools

## tailwindcss is declared mandatory and then left out of the command

The installation section opens by saying you must install tailwindcss, and the command immediately below does not install it. What the block contains is:

```bash
npm install motion clsx tailwind-merge
```

So the one package named as required is absent from the instruction that follows it, while the three that are present are the runtime helpers for the code underneath. clsx and tailwind-merge exist to feed the merging function, and motion is named in the same breath, since as most of the components use motion, install it too. The consequence of getting this wrong is not a visual difference. The merging function imports from both libraries by name, so a project that skipped them gets a failed module resolution at build time rather than a page that looks slightly off.

## utils.ts in the prose, utils.tsx in the code block

Two path names disagree with the blocks they introduce. The prose says to add the helper to `utils.ts`, and the fence above it is titled `utils.tsx`. For a file holding one import and one exported function the extension is immaterial to the compiler, but the two names in the same section are not the same name, and a reader copying the path has to guess. The second block has the mirror-image problem: its title is `use-media-query.tsx` and its contents are a React hook with no JSX in it, so the extension is heavier than the file needs. The sentence introducing it reads use this hooks for mediaQueries, where the plural article does not match the singular noun.

## The opening sentence advertises a color tool that is still unticked

The introduction names five things: shadow, SVG, gradient and background pattern generators, and color. The tools list has four entries. The TODO list has those same four ticked and a fifth left open, and the fifth is Colors with Shadcn/themes. So the color generator is described in the opening sentence, missing from the tools list, and marked unfinished in the one place the project tracks its own state. The same sentence has a second defect. It reads an open-source ui-tools for design engineers, developer, with a singular noun after a plural, and it closes on the word color with no verb attached to it. The repository description is shorter and says something different again: Open Source UI-TOOLS for Designer/Developer.

## Two of the four tool slugs cannot be derived from their names

Each tool has a slug under the same host, and the slugs do not follow the names. Mesh-Gradients is served from /mesh-gradients, which matches. Shadows is served from /shadows, which matches. Svg Clip-Path is served from /clip-paths, which drops the Svg entirely and turns a two-word name into a plural. BG Snippets is served from /background-snippets, which expands the two-letter abbreviation BG into the full word and turns a plural back into a singular. So half the links cannot be reconstructed from their own text by any rule, and anything that tries to enumerate the tools by pattern matching the links will miss two of four.

## Twenty-seven Radix primitives and a 3D renderer for four generators

The visible dependency list runs from `@hookform/resolvers` through `lucide-react` and describes a full component base rather than four generators. It carries twenty-seven `@radix-ui` packages, covering accordion, alert dialog, aspect ratio, avatar, checkbox, collapsible, context menu, dialog, dropdown menu, hover card, label, menubar, navigation menu, popover, progress, radio group, scroll area, select, separator, slider, slot, switch, tabs, toast, toggle, toggle group and tooltip. Alongside sit a 3D stack of `@react-three/fiber`, `@react-three/drei` and `@shadergradient/react`, plus `embla-carousel-react`, `cmdk`, `input-otp` and `date-fns`. The tools that the README documents are all two-dimensional CSS, so the renderer stack buys nothing that the four documented pages use.

## The fix script runs biome with unsafe, and there is no test script

The scripts cover five commands and not one of them runs a test. `dev` runs `next dev --turbopack`, `build` runs `next build`, and `start` runs `next start`. The two lint scripts both call biome: `biome check .` and `biome check --fix --unsafe`. The unsafe flag is the part worth reading twice, because it applies the fixes biome classifies as behaviour-changing rather than only the safe ones. So a developer who reaches for the fix script is opting into changes the tool declines to make by default, in a repository that has no command to check whether one of them broke something. There is no typecheck script either, though a tsconfig.json is committed.

## No licence file, no releases, and one document of 117 words

The repository ships one document and no terms. The root holds README.md and .gitignore, and that is the whole non-code root: no LICENSE file, no code of conduct, no security policy, no contributing guide, and no release history on GitHub. The package metadata names the package tools at version 0.1.0 and marks it private, so it is never published to a registry either. For a repository whose stated purpose is handing other people drop-in components, the missing licence is the part worth pausing on, because nothing in the repository states the terms under which the shadow generators, the clip paths or the background snippets may be reused or redistributed.

## The document opens with an unclosed tag and an empty anchor

The README also does not render as intended. It opens with a line break tag, then a centred paragraph element that is never closed, then an anchor pointing at the repository with nothing inside it where the logo belongs. The prose begins underneath that unclosed markup, so the first paragraph a reader sees is laid out inside a centred block it was never meant to sit in. The closing section repeats the pattern with a sponsor anchor that is also empty, and the only images in the file are inside those two empty anchors. The install command and the two code blocks are the parts of the document that render as written.

## Conclusion

UI Tools suits a design engineer who wants the four generators the repository actually ships, mesh gradients, shadows, clip paths and background snippets, and who is already inside a Next.js project with clsx and tailwind-merge wired into a cn helper. It does not suit anyone building on the rest of its description, because the color tool is listed as unfinished and the class-merging helper the documentation asks you to write is not part of any published package. Check three things before copying from it. Check whether tailwindcss is already in your project, since the README calls it mandatory and its install command omits it. Check the terms, because the repository has no licence file at all. And check the version, since the package is private at 0.1.0 with no releases.

## FAQ

### Does the UI Tools install command install tailwindcss?

No. The README says tailwindcss must be installed, and the command it shows is npm install motion clsx tailwind-merge. The same section names the file utils.ts while the code block is titled utils.tsx.

### Which tools does UI Tools currently ship?

Four: Mesh-Gradients, Shadows, Svg Clip-Path and BG Snippets. Colors with Shadcn/themes is the only unticked item in the TODO list, and it is the one the opening sentence advertises.

### What is UI Tools built on and how is it linted?

Next.js with TypeScript, linted by biome, with a bun lockfile committed. The dev script runs next dev --turbopack, and the two lint scripts are biome check . and biome check --fix --unsafe. There is no test script.

### Does the ui-tools repository have a licence?

No licence file appears at the repository root and the package metadata declares no licence. The package is named tools, sits at version 0.1.0, and is marked private, so it is not published to a registry.

## Sources

- [Issues](https://github.com/ui-layouts/ui-tools/issues)
- [Project website](https://tools.ui-layouts.com/)
- [README](https://github.com/ui-layouts/ui-tools/blob/main/README.md)
- [ui-layouts/ui-tools on GitHub](https://github.com/ui-layouts/ui-tools)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/ui-layouts-ui-tools