Themable component library and utility hooks for React

Intro

Kodiak UI is a set of primitive and complex components and React hooks for building applications. It is used and built by the fine folks at SkyVerge on Jilt and other products.

All components are built on the Theme UI and Styled System libraries to build applications on constraint-based design principles. All components accept the styled-system style props for quick and consistent styling based upon the Theme UI theme specification.

Kodiak hooks are small, reusable, and well tested to provide the most consistent approach to manipulating state, data, and side effects.

Get started

// Install primitive components
yarn add @kodiak-ui/primitives react react-dom theme-ui

// Install hooks
yarn add @kodiak-ui/hooks react react-dom

All complex components (i.e. Dropdown, Combobox, Accordion) are separate packages and will need to be installed as needed.

yarn add @kodiak-ui/dropdown

Once primitive components or a complex component have been installed, create a theme object to match the design of your application.

// example theme.js
export default {
  fonts: {
    body: 'system-ui, sans-serif',
    heading: '"Avenir Next", sans-serif',
    monospace: 'Menlo, monospace',
  },
  colors: {
    text: '#000',
    background: '#fff',
    primary: '#33e',
  },
}

Finally, just like in Emotion or Styled Components, you need to wrap your application with Theme UI's ThemeProvider component.

// basic usage
import React from 'react'
import { ThemeProvider } from 'theme-ui'
import theme from './theme'
export default props => (
  <ThemeProvider theme={theme}>{props.children}</ThemeProvider>
)

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Alex Chan 💻 🤔 🚧 👀

Wesley Cole 💻 🤔 🚧 👀

TAY TS ⚠️

lukasslivko 💻

Bink ⚠️

This project follows the all-contributors specification. Contributions of any kind welcome!