Tools

Components

A collection of beautiful, accessible, and installable components.

Last updated on

Browse the available components below. All components are installable via the @grenish shadcn registry — see the installation guide for one-time setup.

Quick Install

npx shadcn@latest add @grenish/<component-name>

Components

Individual, reusable UI components that can be composed into larger interfaces.

Blocks

Complete, multi-component compositions that form full page sections or flows.

Anatomy

Components are built using Tailwind CSS for styling and React for functionality. They are designed to be accessible and customizable. Each component ships as a self-contained file (or set of files for blocks) that gets placed in your project's component directory.

Example: Using a registry component
import { GoogleButton } from "@/components/tools/google-button"
import TweetCard from "@/components/tools/tweet-card"

export default function Demo() {
  return (
    <div className="space-y-4">
      <GoogleButton onClick={() => handleAuth()} />
      <TweetCard
        profileName="Grenish Rai"
        tweet="Just shipped an amazing new feature! 🚀"
        likes={2000}
      />
    </div>
  )
}

On this page