tessl/npm-mantine--core

React components library focused on usability, accessibility and developer experience

—

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

Feedback Components

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

@mantine/core provides comprehensive feedback and status components to communicate system state, loading conditions, and user notifications effectively. These components enhance user experience through clear visual communication.

Alert

Alert component for displaying important messages with various severity levels.

interface AlertProps {
  /** Alert title */
  title?: React.ReactNode;
  /** Alert content */
  children?: React.ReactNode;
  /** Alert icon, displayed on the left */
  icon?: React.ReactNode;
  /** If true, close button will be displayed */
  withCloseButton?: boolean;
  /** Called when close button is clicked */
  onClose?: () => void;
  /** Alert variant */
  variant?: 'light' | 'filled' | 'outline' | 'default';
  /** Alert color theme */
  color?: MantineColor;
  /** Alert radius */
  radius?: MantineRadius;
  /** Alert size */
  size?: MantineSize;
}

Usage Example:

import { Alert } from '@mantine/core';

function AlertDemo() {
  return (
    <>
      <Alert title="Information" color="blue" variant="light">
        This is an informational alert
      </Alert>

      <Alert 
        title="Warning" 
        color="yellow" 
        variant="filled"
        icon="⚠️"
        withCloseButton
        onClose={() => console.log('Alert closed')}
      >
        This is a warning message
      </Alert>

      <Alert title="Error" color="red" variant="outline">
        Something went wrong
      </Alert>

      <Alert title="Success" color="green">
        Operation completed successfully
      </Alert>
    </>
  );
}

Notification

Notification component for displaying temporary messages, typically used in notification systems.

interface NotificationProps {
  /** Notification title */
  title?: React.ReactNode;
  /** Notification message */
  children?: React.ReactNode;
  /** Notification icon */
  icon?: React.ReactNode;
  /** If true, close button will be displayed */
  withCloseButton?: boolean;
  /** Called when close button is clicked */
  onClose?: () => void;
  /** Notification variant */
  variant?: 'light' | 'filled' | 'outline' | 'default';
  /** Notification color theme */
  color?: MantineColor;
  /** Notification radius */
  radius?: MantineRadius;
  /** If true, notification will have border */
  withBorder?: boolean;
  /** Notification loading state */
  loading?: boolean;
}

Usage Example:

import { Notification } from '@mantine/core';

function NotificationDemo() {
  return (
    <>
      <Notification title="Default notification">
        This is default notification
      </Notification>

      <Notification
        title="Success notification"
        icon="✅"
        color="teal"
        onClose={() => console.log('Notification closed')}
      >
        Your changes have been saved
      </Notification>

      <Notification
        loading
        title="Uploading data"
        withCloseButton={false}
      >
        Please wait until data is uploaded
      </Notification>
    </>
  );
}

Progress

Linear progress bar component with sections and labels support.

interface ProgressProps {
  /** Progress value (0-100) */
  value?: number;
  /** Progress color theme */
  color?: MantineColor;
  /** Progress size */
  size?: MantineSize | number;
  /** Progress radius */
  radius?: MantineRadius;
  /** If true, progress will be striped */
  striped?: boolean;
  /** If true, progress stripes will be animated */
  animate?: boolean;
  /** Progress label */
  label?: string;
  /** Progress sections for multi-colored progress */
  sections?: ProgressSection[];
}

interface ProgressRootProps {
  /** Progress root children */
  children: React.ReactNode;
  /** Progress size */
  size?: MantineSize | number;
  /** Progress radius */
  radius?: MantineRadius;
}

interface ProgressSectionProps {
  /** Section value (0-100) */
  value: number;
  /** Section color */
  color?: MantineColor;
  /** Section label */
  label?: string;
  /** If true, section will be striped */
  striped?: boolean;
  /** If true, section stripes will be animated */
  animate?: boolean;
  /** Section tooltip */
  tooltip?: React.ReactNode;
}

interface ProgressLabelProps {
  /** Label content */
  children: React.ReactNode;
}

interface ProgressSection {
  /** Section value */
  value: number;
  /** Section color */
  color: MantineColor;
  /** Section label */
  label?: string;
  /** Section tooltip */
  tooltip?: React.ReactNode;
}

Usage Example:

import { Progress } from '@mantine/core';

function ProgressDemo() {
  return (
    <>
      {/* Simple progress */}
      <Progress value={75} />

      {/* Progress with label */}
      <Progress value={40} label="40%" size="xl" radius="xl" />

      {/* Striped and animated progress */}
      <Progress value={65} striped animate color="lime" />

      {/* Multi-section progress */}
      <Progress
        sections={[
          { value: 33, color: 'pink' },
          { value: 20, color: 'grape' },
          { value: 15, color: 'violet' },
        ]}
      />

      {/* Compound component usage */}
      <Progress.Root size="xl">
        <Progress.Section value={35} color="cyan">
          <Progress.Label>Documents</Progress.Label>
        </Progress.Section>
        <Progress.Section value={28} color="pink">
          <Progress.Label>Photos</Progress.Label>
        </Progress.Section>
        <Progress.Section value={15} color="orange">
          <Progress.Label>Other</Progress.Label>
        </Progress.Section>
      </Progress.Root>
    </>
  );
}

RingProgress

Circular progress indicator with multiple sections support.

interface RingProgressProps {
  /** Progress sections */
  sections: RingProgressSection[];
  /** Ring thickness */
  thickness?: number;
  /** Ring size */
  size?: number;
  /** Ring progress label */
  label?: React.ReactNode;
  /** Root element props */
  rootColor?: string;
  /** Curve round caps */
  roundCaps?: boolean;
}

interface RingProgressSection {
  /** Section value (0-100) */
  value: number;
  /** Section color */
  color: MantineColor;
  /** Section tooltip */
  tooltip?: React.ReactNode;
}

Usage Example:

import { RingProgress, Text } from '@mantine/core';

function RingProgressDemo() {
  return (
    <>
      {/* Simple ring progress */}
      <RingProgress
        sections={[{ value: 40, color: 'blue' }]}
        label={
          <Text c="blue" fw={700} ta="center" size="xl">
            40%
          </Text>
        }
      />

      {/* Multiple sections */}
      <RingProgress
        sections={[
          { value: 40, color: 'cyan' },
          { value: 25, color: 'orange' },
          { value: 15, color: 'grape' },
        ]}
        label={
          <div>
            <Text ta="center" fz="lg" fw={700}>
              Application data usage
            </Text>
            <Text ta="center" fz="sm" c="dimmed">
              476 gb / 600 gb
            </Text>
          </div>
        }
      />

      {/* With tooltips */}
      <RingProgress
        sections={[
          { value: 30, color: 'pink', tooltip: 'Documents – 30 Gb' },
          { value: 15, color: 'grape', tooltip: 'Apps – 15 Gb' },
          { value: 10, color: 'violet', tooltip: 'Other – 10 Gb' },
        ]}
        thickness={6}
        size={180}
        roundCaps
      />
    </>
  );
}

SemiCircleProgress

Semi-circular progress indicator.

interface SemiCircleProgressProps {
  /** Progress value (0-100) */
  value?: number;
  /** Progress color */
  color?: MantineColor;
  /** Progress thickness */
  thickness?: number;
  /** Progress size */
  size?: number;
  /** Progress label */
  label?: React.ReactNode;
  /** If true, progress will have round caps */
  roundCaps?: boolean;
  /** Root color */
  rootColor?: string;
}

Usage Example:

import { SemiCircleProgress, Text } from '@mantine/core';

function SemiCircleProgressDemo() {
  return (
    <SemiCircleProgress
      value={75}
      color="teal"
      size={200}
      thickness={12}
      label={
        <Text ta="center" size="xl" fw={700}>
          75%
        </Text>
      }
      roundCaps
    />
  );
}

Loader

Loading spinner component with various animations and sizes.

interface LoaderProps {
  /** Loader variant/type */
  type?: 'oval' | 'bars' | 'dots';
  /** Loader size */
  size?: MantineSize | number;
  /** Loader color */
  color?: MantineColor;
}

Usage Example:

import { Loader, Stack } from '@mantine/core';

function LoaderDemo() {
  return (
    <Stack>
      <Loader />
      <Loader color="grape" />
      <Loader size="xs" />
      <Loader size="xl" />
      <Loader type="bars" />
      <Loader type="dots" />
    </Stack>
  );
}

LoadingOverlay

Overlay component that displays loading state over content.

interface LoadingOverlayProps {
  /** If true, overlay is visible */
  visible: boolean;
  /** Overlay z-index */
  zIndex?: number;
  /** Overlay background color */
  overlayProps?: OverlayProps;
  /** Loader props */
  loaderProps?: LoaderProps;
  /** Transition props */
  transitionProps?: TransitionProps;
}

Usage Example:

import { LoadingOverlay, Button } from '@mantine/core';
import { useState } from 'react';

function LoadingOverlayDemo() {
  const [visible, setVisible] = useState(false);

  return (
    <div style={{ position: 'relative', minHeight: 200 }}>
      <LoadingOverlay
        visible={visible}
        zIndex={1000}
        overlayProps={{ radius: 'sm', blur: 2 }}
        loaderProps={{ color: 'pink', type: 'bars' }}
      />

      <div>
        <p>Content that will be covered by overlay</p>
        <Button onClick={() => setVisible(v => !v)}>
          Toggle overlay
        </Button>
      </div>
    </div>
  );
}

Skeleton

Placeholder component for content that is loading.

interface SkeletonProps {
  /** Skeleton height */
  height?: React.CSSProperties['height'];
  /** Skeleton width */
  width?: React.CSSProperties['width'];
  /** If true, skeleton will be rounded */
  circle?: boolean;
  /** Skeleton radius */
  radius?: MantineRadius;
  /** If true, skeleton animation is disabled */
  animate?: boolean;
  /** If true, skeleton will be visible */
  visible?: boolean;
  /** Content to display when not loading */
  children?: React.ReactNode;
}

Usage Example:

import { Skeleton, Stack } from '@mantine/core';

function SkeletonDemo() {
  return (
    <Stack>
      <Skeleton height={50} circle mb="xl" />
      <Skeleton height={8} radius="xl" />
      <Skeleton height={8} mt={6} radius="xl" />
      <Skeleton height={8} mt={6} width="70%" radius="xl" />
    </Stack>
  );
}

// Conditional skeleton
function ConditionalSkeleton({ loading, children }) {
  return (
    <Skeleton visible={loading}>
      {children}
    </Skeleton>
  );
}

Theme Integration

Feedback components integrate with the Mantine theme system:

import { MantineProvider } from '@mantine/core';

const theme = {
  components: {
    Alert: {
      defaultProps: {
        variant: 'light',
        radius: 'md',
      },
    },
    Progress: {
      defaultProps: {
        size: 'md',
        radius: 'sm',
        color: 'blue',
      },
    },
    Loader: {
      defaultProps: {
        type: 'dots',
        color: 'blue',
      },
    },
  },
};

function App() {
  return (
    <MantineProvider theme={theme}>
      {/* Components will use theme defaults */}
    </MantineProvider>
  );
}

Common Usage Patterns

Progress with States:

import { Progress, Text, Group } from '@mantine/core';

function ProgressWithStates({ value, status }) {
  const getColor = () => {
    if (value < 30) return 'red';
    if (value < 70) return 'yellow';
    return 'green';
  };

  return (
    <div>
      <Group justify="space-between" mb="xs">
        <Text fz="sm" fw={500}>
          Upload Progress
        </Text>
        <Text fz="sm" fw={500}>
          {value}%
        </Text>
      </Group>
      <Progress 
        value={value} 
        color={getColor()}
        animate={status === 'uploading'}
      />
    </div>
  );
}

Notification System:

import { Notification, Stack } from '@mantine/core';

function NotificationSystem({ notifications, onClose }) {
  return (
    <Stack>
      {notifications.map((notification) => (
        <Notification
          key={notification.id}
          title={notification.title}
          color={notification.type}
          onClose={() => onClose(notification.id)}
          icon={getIconForType(notification.type)}
        >
          {notification.message}
        </Notification>
      ))}
    </Stack>
  );
}

function getIconForType(type) {
  const icons = {
    success: '✅',
    error: '❌',
    warning: '⚠️',
    info: 'ℹ️',
  };
  return icons[type];
}

Loading States:

import { LoadingOverlay, Skeleton, Stack, Card } from '@mantine/core';

function LoadingStates({ isLoading, data }) {
  if (isLoading) {
    return (
      <Stack>
        <Skeleton height={50} circle mb="xl" />
        <Skeleton height={8} radius="xl" />
        <Skeleton height={8} mt={6} radius="xl" />
        <Skeleton height={8} mt={6} width="70%" radius="xl" />
      </Stack>
    );
  }

  return (
    <Card>
      {/* Actual content */}
      {data && <div>{data.content}</div>}
    </Card>
  );
}