Material UI

import { Button, TextField, AppBar, Toolbar } from "@mui/material";
import { ThemeProvider, createTheme } from "@mui/material/styles";

const { Button, TextField, AppBar, Toolbar } = require("@mui/material");
const { ThemeProvider, createTheme } = require("@mui/material/styles");

import React from "react";
import { Button, TextField, Container, Typography } from "@mui/material";
import { ThemeProvider, createTheme } from "@mui/material/styles";

const theme = createTheme({
  palette: {
    primary: {
      main: "#1976d2",
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Container maxWidth="sm">
        <Typography variant="h4" component="h1" gutterBottom>
          Welcome to Material UI
        </Typography>
        <TextField
          label="Your Name"
          variant="outlined"
          fullWidth
          margin="normal"
        />
        <Button
          variant="contained"
          color="primary"
          size="large"
          fullWidth
          sx={{ mt: 2 }}
        >
          Get Started
        </Button>
      </Container>
    </ThemeProvider>
  );
}

// Container for centering and constraining content
function Container(props: ContainerProps): JSX.Element;

// Flexible grid layout using CSS Flexbox
function Grid(props: GridProps): JSX.Element;

// One-dimensional layout for vertical/horizontal stacking
function Stack(props: StackProps): JSX.Element;

// Basic layout component with system props
function Box(props: BoxProps): JSX.Element;

// Complete text field with label, input and helper text
function TextField(props: TextFieldProps): JSX.Element;

// Form control wrapper providing context
function FormControl(props: FormControlProps): JSX.Element;

// Select dropdown component
function Select(props: SelectProps): JSX.Element;

// Checkbox input component
function Checkbox(props: CheckboxProps): JSX.Element;

// Application bar for navigation and branding
function AppBar(props: AppBarProps): JSX.Element;

// Navigation drawer panel
function Drawer(props: DrawerProps): JSX.Element;

// Navigation links with Material-UI styling
function Link(props: LinkProps): JSX.Element;

// Tab navigation component
function Tabs(props: TabsProps): JSX.Element;

// Menu component for displaying choices
function Menu(props: MenuProps): JSX.Element;

// Component for displaying list of menu items
function MenuList(props: MenuListProps): JSX.Element;

// Navigation for mobile interfaces with bottom actions
function BottomNavigation(props: BottomNavigationProps): JSX.Element;

// Individual action for BottomNavigation
function BottomNavigationAction(props: BottomNavigationActionProps): JSX.Element;

// Container for step navigation
function Stepper(props: StepperProps): JSX.Element;

// Compact stepper for mobile interfaces
function MobileStepper(props: MobileStepperProps): JSX.Element;

// Pagination component for page navigation
function Pagination(props: PaginationProps): JSX.Element;

// Button with multiple variants and states
function Button(props: ButtonProps): JSX.Element;

// Icon button for displaying clickable icons
function IconButton(props: IconButtonProps): JSX.Element;

// Floating action button for primary actions
function Fab(props: FabProps): JSX.Element;

// Component for grouping related buttons
function ButtonGroup(props: ButtonGroupProps): JSX.Element;

// Foundation component for building custom buttons
function ButtonBase(props: ButtonBaseProps): JSX.Element;

// Slider for selecting values from range
function Slider(props: SliderProps): JSX.Element;

// Switch toggle control
function Switch(props: SwitchProps): JSX.Element;

// Star rating input for collecting user ratings
function Rating(props: RatingProps): JSX.Element;

// Toggle button for binary selection
function ToggleButton(props: ToggleButtonProps): JSX.Element;

// Autocomplete input with suggestions
function Autocomplete<T>(props: AutocompleteProps<T>): JSX.Element;

// Compact elements that represent input, attribute, or action
function Chip(props: ChipProps): JSX.Element;

// Typography component for text display
function Typography(props: TypographyProps): JSX.Element;

// Visual content separator for organizing sections
function Divider(props: DividerProps): JSX.Element;

// Component for displaying font icons
function Icon(props: IconProps): JSX.Element;

// Wrapper for displaying SVG icons with Material-UI styling
function SvgIcon(props: SvgIconProps): JSX.Element;

// Component for displaying multiple avatars in a group
function AvatarGroup(props: AvatarGroupProps): JSX.Element;

// List component for displaying content in rows
function List(props: ListProps): JSX.Element;

// Table component for tabular data
function Table(props: TableProps): JSX.Element;

// Card component for containing related information
function Card(props: CardProps): JSX.Element;

// Image list for displaying collections of images
function ImageList(props: ImageListProps): JSX.Element;

// Alert component for important messages
function Alert(props: AlertProps): JSX.Element;

// Title component for Alert messages
function AlertTitle(props: AlertTitleProps): JSX.Element;

// Base modal component for overlaying content
function Modal(props: ModalProps): JSX.Element;

// Backdrop component for displaying overlay behind modal content
function Backdrop(props: BackdropProps): JSX.Element;

// Circular progress indicator
function CircularProgress(props: CircularProgressProps): JSX.Element;

// Dialog component for modal content
function Dialog(props: DialogProps): JSX.Element;

// Brief message component at bottom of screen
function Snackbar(props: SnackbarProps): JSX.Element;

// Basic surface component with Material Design elevation
function Paper(props: PaperProps): JSX.Element;

// Expandable panels for organizing content
function Accordion(props: AccordionProps): JSX.Element;

// Badge for displaying small amounts of data
function Badge(props: BadgeProps): JSX.Element;

// Tooltip for additional information
function Tooltip(props: TooltipProps): JSX.Element;

// Creates custom themes
function createTheme(options?: ThemeOptions): Theme;

// Context provider for themes
function ThemeProvider(props: { theme: Theme; children: ReactNode }): JSX.Element;

// Hook for accessing current theme
function useTheme(): Theme;

// Styled-components API for creating styled components
function styled<C extends React.ComponentType<any>>(
  component: C
): StyledComponent<C>;

// Utility component for detecting clicks outside element
function ClickAwayListener(props: ClickAwayListenerProps): JSX.Element;

// Component for rendering children outside normal hierarchy
function Portal(props: PortalProps): JSX.Element;

// Fade transition component
function Fade(props: FadeProps): JSX.Element;

// Hook for responsive design with media queries
function useMediaQuery(query: string | ((theme: Theme) => string)): boolean;

// Material Design color palettes
const colors: {
  red: ColorPalette;
  blue: ColorPalette;
  green: ColorPalette;
  // ... 17 more color palettes
};

// Color manipulation functions
function alpha(color: string, value: number): string;
function darken(color: string, coefficient: number): string;
function lighten(color: string, coefficient: number): string;

// Base props for all Material UI components
interface CommonProps {
  className?: string;
  style?: React.CSSProperties;
  sx?: SxProps<Theme>;
}

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

// Color palette interface
interface Palette {
  mode: 'light' | 'dark';
  primary: PaletteColor;
  secondary: PaletteColor;
  error: PaletteColor;
  warning: PaletteColor;
  info: PaletteColor;
  success: PaletteColor;
  grey: GreyPalette;
  common: CommonColors;
  text: TypeText;
  background: TypeBackground;
  action: TypeAction;
}

// SX prop type for inline styling
type SxProps<Theme = {}> = 
  | SystemStyleObject<Theme>
  | ((theme: Theme) => SystemStyleObject<Theme>)
  | Array<SystemStyleObject<Theme> | ((theme: Theme) => SystemStyleObject<Theme>)>;