DORAI UI

Accessible, unstyled, open-sourced and fully functional react component library for building design systems

Documentation site coming soon

Storybook documentation - here

Features

• 🎨   Unstyled --> Are you frustrated with tightly coupled components with styles and a fixed approach to extend their functionalities? Dorai offers components not coupled with styles. Do you want to use utility styles or CSS-in-JS? Styles rest in your absolute control.

• 🚀   Accessible --> Building a component library is difficult, supporting accessibility is a more difficult task. With dorai, components are accessible out of the box following the WAI-ARIA specification.

• ⚓️   Controlled and UnControlled --> Dorai components are controlled and some components also offer external controlled ability as deemed fit. Efforts are being made to offer external control abiliity to all components.

• 💧   Independent & All-in-One Component --> Dorai components are independently shipped. This grants the ability to install a single component or multiple as needed. All of the components can be added by installing the @dorai-ui/components.

Installation

All components can be found here on npm.

To install all of the components together, you can find it here

Example usage

You can make use of a component of your choice by simply installing it;

npm install @dorai-ui/tabs

or

yarn add @dorai-ui/tabs

An example way of using the installed component

import { Tabs } from '@dorai-ui/tabs'

 function ModalComponent() {
  return (
    <Tabs>
      <Tabs.List>
        <Tabs.Trigger>tab 1</Tabs.Trigger>
      </Tabs.List>
      <Tabs.Panel>
        <p>Panel Tab 1</p>
      </Tabs.Panel>
    </Tabs>
  )
}

Roadmap

The project seeks to support as many components as possible as listed under Aria Design Patterns. The roadmap table shows components already built and the ones in progress.

Contributors

This project exists thanks to our contributors.