Beryl UI

A robust and professional design system for React applications. A complete library of reusable and well-documented components.

Components   |    Getting Started   |    Development   |    License

Documentation: View all components and their complete documentation in our Storybook online.

✨ Components

List of components that have been developed and are ready to use:

• Avatar: Display image with fallback.
• Button: Button for various actions with variants.
• Checkbox: Selection box.
• Heading: Title for sections.
• MultiStep: Progress indicator for multi-step forms.
• Text: Component for general text.
• TextArea: Multi-line text field.
• TextInput: Text input field.
• Toast: Feedback message for the user.
• Tooltip: Text hint with contextual information.

🚀 Getting Started

To use the beryl-ui components in your project, follow the steps below.

Installation

You will need to install the main package and its peer dependencies (react, react-dom, and styled-components).

npm install @beryl-ui/react styled-components
# or
yarn add @beryl-ui/react styled-components
# or
pnpm add @beryl-ui/react styled-components

Configuration

For the components to work correctly with the default theme, you need to wrap your application with the ThemeProvider from styled-components.

// In your main file (e.g: App.tsx)
import { globalStyles } from './styles/global'
import { ThemeProvider } from 'styled-components'
import { defaultTheme } from '@beryl-ui/react/styles' // Adjust the path if needed

globalStyles()

export function App() {
  return (
    <ThemeProvider theme={defaultTheme}>
      {/* ... your code and routes ... */}
    </ThemeProvider>
  )
}

💻 Local Development

If you want to contribute to the project, follow these instructions to set up your development environment.

1. Clone the repository:

   git clone https://github.com/Robson16/beryl-ui.git
   cd beryl-ui

2. Install dependencies: This is a monorepo configured with workspaces. Use NPM to install dependencies for all packages.

   npm install

3. Run the development environment: This project uses Turborepo to manage the monorepo scripts. To start Storybook and packages in development mode, run:

   npm run dev

   This command will run the dev script for all packages in parallel, allowing you to view components in Storybook and make changes to the source code.

📝 License

This project is under the MIT license. See the LICENSE.md file for more details.