🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

react-mac-ui

Package Overview
Dependencies
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-mac-ui

react-mac-ui is a component library for React that replicates the classic macOS design. It offers a wide range of UI components with a modern and clean look to enhance the aesthetic of your project

1.1.0
latest
Source
npm
Version published
Weekly downloads
8
Maintainers
1
Weekly downloads
 
Created
Source

React mac ui

Documentation

Visit https://react-mac-ui.netlify.app for full documentation.

Getting Started

Learn how to use react-mac-ui components to quickly and easily create elegant and flexible pages using Tailwind CSS.

react-mac-ui is working with Tailwind CSS classes and you need to have Tailwind CSS installed on your project - Tailwind CSS Installation.


  • Intall react-mac-ui
npm i react-mac-ui

or

yarn add react-mac-ui

  • Once you install react-mac-ui you need to wrap your tailwind css configurations with the withReactMacUI() function coming from react-mac-ui/config.
const withReactMacUI = require("react-mac-ui/config");

module.exports = withReactMacUI({
  content: ["src/**/*.{tsx,ts,js,jsx}"],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
});

  • Add import css and BaseFeature component in your App.tsx file wrapped outside entire components
import "react-mac-ui/main.css";
import { BaseFeature } from 'react-mac-ui';
...

const App: React.FC = () => {
  return (
    <BaseFeature>
        ...
    </BaseFeature>
  )
}


  • Congratulations 🥳, you did it, now you're ready to use react-mac-ui.


Community

Contributing

License

MIT

Keywords

ui

FAQs

Package last updated on 29 Mar 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts