Installation

Start with the local workspace. The public npm package and shadcn registry are not published yet.

On this page

1. Run the docs locally

Use pnpm 11.7.0. Clone the repository, install dependencies, and start the showcase.

Terminal

git clone https://github.com/parveshh/dethink-components.git
cd dethink-components
pnpm install
pnpm --filter @dethink/showcase dev

Open http://localhost:3005 to browse the examples.

2. Use the workspace package

For an app in this monorepo, add the local package to its dependencies and build it.

Your app’s package.json (dependencies)

{
  "@dethink/components": "workspace:*"
}

Terminal · repository root

pnpm install
pnpm --filter @dethink/components build

The showcase and playground already use the component source directly. They do not need this build step.

3. Add styles and a provider

Import the stylesheet once, then wrap your app in DethinkProvider. It sets the theme, spacing, and text direction for the components inside it.

App.tsx

import "@dethink/components/styles.css";
import { Button, DethinkProvider } from "@dethink/components";

export function App() {
  return (
    <DethinkProvider theme="light">
      <Button>Save changes</Button>
    </DethinkProvider>
  );
}

If your framework has a root stylesheet or layout, import the styles there. Follow the theming guide to change colors or density.

About the registry

The repository includes shadcn-compatible registry metadata. A public registry URL and namespace are still in progress. Use the workspace setup above for now.

Component examples use imports from @dethink/components. If you copy source files into another project, update the imports to match their new location and include their dependencies and shared styles.

Try your first component: Button