Copy, Customize, Ship: Why useLayouts Isn't a Locked npm UI Kit

Description and use

Developers often struggle to tweak UI components from npm packages. useLayouts lets you copy component source, enabling quick animation and style changes without complex overrides.

Problem

Frontend developers often need to tweak UI components after installing a library, but locked npm packages make small customizations cumbersome.

Outcome

Using the copy model, developers can quickly adjust animation details without forking or CSS hacks, improving workflow efficiency.

Workflow

• Add useLayouts registry to components.json
• Run npx shadcn@latest add @uselayouts/discrete-tabs
• Locate the component file in the project
• Edit the TABS array or animation parameters directly
• Commit changes

Evidence

When you add a component, you don't install a package. You get a file. It's yours. Change the number.

Source

An hour later you've written forty lines of override code to change one number.

Source