CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-material-ui--core

React components that implement Google's Material Design specification with comprehensive theming and styling system.

—

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

index.mddocs/

Material-UI Core

Material-UI Core is a comprehensive React component library that implements Google's Material Design specification. It provides over 100 customizable components including buttons, forms, navigation, layout, and data display elements with a powerful theming system and CSS-in-JS styling solution.

Package Information

  • Package Name: @material-ui/core
  • Package Type: npm
  • Language: JavaScript/TypeScript
  • Installation: npm install @material-ui/core

Core Imports

import { Button, TextField, AppBar, Typography } from "@material-ui/core";
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
import * as colors from "@material-ui/core/colors";

For CommonJS:

const { Button, TextField, AppBar, Typography } = require("@material-ui/core");
const { createMuiTheme, ThemeProvider } = require("@material-ui/core/styles");
const colors = require("@material-ui/core/colors");

Basic Usage

import React from 'react';
import { Button, TextField, Paper, Typography } from '@material-ui/core';
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import { blue } from '@material-ui/core/colors';

// Create custom theme
const theme = createMuiTheme({
  palette: {
    primary: blue,
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Paper style={{ padding: 16 }}>
        <Typography variant="h4" gutterBottom>
          Welcome to Material-UI
        </Typography>
        <TextField
          label="Enter your name"
          variant="outlined"
          fullWidth
          margin="normal"
        />
        <Button variant="contained" color="primary">
          Submit
        </Button>
      </Paper>
    </ThemeProvider>
  );
}

Architecture

Material-UI Core is built around several key architectural principles:

  • Component System: All components extend a base component system with consistent props interface (className, style, classes, component)
  • Theming: Centralized theme configuration with createMuiTheme and ThemeProvider for colors, typography, spacing, and breakpoints
  • CSS-in-JS: Built on JSS with withStyles HOC for component styling and customization
  • Material Design: Faithful implementation of Material Design guidelines with proper elevation, motion, and interaction patterns
  • Accessibility: WCAG-compliant components with proper ARIA attributes and keyboard navigation
  • TypeScript: Full TypeScript support with detailed prop interfaces and generic components

Capabilities

Theming and Styling

Complete theming system with custom theme creation, styling utilities, and CSS-in-JS integration for consistent design across applications.

function createMuiTheme(options?: ThemeOptions): Theme;
function withStyles<P extends object>(
  styles: Styles<Theme, P>,
  options?: WithStylesOptions<Theme>
): (Component: React.ComponentType<P>) => React.ComponentType<P>;
function withTheme<P extends WithThemeProps<Theme>>(
  Component: React.ComponentType<P>
): React.ComponentType<Omit<P, keyof WithThemeProps<Theme>>>;

interface Theme {
  palette: Palette;
  typography: Typography;
  spacing: Spacing;
  breakpoints: Breakpoints;
  shadows: Shadows;
  transitions: Transitions;
  zIndex: ZIndex;
  shape: Shape;
}

Theming and Styling

Layout Components

Structural components for creating responsive layouts including app bars, grids, containers, and surfaces.

function AppBar(props: AppBarProps): JSX.Element;
function Grid(props: GridProps): JSX.Element;
function Paper(props: PaperProps): JSX.Element;
function Toolbar(props: ToolbarProps): JSX.Element;

interface GridProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, GridClassKey> {
  container?: boolean;
  item?: boolean;
  xs?: boolean | GridSize;
  sm?: boolean | GridSize;
  md?: boolean | GridSize;
  lg?: boolean | GridSize;
  xl?: boolean | GridSize;
  spacing?: GridSpacing;
  direction?: GridDirection;
  justify?: GridJustification;
  alignItems?: GridItemsAlignment;
  alignContent?: GridContentAlignment;
  wrap?: GridWrap;
}

Layout Components

Input Components

Form controls and interactive elements including buttons, text fields, selects, checkboxes, and other input components.

function Button(props: ButtonProps): JSX.Element;
function IconButton(props: IconButtonProps): JSX.Element;
function TextField(props: TextFieldProps): JSX.Element;
function InputAdornment(props: InputAdornmentProps): JSX.Element;
function InputLabel(props: InputLabelProps): JSX.Element;
function Checkbox(props: CheckboxProps): JSX.Element;
function Select(props: SelectProps): JSX.Element;

interface ButtonProps extends StandardProps<ButtonBaseProps, ButtonClassKey> {
  children: React.ReactNode;
  color?: 'default' | 'inherit' | 'primary' | 'secondary';
  variant?: 'text' | 'outlined' | 'contained' | 'fab' | 'extendedFab';
  size?: 'small' | 'medium' | 'large';
  disabled?: boolean;
  disableElevation?: boolean;
  disableFocusRipple?: boolean;
  disableRipple?: boolean;
  endIcon?: React.ReactNode;
  startIcon?: React.ReactNode;
  fullWidth?: boolean;
  href?: string;
}

interface IconButtonProps extends StandardProps<ButtonBaseProps, IconButtonClassKey> {
  children: React.ReactNode;
  color?: 'default' | 'inherit' | 'primary' | 'secondary';
  disabled?: boolean;
  disableRipple?: boolean;
  size?: 'small' | 'medium';
}

Input Components

Navigation Components

Navigation-related components including menus, tabs, steppers, and navigation drawers.

function Menu(props: MenuProps): JSX.Element;
function Tabs(props: TabsProps): JSX.Element;
function Drawer(props: DrawerProps): JSX.Element;
function Stepper(props: StepperProps): JSX.Element;

interface DrawerProps extends StandardProps<ModalProps, DrawerClassKey> {
  anchor?: 'left' | 'top' | 'right' | 'bottom';
  children?: React.ReactNode;
  elevation?: number;
  open?: boolean;
  variant?: 'permanent' | 'persistent' | 'temporary';
}

Navigation Components

Data Display Components

Components for displaying data including tables, lists, cards, typography, and icons.

function Table(props: TableProps): JSX.Element;
function List(props: ListProps): JSX.Element;
function Card(props: CardProps): JSX.Element;
function Typography(props: TypographyProps): JSX.Element;

interface TypographyProps extends StandardProps<React.HTMLAttributes<HTMLElement>, TypographyClassKey> {
  align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
  children?: React.ReactNode;
  color?: 'inherit' | 'primary' | 'secondary' | 'textPrimary' | 'textSecondary' | 'error';
  component?: React.ElementType;
  gutterBottom?: boolean;
  noWrap?: boolean;
  paragraph?: boolean;
  variant?: TypographyVariant;
}

Data Display Components

Feedback Components

User feedback components including progress indicators, dialogs, snackbars, and tooltips.

function Dialog(props: DialogProps): JSX.Element;
function CircularProgress(props: CircularProgressProps): JSX.Element;
function Snackbar(props: SnackbarProps): JSX.Element;
function Tooltip(props: TooltipProps): JSX.Element;

interface DialogProps extends StandardProps<ModalProps, DialogClassKey> {
  children?: React.ReactNode;
  fullScreen?: boolean;
  fullWidth?: boolean;
  maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
  scroll?: 'body' | 'paper';
  TransitionComponent?: React.ComponentType<TransitionProps>;
  transitionDuration?: TransitionProps['timeout'];
}

Feedback Components

Utility Components

Utility components and higher-order components for common functionality like portals, transitions, and responsive behavior.

function Portal(props: PortalProps): React.ReactPortal | null;
function ClickAwayListener(props: ClickAwayListenerProps): JSX.Element;
function Hidden(props: HiddenProps): JSX.Element;
function withMobileDialog<P>(options?: WithMobileDialogOptions): (Component: React.ComponentType<P>) => React.ComponentType<P>;
function withWidth<P extends WithWidthProps>(options?: WithWidthOptions): (Component: React.ComponentType<P>) => React.ComponentType<P>;

interface HiddenProps {
  children: React.ReactNode;
  implementation?: 'js' | 'css';
  initialWidth?: Breakpoint;
  lgDown?: boolean;
  lgUp?: boolean;
  mdDown?: boolean;
  mdUp?: boolean;
  only?: Breakpoint | Breakpoint[];
  smDown?: boolean;
  smUp?: boolean;
  xlDown?: boolean;
  xlUp?: boolean;
  xsDown?: boolean;
  xsUp?: boolean;
}

Utility Components

Color System

Complete Material Design color palette with all color variants and accessibility-friendly combinations.

interface Color {
  50: string;
  100: string;
  200: string;
  300: string;
  400: string;
  500: string;
  600: string;
  700: string;
  800: string;
  900: string;
  A100: string;
  A200: string;
  A400: string;
  A700: string;
}

const red: Color;
const pink: Color;
const purple: Color;
const deepPurple: Color;
const indigo: Color;
const blue: Color;
const lightBlue: Color;
const cyan: Color;
const teal: Color;
const green: Color;
const lightGreen: Color;
const lime: Color;
const yellow: Color;
const amber: Color;
const orange: Color;
const deepOrange: Color;
const brown: Color;
const grey: Color;
const blueGrey: Color;
const common: {
  black: string;
  white: string;
};

Color System

Types

type StandardProps<C, ClassKey extends string, Removals extends keyof C = never> = Omit<
  C,
  'classes' | Removals
> & StyledComponentProps<ClassKey> & {
  className?: string;
  style?: React.CSSProperties;
};

interface StyledComponentProps<ClassKey extends string = string> {
  classes?: Partial<ClassesNameMap<ClassKey>>;
}

type PropsOf<C> = C extends new (props: infer P) => React.Component
  ? P
  : C extends (props: infer P) => React.ReactElement<any> | null
  ? P
  : C extends keyof JSX.IntrinsicElements
  ? JSX.IntrinsicElements[C]
  : never;

type PaletteType = 'light' | 'dark';

type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
type GridSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
type GridSpacing = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 
  'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'caption' | 'button' | 'overline';

docs

colors.md

data-display.md

feedback.md

index.md

inputs.md

layout.md

navigation.md

theming-styling.md

utilities.md

tile.json