https://github.com/malcodeman/malcomponents

Collection of React components.
https://github.com/malcodeman/malcomponents

design-system react theming typescript

Last synced: 21 days ago
JSON representation

Collection of React components.

• Host: GitHub
• URL: https://github.com/malcodeman/malcomponents
• Owner: malcodeman
• License: mit
• Created: 2019-11-14T20:32:48.000Z (about 5 years ago)
• Default Branch: main
• Last Pushed: 2024-09-11T20:34:32.000Z (3 months ago)
• Last Synced: 2024-11-07T04:50:20.693Z (about 2 months ago)
• Topics: design-system, react, theming, typescript
• Language: TypeScript
• Homepage: https://malcomponents.surge.sh
• Size: 896 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• my-awesome-repos - malcomponents - Collection of React components. (Packages)

README

        
# [malcomponents](https://malcomponents.surge.sh)

[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/malcodeman/malcomponents/blob/master/LICENSE)

[![npm](https://img.shields.io/npm/v/malcomponents)](https://www.npmjs.com/package/malcomponents)

Collection of React components.

## Getting started

```

yarn add malcomponents

```

```jsx

import React from "react";

import { ThemeProvider, LightTheme, Button, GlobalStyle } from "malcomponents";

function App() {

  return (

    

      Button

      

    

  );

}

export default App;

```

## Global styles

Components within the design system assume that a set of global styles have been configured.

## Theming

We require that you select a theme as part of boilerplate setup. Our components require a theme to assign styles.

We provide two themes out of the box, LightTheme and DarkTheme, which style components in light & dark variants.

```jsx

import React from "react";

import { ThemeProvider, DarkTheme, Button, GlobalStyle } from "malcomponents";

function App() {

  return (

    

      Button

      

    

  );

}

export default App;

```

## License

[MIT](./LICENSE)