Tender React Components

This package contains the base components for the Tender app. The package is published as @ayrwellness/tender-react-components on npm.

Files Included

- index.js - The main component library
- style.css - Required CSS styles
- react_example.jsx - Example React component showing basic usage
- form_example.jsx - Comprehensive form example with all components

Installation

``bash
npm install @ayrwellness/tender-react-components
`

Quick Start

`jsx
import React from 'react'
import { Button, Dropdown, LayoutProvider } from '@ayrwellness/tender-react-components'
import '@ayrwellness/tender-react-components/style.css'

function App() {
return (

console.log('Clicked!')} />

)
}

export default App
`

Available Components

- Button - Various button types and styles
- Dropdown - Selection dropdown component
- SegmentedControl - Multi-option selection control
- KeyValueTable - Data display in key-value pairs
- BarChart - Interactive bar chart for data visualization
- ProgressBar - Visual progress indicator with different states
- QuestionnaireBlock - Interactive questionnaire component
- Loader - Loading states and animations
- LineInput - Text input component
- LayoutProvider - Design system provider (optional)

Styling

The components require the included CSS file for proper styling:

`jsx
import '@ayrwellness/tender-react-components/style.css'
`

For the complete design system, wrap your app with LayoutProvider:

`jsx
import { LayoutProvider } from '@ayrwellness/tender-react-components'

function App() {
return (

{/ Your app content /}

)
}
`

Examples

- react_example.jsx - Basic component examples and interactions
- form_example.jsx` - Comprehensive form demonstrating all components working together