SharyUI

Customised UI library for myshary.com

SharyUI was built to speed up implementation flow of Shary's developers and to help them improve design consistency by having a centralised design center for all of their UI components.

Installation

SharyUI is available as an npm package.

Requirements:

All of the components in SharyUI are designed with the latest version of Tailwind CSS, which is currently version 3.2. That means that Tailwind needs to be installed in your project in order for our components works. This can be done by running:

npm install tailwindcss@latest
# or
yarn add tailwindcss@latest

npm:

npm install sharyui

yarn:

yarn add sharyui

Next, make sure to import the library stylesheet from node_modules/sharyui/dist/styles.css in your main.js file or in your root component. This is due to an issue with tailwind not compiling the classes when used with storybook at the moment.

Getting started with SharyUI

Here is an example of a basic app using SharyUI's Button component:

import { Button } from 'sharyui';

function App() {
  return <Button variant="secondary">Hello World</Button>;
}

Documentation

• Developer documentation
• Figma design