🥑 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

• Heading
• Text
• Color
• Spacing
• Theming

Layout

• Flex
• Grid
• Stack
• Box

Components

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

License

MIT © vickonrails