Installation

Tools is built on top of shadcn/ui components, providing a foundation for our library. Our components are designed to be opinionated for better consistency, while we work towards making them more flexible.

Prerequisites

Ensure you have a project set up with shadcn/ui. If not, follow the shadcn/ui installation guide to get started.

Install via Registry (Recommended)

All components are available through the @grenish shadcn registry. Add the registry to your components.json:

{
  "registries": {
    "@grenish": {
      "url": "https://tools-grenish.vercel.app/r/{name}.json"
    }
  }
}

Then install any component with the shadcn CLI:

npx shadcn@latest add @grenish/tweet-card
npx shadcn@latest add @grenish/editor
npx shadcn@latest add @grenish/signin-form

This automatically handles all dependencies, base components, and file placement.

Manual Installation

If you prefer manual setup, install the icon dependency:

npm install @phosphor-icons/react

Then install the required shadcn base components for each item (listed on individual component pages) and copy the source code manually.