Getting Started

Install

@mav-labs-inc/mavkit-react shares its CSS and JS primitives with @mav-labs-inc/core-js, so both are installed together. React 19 is a peer dependency.


npm install @mav-labs-inc/mavkit-react

Both packages are published to the GitHub Packages registry (npm.pkg.github.com) under restricted access — you’ll need a .npmrc scoped to @mav-labs-inc with a token that has read access to the MAV-Labs-Inc/css-framework repo.

Import the framework CSS

Import it once, near the root of your app (e.g. your top-level layout or entry file):


import '@mav-labs-inc/core-js/css'

This pulls in design tokens, the reset, typography, layout utilities, and every component’s CSS.

Use a component

Every component is a named export from the package root:


import { Button } from '@mav-labs-inc/mavkit-react'
 
function Example() {
  return <Button variant="outline">Click me</Button>
}

Client components

The package is built with a top-level "use client" directive, so every component is safe to import directly into a React Server Component (an .mdx page, a Next.js App Router page.tsx, etc.) without wrapping it yourself — Next.js resolves the client boundary automatically the moment you reach into the package.

Shared primitives

Some behavior — button class-name generation, focus trapping, overlay stacking, viewport-snap math — lives in @mav-labs-inc/core-js/primitives and is re-exported from @mav-labs-inc/mavkit-react where useful (see Utilities). Reach for these directly if you’re styling a custom element the same way a MavKit component would (an <a> styled as a button, for example):


import { buttonClasses } from '@mav-labs-inc/mavkit-react'
 
<a href="/docs" className={buttonClasses({ variant: 'outline' })}>
  Docs
</a>