open-index/open-npm huggingface dataset:
npm package: @jamesfsamorim/orchestra
Author: James Amorim
Latest version: 4.1.0

# 🎼 Orchestra UI


[![npm version](https://img.shields.io/npm/v/orchestra.svg)](https://www.npmjs.com/package/orchestra)
[![CI](https://github.com/jamesfsamorim/orchestra/actions/workflows/ci.yml/badge.svg)](https://github.com/jamesfsamorim/orchestra/actions/workflows/ci.yml)
![Cypress](https://img.shields.io/badge/tested%20with-Cypress-04C38E.svg)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)


Orchestra is a modular and scalable React component library built with Tailwind CSS v4, Radix UI, and modern development tools. It is designed to work out-of-the-box with projects using Vite or Next.js, and offers native support for Storybook and Cypress.

---

## 🚀 Installation

```bash
npm install @jamesfsamorim/orchestra@{version_desired}
# or
pnpm add @jamesfsamorim/orchestra@{version_desired}
```

### Peer Dependencies
Make sure to install these in your project:

```bash
npm install react react-dom
```

---

## 🌈 Usage

### Global CSS (Recommended)
Import `style.css` globally in your app (especially for **Next.js**):

```tsx
// app/layout.tsx or _app.tsx
import '@jamesfsamorim/orchestra/style.css';
```

### Component Import
```tsx
import { Button } from '@jamesfsamorim/orchestra';

export default function Page() {
  return <Button>Click me</Button>;
}
```

Orchestra automatically injects styles via JS if the global import is not used.

---

## 📦 Build & Conventions

This package uses:
- **Vite** as the bundler
- **postcss-url** to copy fonts to `dist/assets/fonts`
- **vite-plugin-static-copy** for asset copying
- **vite-plugin-css-injected-by-js** to inject styles via JS
- **vite-plugin-dts** to generate `*.d.ts` types

To build:

```bash
npm run build
```

This generates:
```
dist/
├── assets/          # Fonts and static files
├── index.css        # Extracted CSS for global import
├── index.css.map
├── index.js         # ESM build
├── index.umd.cjs    # UMD build
├── index.d.ts       # Types
```

---

## ✅ Tests & Storybook

### Cypress
```bash
npm run cypress:open
```

### Storybook
```bash
npm run storybook
```

---

## 📖 License
MIT — James Amorim