@beryl-ui/react

Professional React component library from beryl-ui, built with styled-components and Radix UI for maximum performance and accessibility.

✨ Included Components

• 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 (requires ToastProvider).
• Tooltip: Contextual text hints displayed on hover, focus, or touch (optional TooltipProvider for global control).

For interactive documentation and usage examples for each component, visit our Storybook online.

🚀 Installation

To use the React components in your project, install the package via npm, yarn, or pnpm:

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 and apply the global styles.

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

globalStyles() // Apply global styles

export function App() {
  return (
    <ThemeProvider theme={defaultTheme}>
      {/* ... your components and routes that will use the design system ... */}
    </ThemeProvider>
  )
}

💡 Basic Usage

Example of how to use a Button component:

import { Button } from '@beryl-ui/react'

function MyComponent() {
  return (
    <Button onClick={() => alert('Clicked!')}>
      Click here
    </Button>
  )
}

🛠️ Local Development (for contributors)

If you are contributing to this package specifically within the monorepo:

1. Navigate to the package folder:

   cd packages/react

2. Run development mode: To compile the package in watch mode and see changes in real-time (usually used in conjunction with the monorepo's Storybook):

   npm run dev

   (This dev script is defined in the package.json of packages/react and uses tsup to watch for changes).

📄 License

This package is under the MIT license. See the LICENSE.md file in the root of the repository for more details.