CtrlK
BlogDocsLog inGet started
Tessl Logo

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

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

@mantine/ds

@mantine/ds is an internal component library designed specifically for use on Mantine-related websites (*.mantine.dev). It provides essential UI components, demo systems, brand elements, and navigation controls that maintain consistency across Mantine's documentation sites and marketing materials.

Package Information

  • Package Name: @mantine/ds
  • Package Type: npm (scoped)
  • Language: TypeScript
  • Installation: npm install @mantine/ds

Core Imports

import { 
  Demo, 
  MantineLogo,
  SearchControl,
  HeaderControl,
  TwitterButton,
  DiscordButton,
  meta
} from "@mantine/ds";

For CommonJS:

const { 
  Demo, 
  MantineLogo,
  SearchControl,
  HeaderControl,
  TwitterButton,
  DiscordButton,
  meta
} = require("@mantine/ds");

Basic Usage

import { Demo, MantineLogo, SearchControl, DiscordButton } from "@mantine/ds";

// Brand logo with different types
function Header() {
  return (
    <div>
      {/* Full logo with text */}
      <MantineLogo type="full" size={120} />
      
      {/* Just the mark/icon */}
      <MantineLogo type="mark" size={40} />
    </div>
  );
}

// Demo system for component examples
function ComponentDemo() {
  const demoData = {
    type: 'code',
    component: MyComponent,
    code: `<MyComponent prop="value" />`
  };
  
  return <Demo data={demoData} />;
}

// Navigation controls
function SiteHeader() {
  return (
    <div>
      <SearchControl onClick={() => openSearch()} />
      <DiscordButton />
    </div>
  );
}

Architecture

@mantine/ds is built around several key component categories:

  • Brand Components: Logo and visual identity elements (MantineLogo)
  • Demo System: Flexible demo rendering with support for code, configurator, and styles-api demos (Demo, CodeDemo, ConfiguratorDemo, StylesApiDemo)
  • Navigation Controls: Header controls for search, settings, and external links (SearchControl, HeaderControl variants)
  • Social Integration: Pre-configured social media buttons (TwitterButton, DiscordButton)
  • Icon Library: Brand-specific icons for platforms and technologies (DiscordIcon, TwitterIcon, etc.)
  • Configuration: Meta constants for links and brand colors (meta)

Capabilities

Brand & Logo Components

Logo and brand identity components for consistent visual representation across Mantine properties.

type MantineLogoVariant = 'mantine.dev' | 'ui.mantine.dev';

interface MantineLogoProps extends LogoProps {
  type?: 'mark' | 'full';
}

interface LogoProps extends React.ComponentPropsWithoutRef<'svg'> {
  color?: MantineColor;
  variant?: MantineLogoVariant;
  size?: number | string;
  inverted?: boolean;
}

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

Brand Components

Demo System

Complete demo rendering system supporting multiple demo types with syntax highlighting and interactive controls.

type MantineDemo = 
  | ({ type: 'code' } & DemoComponent & CodeDemoProps)
  | ({ type: 'configurator' } & DemoComponent & ConfiguratorDemoProps)
  | ({ type: 'styles-api' } & DemoComponent & StylesApiDemoProps);

interface DemoProps {
  data: MantineDemo;
}

function Demo(props: DemoProps): JSX.Element;

Demo System

Navigation & Controls

Header controls for search functionality, settings toggles, and navigation elements.

interface HeaderControlProps extends BoxProps {
  tooltip: string;
  children: React.ReactNode;
}

interface HeaderControlsProps extends BoxProps {
  onSearch?: () => void;
  githubLink?: string;
  withDirectionToggle?: boolean;
  withSearch?: boolean;
  withGithub?: boolean;
  withDiscord?: boolean;
  discordLink?: string;
  withColorScheme?: boolean;
}

interface SearchControlProps extends BoxProps, ElementProps<'button'> {}

function SearchControl(props: SearchControlProps): JSX.Element;
function HeaderControl(props: HeaderControlProps): JSX.Element;
function HeaderControls(props: HeaderControlsProps): JSX.Element;
function GithubControl(props: { link: string }): JSX.Element;
function DiscordControl(props: { link?: string }): JSX.Element;
function SearchMobileControl(props: { onSearch: () => void }): JSX.Element;
function ColorSchemeControl(): JSX.Element;
function DirectionControl(): JSX.Element;

Navigation Controls

Social Integration

Pre-configured social media buttons with brand-appropriate styling and links.

interface SocialButtonProps extends BoxProps, ElementProps<'a', 'type'> {
  icon?: React.ReactNode;
}

function TwitterButton(props?: SocialButtonProps): JSX.Element;
function DiscordButton(props?: SocialButtonProps): JSX.Element;

Social Integration

Icon Library

Brand-specific icons for platforms, technologies, and social media.

interface IconProps {
  size?: number | string;
  style?: React.CSSProperties;
}

function DiscordIcon(props: IconProps): JSX.Element;
function TwitterIcon(props: IconProps): JSX.Element;
function GithubIcon(props: IconProps): JSX.Element;
function NpmIcon(props: IconProps): JSX.Element;
function YarnIcon(props: IconProps): JSX.Element;
function TypeScriptIcon(props: IconProps): JSX.Element;
function TypeScriptCircleIcon(props: IconProps): JSX.Element;
function CssIcon(props: IconProps): JSX.Element;

Icon Library

Configuration & Meta

Constants and configuration objects for consistent branding and external links.

interface MetaConfig {
  docsLink: string;
  uiLink: string;
  discordLink: string;
  twitterLink: string;
  npmLink: string;
  discordColor: string;
  twitterColor: string;
  gitHubLinks: {
    mantine: string;
    mantineUi: string;
    discussions: string;
    organization: string;
    releases: string;
  };
}

const meta: MetaConfig;

Configuration

Types

interface DemoComponent {
  component: React.FC<any>;
}

type MantineColor = string;
type BoxProps = Record<string, any>;
type ElementProps<T extends keyof JSX.IntrinsicElements, U extends string = never> = 
  Omit<JSX.IntrinsicElements[T], U>;

type ConfiguratorControlOptions = 
  | ConfiguratorBooleanControlOptions
  | ConfiguratorSegmentedControlOptions
  | ConfiguratorColorControlOptions
  | ConfiguratorStringControlOptions
  | ConfiguratorSelectControlOptions
  | ConfiguratorSizeControlOptions
  | ConfiguratorNumberControlOptions;

function getCodeFileIcon(fileName: string): React.ReactNode | null;
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@mantine/ds@7.2.x
Publish Source
CLI
Badge
tessl/npm-mantine--ds badge