0.0.21 • Published 2 years ago
@windkit/react v0.0.21
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
0.0.20
2 years ago
0.0.21
2 years ago
0.0.15
2 years ago
0.0.16
2 years ago
0.0.17
2 years ago
0.0.18
2 years ago
0.0.19
2 years ago
0.0.14
2 years ago
0.0.13
2 years ago
0.0.12
2 years ago
0.0.11
2 years ago
0.0.10
2 years ago
0.0.9
2 years ago
0.0.8
2 years ago
0.0.7
2 years ago
0.0.6
2 years ago
0.0.5
2 years ago
0.0.4
2 years ago
0.0.3
2 years ago
0.0.2
2 years ago
0.0.1
2 years ago
0.0.0
2 years ago