ForgeJo

Next.js

PreviousNext

Install and configure COSM UI Kit for Next.js.

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

Replace everything in your global CSS file with the following imports. The @source directive tells Tailwind CSS to scan the @cosm/ui package for class usage since it does not ship pre-compiled Tailwind output:

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

Configure ThemeProvider

@cosm/ui ships its font (Involve) via styled-components GlobalStyles. Create a client-side ThemeProvider that wraps next-themes and renders GlobalStyles:

components/theme-provider.tsx
"use client"
 
import * as React from "react"
import { ThemeProvider as NextThemesProvider } from "next-themes"
import { GlobalStyles } from "@cosm/ui/global-styles"
 
export function ThemeProvider({
  children,
  ...props
}: React.ComponentProps<typeof NextThemesProvider>) {
  return (
    <NextThemesProvider
      attribute="class"
      defaultTheme="system"
      enableSystem
      disableTransitionOnChange
      enableColorScheme
      {...props}
    >
      <GlobalStyles />
      {children}
    </NextThemesProvider>
  )
}

Then wrap your application in app/layout.tsx:

app/layout.tsx
import { ThemeProvider } from "@/components/theme-provider"
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  )
}

That's it

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

app/page.tsx
import { Button } from "@cosm/ui/button"
 
export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}