ShipUI

⚓️ UI components to ship stuff

Warning
This library is still under rapid development 🛠

📦 Installation and Usage

yarn add shipui
# Or with npm
npm install shipui

// next.config.js
module.exports = {
  compiler: {
    emotion: true,
  },
}

// @/utils/colors.ts
import { createPalette } from 'shipui'

export const Colors = createPalette({ r: 166, g: 115, b: 255 })

// @/pages/_app.tsx
import { AppProps } from 'next/app'
import React from 'react'
import { ColorProvider, LoadingProgress, MetaData, MetaHead, useLoadingProgressProps } from 'shipui'

import { Colors } from '@/utils/colors'

// FIXME: Declare website's default metadata here
const meta: MetaData = {
  title: 'ShipUI',
  description: 'UI components to ship stuff',
  image: 'https://www.junho.io/assets/og-image.jpg',
  url: 'https://junho.io',
  canonical: 'https://junho.io',
  themeColor: Colors.primary,
}

const App: React.FC<AppProps> = ({ Component, pageProps }) => {
  const loadingProps = useLoadingProgressProps()

  return (
    <React.Fragment>
      <MetaHead {...meta} />
      <ColorProvider value={Colors}>
        <LoadingProgress {...loadingProps} />
        <Component {...pageProps} />
        <div id="portal" />
      </ColorProvider>
    </React.Fragment>
  )
}

export default App