tessl/npm-mantine--ds

Internal Mantine components used on *.mantine.dev websites including Demo, MantineLogo, SearchControl, HeaderControl, and SocialButton components

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Brand Components

Name: tessl/npm-mantine--ds
Author: tessl

Brand identity components for consistent visual representation across Mantine properties, including the official logo and related brand assets.

Capabilities

MantineLogo

The official Mantine logo component with configurable display modes and styling options.

/**
 * Official Mantine logo component supporting full logo with text or mark-only display
 * @param type - Display type: 'full' shows logo with text, 'mark' shows only the icon
 * @param size - Logo size in pixels or CSS units
 * @param color - Logo color override
 */
interface MantineLogoProps extends LogoProps {
  type?: 'mark' | 'full';
}

function MantineLogo(props: MantineLogoProps): JSX.Element;

Usage Examples:

import { MantineLogo } from "@mantine/ds";

// Full logo with text (default)
function Header() {
  return <MantineLogo size={120} />;
}

// Icon/mark only
function Favicon() {
  return <MantineLogo type="mark" size={32} />;
}

// Custom styling
function BrandedHeader() {
  return (
    <MantineLogo 
      type="full" 
      size={100}
      color="blue"
      variant="mantine.dev"
    />
  );
}

// Inverted colors for dark backgrounds
function DarkHeader() {
  return (
    <MantineLogo 
      type="full" 
      size={120}
      inverted
    />
  );
}

Types

interface LogoProps extends React.ComponentPropsWithoutRef<'svg'> {
  /** Mantine color or CSS color value */
  color?: string;
  /** Logo variant for different Mantine sites */
  variant?: 'mantine.dev' | 'ui.mantine.dev';
  /** Logo size in pixels or CSS units */
  size?: number | string;
  /** Whether to use inverted colors */
  inverted?: boolean;
}