hyperflex-ui v1.3.4
HyperFlex UI - Built on Material UI
Welcome to HyperFlex UI! This is a Design System built on top of Material UI, providing a consistent collection of components, styles, and guidelines for use in our projects.
Overview
HyperFlex UI is built on top of Material UI, which is a widely-used library for building responsive and user-friendly interfaces. With HyperFlex UI, you can unifying your design standards and promoting consistency across your codebase.
Getting Started
To start using HyperFlex UI in your project, follow the steps below:
a. Installation: Add the hyperflex-ui
package to your project using package managers like npm or yarn.
# Use npm
npm install hyperflex-ui
# Use yarn
yarn add hyperflex-ui
b. Importing: Import the necessary components and styles into your project.
import { Button, ThemeProvider, theme } from "hyperflex-ui";
export const Container = (): JSX.Element => {
return (
<ThemeProvider theme={theme.light}>
<Button hierarchy="primary" variant="filled">
Click me
</Button>
</ThemeProvider>
);
};
c. Create custom themes
import { ThemeProvider, customTheme } from "hyperflex-ui";
export const Container = (): JSX.Element => {
const { dark, light } = customTheme({
dark: {
primary: '#000',
},
})
return <ThemeProvider theme={mode === "dark" ? dark : light} />
}
References
- Material Design Guideline
- Material theme builder
- Material Web Github repository
- Material 3 Design Kit on Figma
License
This project is licensed under the MIT License - see the LICENSE file for detail
Refer original license: Material Web License
7 months ago
7 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago