@avocado-ui/react NPM

🥑 avocado-ui

Experimental design system for building accessible, themeable and beautiful interfaces.

📚 Storybook
🤓 Documentation | Github

Quick Start

Installing with npm

npm install @avocado-ui/react

Installing with yarn

yarn add @avocado-ui/react

Features

♿ Accessible: Accessibility is not an after taught in avocado. All components have accessible names and are called out correctly by screen readers. I ensure colors are accessibile, focus indicators are present on all components and they are in the right tab order.
💅🏼 Themeable: avocado is highly themeable and the entire look can be controlled by tokens. I'm currently researching about styled-system and the goal is to ensure avocado follows the spec.
🌃 Dark Mode: Good design systems handle darkmode excellently. I'm also researching & learning the best way to implement dark mode in avocado.
😎 Modern: Modern design systems are a combination of tooling, look and feel of the interface. You have to really work hard to make avocado ugly 😋.

Usage

import { ThemeProvider, Button, Flex } from '@avocado-ui/react'
import './styles.css'

// basic theming with primary and secondary colors
const theme = {
  primaryColor: '#3f00ff',
  secondaryColor: '#6330ff'
}

export default function App() {
  return (
    <ThemeProvider className='App' theme={theme}>
      <Flex gap={5}>
        <Button>Welcome to Avocado</Button>
        <Button buttonType='outline'>Welcome to Avocado</Button>
      </Flex>
    </ThemeProvider>
  )
}