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

Social Integration

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

Pre-configured social media buttons with brand-appropriate styling and automatic link handling for community engagement.

Capabilities

TwitterButton

Pre-configured Twitter/X social button with Mantine branding and official links.

/**
 * Pre-configured Twitter button with Mantine branding
 * Automatically links to official Mantine Twitter account
 * Extends SocialButtonProps for flexible styling and link handling
 */
interface SocialButtonProps extends BoxProps, ElementProps<'a', 'type'> {
  icon?: React.ReactNode;
}

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

Usage Examples:

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

function SocialLinks() {
  return (
    <div>
      {/* Default Twitter button */}
      <TwitterButton />
      
      {/* With custom styling */}
      <TwitterButton className="my-custom-class" />
    </div>
  );
}

DiscordButton

Pre-configured Discord social button with Mantine branding and community server link.

/**
 * Pre-configured Discord button with Mantine branding
 * Automatically links to official Mantine Discord server
 * Extends SocialButtonProps for flexible styling and link handling
 */
function DiscordButton(props?: SocialButtonProps): JSX.Element;

Usage Examples:

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

function CommunitySection() {
  return (
    <div>
      <h3>Join our community</h3>
      <DiscordButton />
    </div>
  );
}

Combined Usage:

import { TwitterButton, DiscordButton } from "@mantine/ds";

function SocialFooter() {
  return (
    <div className="social-links">
      <h4>Connect with Mantine</h4>
      <div className="button-group">
        <TwitterButton />
        <DiscordButton />
      </div>
    </div>
  );
}