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

Navigation Components

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

@mantine/core provides a comprehensive set of navigation components for building user-friendly interfaces with clear navigation patterns. These components handle complex interactions while maintaining accessibility standards.

Tabs

The Tabs component provides a tabbed interface with keyboard navigation and accessibility features.

interface TabsProps {
  /** Currently active tab key */
  value?: string | null;
  /** Default active tab key */
  defaultValue?: string | null;
  /** Called when tab changes */
  onTabChange?: (value: string | null) => void;
  /** Tab orientation */
  orientation?: 'horizontal' | 'vertical';
  /** Tab placement relative to content */
  placement?: 'right' | 'left';
  /** If true, tabs can be activated with keyboard */
  activateTabWithKeyboard?: boolean;
  /** Tab variant */
  variant?: 'default' | 'outline' | 'pills';
  /** Tab color theme */
  color?: MantineColor;
  /** Tab radius */
  radius?: MantineRadius;
  /** If true, tab panels are not wrapped with TabPanel */
  keepMounted?: boolean;
  /** Tabs children */
  children: React.ReactNode;
}

interface TabsListProps {
  /** Tabs list children (Tab components) */
  children: React.ReactNode;
  /** If true, tab will grow to use all available space */
  grow?: boolean;
  /** Tab position */
  justify?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around';
}

interface TabsPanelProps {
  /** Panel content */
  children: React.ReactNode;
  /** Tab key that should activate this panel */
  value: string;
}

interface TabsTabProps {
  /** Tab label */
  children: React.ReactNode;
  /** Tab key */
  value: string;
  /** Tab icon */
  leftSection?: React.ReactNode;
  /** Tab right section */
  rightSection?: React.ReactNode;
  /** Tab color when active */
  color?: MantineColor;
  /** If true, tab is disabled */
  disabled?: boolean;
}

Usage Example:

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

function TabsDemo() {
  return (
    <Tabs defaultValue="gallery">
      <Tabs.List>
        <Tabs.Tab value="gallery" leftSection="📷">
          Gallery
        </Tabs.Tab>
        <Tabs.Tab value="messages" leftSection="💬">
          Messages
        </Tabs.Tab>
        <Tabs.Tab value="settings" leftSection="⚙️">
          Settings
        </Tabs.Tab>
      </Tabs.List>

      <Tabs.Panel value="gallery">
        Gallery tab content
      </Tabs.Panel>

      <Tabs.Panel value="messages">
        Messages tab content
      </Tabs.Panel>

      <Tabs.Panel value="settings">
        Settings tab content
      </Tabs.Panel>
    </Tabs>
  );
}

Stepper

Multi-step process component with validation and navigation controls.

interface StepperProps {
  /** Active step index */
  active: number;
  /** Called when step changes */
  onStepClick?: (stepIndex: number) => void;
  /** Step icon size */
  iconSize?: number;
  /** Stepper orientation */
  orientation?: 'vertical' | 'horizontal';
  /** Icon position relative to step body */
  iconPosition?: 'right' | 'left';
  /** Step size */
  size?: MantineSize;
  /** Step radius */
  radius?: MantineRadius;
  /** Step color theme */
  color?: MantineColor;
  /** If true, steps before active can be clicked */
  allowNextStepsSelect?: boolean;
  /** Stepper children (Step components) */
  children: React.ReactNode;
}

interface StepperStepProps {
  /** Step label */
  label?: React.ReactNode;
  /** Step description */
  description?: React.ReactNode;
  /** Step icon, displayed instead of step number */
  icon?: React.ReactNode;
  /** Step content */
  children?: React.ReactNode;
  /** Step state */
  state?: 'stepInactive' | 'stepProgress' | 'stepCompleted';
  /** Step color when active */
  color?: MantineColor;
  /** If true, step can be clicked */
  allowStepClick?: boolean;
  /** If true, step is completed */
  completedIcon?: React.ReactNode;
  /** If true, step is loading */
  loading?: boolean;
}

interface StepperCompletedProps {
  /** Completed state content */
  children: React.ReactNode;
}

Usage Example:

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

function StepperDemo() {
  const [active, setActive] = useState(0);

  const nextStep = () => setActive(current => 
    current < 3 ? current + 1 : current
  );
  const prevStep = () => setActive(current => 
    current > 0 ? current - 1 : current
  );

  return (
    <>
      <Stepper active={active} onStepClick={setActive}>
        <Stepper.Step label="First step" description="Create an account">
          Step 1 content: Create an account
        </Stepper.Step>

        <Stepper.Step label="Second step" description="Verify email">
          Step 2 content: Verify email
        </Stepper.Step>

        <Stepper.Step label="Final step" description="Get full access">
          Step 3 content: Get full access
        </Stepper.Step>

        <Stepper.Completed>
          Completed! Form values are:
        </Stepper.Completed>
      </Stepper>

      <Group justify="center" mt="xl">
        <Button variant="default" onClick={prevStep}>Back</Button>
        <Button onClick={nextStep}>Next step</Button>
      </Group>
    </>
  );
}

Breadcrumbs

Navigation breadcrumb component for showing the current page location.

interface BreadcrumbsProps {
  /** Breadcrumb items */
  children: React.ReactNode;
  /** Separator between items */
  separator?: React.ReactNode;
  /** Number of items to display, other items will be hidden */
  max?: number;
  /** Separator for hidden items */
  separatorMargin?: MantineSpacing;
}

Usage Example:

import { Breadcrumbs, Anchor } from '@mantine/core';

const items = [
  { title: 'Mantine', href: '#' },
  { title: 'Core', href: '#' },
  { title: 'Breadcrumbs', href: '#' },
].map((item, index) => (
  <Anchor href={item.href} key={index}>
    {item.title}
  </Anchor>
));

function BreadcrumbsDemo() {
  return <Breadcrumbs>{items}</Breadcrumbs>;
}

Pagination

Pagination controls with customizable appearance and behavior.

interface PaginationProps {
  /** Active page number */
  value?: number;
  /** Default active page */
  defaultValue?: number;
  /** Called when page changes */
  onChange?: (value: number) => void;
  /** Total number of pages */
  total: number;
  /** Number of siblings on each side of active page */
  siblings?: number;
  /** Number of boundaries on each side */
  boundaries?: number;
  /** Pagination size */
  size?: MantineSize;
  /** Pagination radius */
  radius?: MantineRadius;
  /** Pagination color theme */
  color?: MantineColor;
  /** If true, pagination will not wrap to next line */
  withEdges?: boolean;
  /** If true, controls are disabled */
  disabled?: boolean;
  /** Get aria-label for page button */
  getItemAriaLabel?: (page: number) => string;
  /** Get control aria-label */
  getControlAriaLabel?: (control: string) => string;
}

interface PaginationRootProps {
  /** Root element children */
  children: React.ReactNode;
  /** Pagination size */
  size?: MantineSize;
  /** Total number of pages */
  total: number;
  /** Active page number */
  value?: number;
  /** Default active page */
  defaultValue?: number;
  /** Called when page changes */
  onChange?: (value: number) => void;
  /** If true, controls are disabled */
  disabled?: boolean;
  /** Number of siblings */
  siblings?: number;
  /** Number of boundaries */
  boundaries?: number;
  /** Get aria-label for page */
  getItemAriaLabel?: (page: number) => string;
}

interface PaginationControlProps {
  /** Control content */
  children?: React.ReactNode;
  /** Control action */
  onClick?: () => void;
  /** If true, control is disabled */
  disabled?: boolean;
  /** If true, control is active */
  active?: boolean;
  /** Control aria-label */
  'aria-label'?: string;
}

Usage Example:

import { Pagination } from '@mantine/core';
import { useState } from 'react';

function PaginationDemo() {
  const [activePage, setPage] = useState(1);

  return (
    <Pagination 
      value={activePage} 
      onChange={setPage} 
      total={10} 
      siblings={1}
      boundaries={3}
    />
  );
}

// Compound components usage
function CustomPagination() {
  return (
    <Pagination.Root total={10}>
      <Pagination.First />
      <Pagination.Previous />
      <Pagination.Items />
      <Pagination.Next />
      <Pagination.Last />
    </Pagination.Root>
  );
}

NavLink

Navigation link component with active state and nested structure support.

interface NavLinkProps {
  /** Link label */
  label: React.ReactNode;
  /** Link description */
  description?: React.ReactNode;
  /** Link left section (usually icon) */
  leftSection?: React.ReactNode;
  /** Link right section */
  rightSection?: React.ReactNode;
  /** If true, link will have active styles */
  active?: boolean;
  /** Link variant */
  variant?: 'light' | 'filled' | 'subtle';
  /** Link color theme */
  color?: MantineColor;
  /** If true, link is disabled */
  disabled?: boolean;
  /** Link children for nested structure */
  children?: React.ReactNode;
  /** Called when link is clicked */
  onClick?: () => void;
  /** If true, children will not be rendered */
  childrenOffset?: MantineSpacing;
  /** If true, link cannot be activated with click */
  disableRightSectionRotation?: boolean;
  /** Collapse icon */
  collapseIcon?: React.ReactNode;
}

Usage Example:

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

function NavLinkDemo() {
  return (
    <NavLink
      label="With icon"
      leftSection="🏠"
      rightSection="→"
      active
    />
  );
}

// Nested NavLinks
function NestedNavLinks() {
  return (
    <NavLink label="Dashboard" leftSection="📊">
      <NavLink label="Analytics" />
      <NavLink label="Reports" active />
      <NavLink label="Settings" />
    </NavLink>
  );
}

interface TableOfContentsProps {
  /** Table of contents links */
  links: TableOfContentsLink[];
  /** Active link */
  active?: string;
  /** Called when link is clicked */
  onLinkClick?: (link: TableOfContentsLink) => void;
}

interface TableOfContentsLink {
  /** Link label */
  label: string;
  /** Link id */
  link: string;
  /** Nested links */
  links?: TableOfContentsLink[];
  /** Link order for sorting */
  order?: number;
}

Usage Example:

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

const links = [
  {
    label: 'Usage',
    link: '#usage',
    order: 1,
  },
  {
    label: 'API Reference',
    link: '#api',
    order: 1,
    links: [
      { label: 'Props', link: '#props', order: 2 },
      { label: 'Methods', link: '#methods', order: 2 },
    ],
  },
  {
    label: 'Examples',
    link: '#examples',
    order: 1,
  },
];

function TableOfContentsDemo() {
  return (
    <TableOfContents
      links={links}
      active="#usage"
      onLinkClick={(link) => console.log(link)}
    />
  );
}

Theme Integration

All navigation components integrate seamlessly with the Mantine theme system:

import { MantineProvider, Tabs, Stepper, Pagination } from '@mantine/core';

const theme = {
  components: {
    Tabs: {
      defaultProps: {
        color: 'blue',
        variant: 'pills',
      },
    },
    Stepper: {
      defaultProps: {
        size: 'sm',
        color: 'teal',
      },
    },
    Pagination: {
      defaultProps: {
        size: 'md',
        radius: 'md',
      },
    },
  },
};

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

Accessibility Features

Navigation components include comprehensive accessibility support:

Keyboard Navigation: Full keyboard support with arrow keys, Enter, Space
ARIA Labels: Proper labeling for screen readers
Focus Management: Logical focus flow and visible focus indicators
Role Attributes: Correct semantic roles (tab, tablist, tabpanel, etc.)
State Announcement: Active and disabled states are properly announced

Common Patterns

Responsive Navigation:

import { useMediaQuery } from '@mantine/hooks';
import { Tabs, Burger, Drawer } from '@mantine/core';

function ResponsiveNavigation() {
  const isMobile = useMediaQuery('(max-width: 768px)');
  
  return isMobile ? (
    <MobileBurgerMenu />
  ) : (
    <Tabs>
      <Tabs.List>
        <Tabs.Tab value="home">Home</Tabs.Tab>
        <Tabs.Tab value="about">About</Tabs.Tab>
        <Tabs.Tab value="contact">Contact</Tabs.Tab>
      </Tabs.List>
    </Tabs>
  );
}

Multi-level Navigation:

function MultiLevelNavigation() {
  return (
    <NavLink label="Products" leftSection="📦">
      <NavLink label="Software">
        <NavLink label="Desktop Apps" />
        <NavLink label="Mobile Apps" />
      </NavLink>
      <NavLink label="Hardware">
        <NavLink label="Computers" />
        <NavLink label="Accessories" />
      </NavLink>
    </NavLink>
  );
}