Set of UI components for OatSwap projects

Usage no npm install needed!

<script type="module">
  import oatswapOatswapUikit from 'https://cdn.skypack.dev/@oatswap/oatswap-uikit';


🌾 OatSwap UIKit

Version Size

OatSwap UIKit is a set of React components and hooks used to build pages on Pancake's apps. It also contains a theme file for dark and light mode.


yarn add @oatswap/oatswap-uikit



Before using OatSwap UIKit, you need to provide the theme file to styled-component.

import { ThemeProvider } from 'styled-components'
import { light, dark } from '@oatswap/oatswap-uikit'
<ThemeProvider theme={isDark}>...</ThemeProvider>


A reset CSS is available as a global styled component.

import { ResetCSS } from '@oatswap/oatswap-uikit'
<ResetCSS />


This project is built with Typescript and export all the relevant types.

How to use the UIkit

If you want to use components from the UIKit, check the Storybook documentation