ForgeJo

React (Manual)

PreviousNext

Manually install COSM UI Kit into any React project.

Configure Nexus Registry

Create or update .npmrc in your project root:

@cosm:registry=https://nexus.cloud.cosm-lab.science/repository/cosm-npm/
//nexus.cloud.cosm-lab.science/repository/cosm-npm/:_auth=<base64-auth-token>

Install package

pnpm add @cosm/ui

Configure CSS

In your main CSS file, add the following imports. Make sure Tailwind CSS v4 is already set up in your project. The @source directive tells Tailwind CSS to scan the @cosm/ui package for class usage since it does not ship pre-compiled Tailwind output:

src/index.css
@import "tailwindcss";
@import "tw-animate-css";
@import "@cosm/ui/style.css";
 
@source "../node_modules/@cosm/ui";

Configure GlobalStyles

@cosm/ui ships its font (Involve) via styled-components GlobalStyles. Render it once at the root of your application:

src/App.tsx
import { GlobalStyles } from "@cosm/ui/global-styles"
 
export default function App() {
  return (
    <>
      <GlobalStyles />
      {/* your components */}
    </>
  )
}

That's it

You can now import and use any component from @cosm/ui:

src/App.tsx
import { Button } from "@cosm/ui/button"
 
function App() {
  return (
    <div className="flex min-h-svh items-center justify-center">
      <Button>Click me</Button>
    </div>
  )
}
 
export default App