@multichoice/gotv-materialui

GOTV Material UI components for the Multichoice Design System. This package provides web components built with Material-UI for the GOTV brand.

Installation

npm install @multichoice/gotv-materialui

Peer Dependencies

This package requires the following peer dependencies:

npm install react react-dom @multichoice/core @mui/material @emotion/react @emotion/styled

Components

Button

A customizable button component with GOTV branding and Material-UI styling.

import { GOTVButton } from '@multichoice/gotv-materialui';

<GOTVButton variant="contained" color="primary" size="medium">
  Click me
</GOTVButton>

Setup

1. Install the package and its dependencies
2. Import and use the components in your React application

import React from 'react';
import { GOTVButton } from '@multichoice/gotv-materialui';

function App() {
  return (
    <div>
      <GOTVButton variant="contained">
        GOTV Button
      </GOTVButton>
    </div>
  );
}

Theming

The components are built on top of Material-UI and support Material-UI's theming system. You can customize the appearance using Material-UI's theme provider:

import { ThemeProvider, createTheme } from '@mui/material/styles';
import { GOTVButton } from '@multichoice/gotv-materialui';

const theme = createTheme({
  // Your custom theme
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <GOTVButton variant="contained">
        Themed Button
      </GOTVButton>
    </ThemeProvider>
  );
}

Storybook

View all components in Storybook:

npm run storybook

Requirements

• React 18+
• Node.js 18+

License

MIT