Framer-kit NPM

Framer-Kit React UI

The component library for fast and accessible development of gorgeous interfaces designed in Framer X.

Mission 🎯

Make easy to convert design to conde while using Framer X. As one day I was desing in Framer X, using framer-base components. But when it comes to code I searched for framer-base, but framer-base comes without documentation and type definitions 😞. After that I started from scratch, after wasting my time, I decided to make a UI Library to ease my work.

🚀 Usage

💻 Install

npm i framer-kit
// or
yarn add framer-kit

Now add `ThemeProvider` in your index.js file

// index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { ThemeProvider } from "framer-kit";

ReactDOM.render(
  <ThemeProvider theme="light">
    <App />
  </ThemeProvider>,
  document.getElementById("root")
);

Use components inside your project

import { Button } from "framer-kit";

function App() {
  return (
    <Button intent="primary" pattern="secondary">
      Hi there!
    </Button>
  );
}

export default App;

👩‍💻 Technologies used

React v17.0.0
Framer Motion - to make every component animatable.
React Feather - for Icons.
Windicss - It's like Tailwindcss with some superpowers.
Classnames - To handle different classnames with ease.
CSS Modules - To reduce load from browser and file size (css-in-js solution are like running autoprefixer in browser. read more)