Windkit for React and NextJS

Installation & Setup

yarn add @windkit/react

Add Windkit to your project

Import Windkit wrapper

import { Windkit } from "@windkit/react";

Wrap your application

import { Windkit } from "@windkit/react";

ReactDOM.render(
  <React.StrictMode>
    <Windkit>
      <App />
    </Windkit>
  </React.StrictMode>,
  document.getElementById("root")
);

• TODO: Need to add your config to tailwind purge

Button

import { Button } from "@windkit/react";

Props

| Name | Attribute | Options | Notes | | ---------- | ----------------- | --------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | | Layout | layout="layout" | Default: primary | In the config you can create as many layouts as you e like. Layouts reference the theme config which consists of tailwind classes. | | Icon Left | iconLeft={} | iconSides controls the theming for the icon | | | Icon Right | iconLeft={} | iconSides controls the theming for the icon | | | Icon | icon={} | TBC | TBC | | Sizes | size="size" | Default: base, Options: lg, sm | You can create as many size variants as you wish |

Custom theming

You can copy the theme below and write to your own config. This is the default.

button: {
    base: 'px-[13px] py-[4px] rounded-full font-medium flex items-center gap-1 hover:bg-gradient-to-bl transition-all shadow hover:gap-1.5',
    // Base is applied to all buttons
    layouts: {
      primary: 'bg-primary border-transparent border-primary-light text-white bg-gradient-to-tr from-primary to-primary-light',
      white: 'bg-white text-paragraph hover:text-primary',
      transparent: 'bg-transparent text-header',
      // You can add your own layouts here
    },
    iconSides: 'h-4',
    sizes: {
      lg: 'text-lg',
      base: 'text-base',
      sm: 'text-sm'
      // You can add your own sizes here
    }
  },

Inview

import { Inview } from "@windkit/react";

  inview: {
  inviewClass: 'opacity-0 transition-all duration-700',
  visibleClass: 'opacity-100',
  hideAgain: true,
  threshold: [0.2, 1]
}

Coming soon / To do

• [] Better in-dev previews
• [] Input
• [] Popup
• [] Toast
• [] Modals
• [] Slide-ins
• [] Documentation for Windkit wrapper