Aura

Aura exports Cognite's UI components, styles, utilities, and ESLint guidance for preserving the design system in downstream apps.

DESIGN.md (Google design.md linter)

DESIGN.md is linted with @google/design.md (listed in this package’s devDependencies). After pnpm install in the Fusion workspace, run the CLI’s lint subcommand—no dlx needed.

Published installs ship this spec at the package root; you can resolve it as @cognite/aura/DESIGN.md (for example with import.meta.resolve or your bundler’s raw import).

From fusion/libs/aura:

pnpm exec design.md lint ./DESIGN.md

From the Fusion workspace root:

pnpm --filter @cognite/aura exec design.md lint ./DESIGN.md

Or with Nx:

nx run aura:design-md-lint

ESLint

Aura ships an ESLint plugin at @cognite/aura/eslint.

What it does

The aura/no-overriding-styles rule warns when consumers pass visual Tailwind-style utilities to Aura or Aura Labs components via className.

It is intended to preserve Aura's out-of-the-box appearance while still allowing host apps to control layout and sizing.

Allowed examples:

• w-full
• ml-auto
• hidden md:flex
• grid-cols-2
• max-w-[32rem]

Warned examples:

• bg-card
• text-xs
• rounded-lg
• shadow-none
• animate-pulse

The rule also provides suggestions and autofix for simple static className values by removing disallowed classes and keeping layout-safe utilities.

Usage

Add the Aura plugin to your ESLint config and enable the rule:

import { auraEslintPlugin } from '@cognite/aura/eslint';

export default [
  {
    files: ['**/*.{ts,tsx,js,jsx}'],
    plugins: {
      aura: auraEslintPlugin,
    },
    rules: {
      'aura/no-overriding-styles': 'warn',
    },
  },
];

Example

import { Button } from '@cognite/aura/components';

export function Example() {
  return <Button className="w-full ml-auto bg-card rounded-lg" />;
}

The rule keeps the layout-safe classes and warns about the visual overrides:

• kept: w-full, ml-auto
• warned: bg-card, rounded-lg

Use Aura variants, props, or composition when you need to change the component's appearance.