Resources / Code snippets

Code snippets

The handful of imports that cover almost every use of the package.

Entry points

Import	Contents
@growth-protocol-ai/alpha	All components, their prop types, and cn()
@growth-protocol-ai/alpha/button	Button, buttonVariants, ButtonProps
@growth-protocol-ai/alpha/registry	COMPONENT_REGISTRY — server-safe metadata
@growth-protocol-ai/alpha/styles.css	The compiled stylesheet
@growth-protocol-ai/alpha/tokens.css	Design tokens alone

There is no wildcard subpath. Never import from @growth-protocol-ai/alpha/dist/… — it is not a public path.

Common shapes

Copy-paste

// A button that is really a link
<Button asChild variant="link">
  <a href="/pricing">See pricing</a>
</Button>

// A pending action that cannot be double-submitted
<Button loading={isSaving} onClick={save}>Save</Button>

// Compose class names
import { cn } from '@growth-protocol-ai/alpha';
<Button className={cn('my-utility', isWide && 'is-wide')}>Go</Button>

// A contextual override — data-slot is the one supported selector
.my-toolbar [data-slot='button'] { gap: 6px; }