Frontend components for apps built with Keyp

Preview Components

See the available components at https://ui.usekeyp.com

staging branch is deployed at https://ui.staging-env.usekeyp.com

Usage 📖

1. Add package to your project:

   yarn add @usekeyp/ui-kit

2. Install and configure Tailwind CSS.

   2.1 Install and initialize.

   yarn add -D tailwindcss
   
   yarn tailwindcss init

   2.2 Add the Tailwind directives to your index.css.

   + @tailwind base;
   + @tailwind components;
   + @tailwind utilities;
   
   body {
     margin: 0;

   2.3 Update tailwind.config.js file:

   • Add the @usekeyp/ui-kit to apply the appropriate classes.

   • Require @usekeyp/ui-kit as a plugin.

     React

     /** @type {import('tailwindcss').Config} */
     module.exports = {
       content: [
         "./src/**/*.{js,jsx,ts,tsx}",
         "./node_modules/@usekeyp/ui-kit/lib/**/**/*.{js,jsx,ts,tsx,md}",
       ],
       plugins: [require("@usekeyp/ui-kit/plugin")],
       // ...
     };

     Next.js

     /** @type {import('tailwindcss').Config} */
     module.exports = {
       content: [
         "./pages/**/*.{js, jsx, ts,tsx}",
         "./public/**/*.html",
         "./node_modules/@usekeyp/ui-kit/lib/**/**/*.{js,jsx,ts,tsx,md}",
       ],
       plugins: [require("@usekeyp/ui-kit/plugin")],
       // ...
     };

     2.4 Start the Tailwind CLI build process.

     React

     yarn tailwindcss -i ./src/index.css -o ./dist/output.css --watch -c tailwind.config.js

     You can add this command to your build process package.json file:

     {
       ...,
       "scripts": {
         "start": "react-scripts start",
         "tailwindcss": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch",
         ...
       }
     }
     

     Next.js

     yarn tailwindcss -i ./styles/globals.css -o ./dist/output.css --watch

     You can add this command to your build process to package.json file:

     {
       ...,
       "scripts": {
         "dev": "next dev",
         "tailwindcss": "tailwindcss -i ./styles/globals.css -o ./dist/output.css --watch",
         ...
       },
     }
     

3. Utilize components in your project:

import { LoginPortal } from "@usekeyp/ui-kit";

const LoginPage = () => {

  const onClick = (providerType) => {
  // custom auth logic depending on the app
  }

  return (<>
        <LoginPortal
          providers={["TWITTER", "GITHUB", "APPLE"]}
          additionalProviders={["DISCORD", "GOOGLE"]}
          onClick={onClick}
        /><>)
}

Resources 🧑‍💻

• Tailwind CSS Documentation

License 📝

Copyright © 2023 Nifty Chess, Inc. This project is MIT licensed.