🥑 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>
  )
}

• Learn more on the official documentation

Roadmap

Foundations

• [x] Heading
• [x] Text
• [x] Color
• [x] Spacing
• [ ] Theming

Layout

• [x] Flex
• [ ] Grid
• [ ] Stack
• [x] Box

Components

• [x] Accordion
• [x] Avatar
• [x] Button
• [ ] Checkbox
• [ ] Dropdown
• [x] Input
• [x] Image
• [x] Modal
• [ ] Radio Group
• [ ] Select
• [x] Separator
• [x] Spinner
• [ ] Tabs
• [ ] Link
• [ ] Tooltip
• [ ] Card

License

MIT © vickonrails