Getting startedInstallation

Installation

Install component source from the public registry, or run the local workspace below. The npm package is 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/dethink-ui/components.git
cd 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.

Install from the public registry

In an existing React and Tailwind CSS v4 project configured for shadcn, add a component by its registry URL. Its dependencies and shared setup files are included.

Terminal · your app

npx shadcn@latest add https://components.dethink.co.uk/r/button.json

Component examples use imports from @dethink/components. Registry files are copied into components/dethink/ at your project root. Update example imports to these copied paths, import components/dethink/styles.css once in your global stylesheet entry, and wrap your app with the copied DethinkProvider. In Next.js, use interactive components inside a client component boundary.

Try your first component: Button