@octave-org/ui

A UI component library built on top of Mantine, designed for use with Next.js projects.

Note: This package is currently only stable on the Next.js Pages Router. App Router support is not guaranteed.

Installation

# npm
npm install @octave-org/ui

# yarn
yarn add @octave-org/ui

# pnpm
pnpm add @octave-org/ui

# bun
bun add @octave-org/ui

Setup

1. Update next.config.ts

Add @octave-org/ui to transpilePackages so Next.js can process the package correctly:

// next.config.ts
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  transpilePackages: ['@octave-org/ui'],
};

export default nextConfig;

2. Wrap your app with OctaveProvider

In your pages/_app.tsx, wrap your application with the OctaveProvider component to enable theming and notifications:

// pages/_app.tsx
import type { AppProps } from 'next/app';
import { OctaveProvider } from '@octave-org/ui';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <OctaveProvider>
      <Component {...pageProps} />
    </OctaveProvider>
  );
}

Usage

OctaveButton

Use OctaveButton to render a styled button. You can pass a label, an action handler, or a link.

import { OctaveButton } from '@octave-org/ui';

export default function MyPage() {
  return (
    <OctaveButton
      btnProps={{
        label: 'Click me',
        action: () => console.log('Button clicked!'),
        context: 'primary', // 'primary' | 'destructive' | 'success' | 'warning'
      }}
    />
  );
}

You can also render the button as a link:

<OctaveButton
  btnProps={{
    label: 'Go to Dashboard',
    link: '/dashboard',
    context: 'success',
  }}
/>