Maps Ui 🗺️

Introduction • Documentation • Publication • Technologies • Packages • Footer

Personal Design System with many customizable components, developed with React, documented with Storybook and published on npm.

---

Introduction

To install the components package:

npm install @maps-ui/react

To use the components:

import { Button, Box, Tooltip, TooltipProvider } from '@maps-ui/react'

export const MyPage = () => {
  return (
    <TooltipProvider>
      <Box as="section" css={{ padding: '55px' }}>
        <Tooltip content="Send Content">
          <Button variant="secondary">Send</Button>
        </Tooltip>
      </Box>
    </TooltipProvider>
  )
}

Result:

Documentation

To access the complete documentation and see how to use and customize each component, click here.

Publication

The project was published on npm, Node package manager, so anyone who wants can download it and use it in their applications. Click here to visit.

Technologies

• JS e TS ➡️ Languages ​​used
• React ➡️ Library for creating components
• Stitches ➡️ Library for styling the components
• Storybook ➡️ Library for component documentation
• Radix-Ui ➡️ Library that helped in the creation of some more complex components
• NPM ➡️ Platform on which the project was published

Packages

Maps Ui consists of 2 packages: Tokens and React. The components are in the React package: npm i @maps-ui/react and the Tokens, which consist of colors, font sizes and weights, spacings and so on, are in the other package: npm i @maps-ui/ tokens.

• Click here to see how to use the components.

• Click here to see how to use the tokens.

---

🌟 If you liked it, consider giving it a star! 🌟