open-index/open-npm huggingface dataset:
npm package: @pittorica/aspect-ratio-react
Description: A component to maintain the aspect ratio of a child element.
Latest version: 0.26.3

# @pittorica/aspect-ratio-react

A component to maintain the aspect ratio of a child element.

## Installation

```bash
npm install @pittorica/aspect-ratio-react
```

You will also need to install the core `pittorica` package which contains the CSS, and its dependencies.

```bash
npm install pittorica @pittorica/box-react
```

## Usage

```jsx
import { AspectRatio } from '@pittorica/aspect-ratio-react';
import { Box } from '@pittorica/box-react';
import 'pittorica/reset';
import 'pittorica/tokens';

function MyImage() {
  return (
    <Box style={{ width: '400px' }}>
      <AspectRatio ratio={16 / 9}>
        <img
          src="https://images.unsplash.com/photo-1769251297393-8178b5988b08?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
          alt="Landscape"
        />
      </AspectRatio>
    </Box>
  );
}
```

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/avatar-react
Description: An image component with a fallback for representing a user.
Latest version: 0.26.3

# @pittorica/avatar-react

An image component with a fallback for representing a user.

## Installation

```bash
npm install @pittorica/avatar-react
```

You will also need to install the core `pittorica` package which contains the CSS, and its dependencies.

```bash
npm install pittorica @pittorica/box-react
```

## Usage

```jsx
import { Avatar } from '@pittorica/avatar-react';
import 'pittorica/reset';
import 'pittorica/tokens';

function MyAvatar() {
  return (
    <Avatar
      src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80"
      alt="Colm Tuite"
      fallback="CT"
    />
  );
}
```

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/badge-react
Description: A small numerical value or status descriptor for a UI element.
Latest version: 0.26.3

# @pittorica/badge-react

A small numerical value or status descriptor for a UI element.

## Installation

```bash
npm install @pittorica/badge-react
```

You will also need to install the core `pittorica` package which contains the CSS, and its dependencies.

```bash
npm install pittorica @pittorica/box-react @pittorica/text-react
```

## Usage

```jsx
import { Badge } from '@pittorica/badge-react';
import { Box } from '@pittorica/box-react';
import 'pittorica/reset';
import 'pittorica/tokens';

function MyBadge() {
  return (
    <Badge badgeContent={4} color="indigo">
      <Box
        style={{
          width: '40px',
          height: '40px',
          background: 'var(--pittorica-slate-3)',
          borderRadius: '4px',
        }}
      />
    </Badge>
  );
}
```

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/blockquote-react
Description: The `Blockquote` component.
Latest version: 0.26.3

# @pittorica/blockquote-react

The `Blockquote` component.

## Installation

```bash
npm install @pittorica/blockquote-react
```

## Usage

```jsx
import { Blockquote } from '@pittorica/blockquote-react';

function MyComponent() {
  return (
    <Blockquote variant="soft" color="indigo">
      Design is not just what it looks like and feels like. Design is how it
      works.
    </Blockquote>
  );
}
```

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/box-react
Description: The `Box` component.
Latest version: 0.26.3

# @pittorica/box-react

The `Box` component.

## Installation

```bash
npm install @pittorica/box-react
```

## Usage

```jsx
import { Box } from '@pittorica/box-react';

function MyForm() {
  return (
    <Box as="form">
      <Box as="input" required placeholder="Required field" />
      <Box as="button" type="submit">
        Submit
      </Box>
    </Box>
  );
}
```

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/button-react
Description: The `Button` component.
Latest version: 0.26.3

# @pittorica/button-react

The `Button` component.

## Installation

```bash
npm install @pittorica/button-react
```

## Usage

```jsx
import { Button } from '@pittorica/button-react';

function MyComponent() {
  return (
    <Button variant="filled" color="indigo" onClick={() => alert('Clicked!')}>
      Click Me
    </Button>
  );
}
```

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/callout-react
Description: The `Callout` component.
Latest version: 0.26.3

# @pittorica/callout-react

The `Callout` component.

## Installation

```bash
npm install @pittorica/callout-react
```

## Usage

```jsx
import { Callout } from '@pittorica/callout-react';
// TODO: Add usage example
```

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/card-react
Description: The `Card` component.
Latest version: 0.26.3

# @pittorica/card-react

The `Card` component.

## Installation

```bash
npm install @pittorica/card-react
```

## Usage

```jsx
import { Card } from '@pittorica/card-react';
// TODO: Add usage example
```

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/carousel-react
Description: The `Carousel` component.
Latest version: 0.26.3

# @pittorica/carousel-react

The `Carousel` component.

## Installation

```bash
npm install @pittorica/carousel-react
```

## Usage

```jsx
import { Carousel } from '@pittorica/carousel-react';
// TODO: Add usage example
```

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/checkbox-card-react
Description: The `CheckboxCard` component.
Latest version: 0.26.3

# @pittorica/checkbox-card-react

The `CheckboxCard` component.

## Installation

```bash
npm install @pittorica/checkbox-card-react
```

## Usage

```jsx
import { CheckboxCard } from '@pittorica/checkbox-card-react';
// TODO: Add usage example
```

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/checkbox-group-react
Description: The `CheckboxGroup` component.
Latest version: 0.26.3

# @pittorica/checkbox-group-react

The `CheckboxGroup` component.

## Installation

```bash
npm install @pittorica/checkbox-group-react
```

## Usage

```jsx
import { CheckboxGroup } from '@pittorica/checkbox-group-react';
// TODO: Add usage example
```

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/checkbox-react
Description: The `Checkbox` component.
Latest version: 0.26.3

# @pittorica/checkbox-react

The `Checkbox` component.

## Installation

\`\`\`bash
npm install @pittorica/checkbox-react
\`\`\`

## Usage

\`\`\`jsx
import { Checkbox } from '@pittorica/checkbox-react';

function MyForm() {
return (

<form>
<Checkbox
label="Accept Terms and Conditions"
name="terms"
required // Mark as required
color="source" // Default color is now 'source'
onChange={(checked) => console.log('Agreed:', checked)}
/>
<button type="submit">Submit</button>
</form>
);
}
\`\`\`

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/chip-react
Description: The `Chip` component.
Latest version: 0.26.3

# @pittorica/chip-react

The `Chip` component.

## Installation

```bash
npm install @pittorica/chip-react
```

## Usage

```jsx
import { Chip } from '@pittorica/chip-react';
// TODO: Add usage example
```

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/code-react
Description: The `Code` component.
Latest version: 0.26.3

# @pittorica/code-react

The `Code` component.

## Installation

```bash
npm install @pittorica/code-react
```

## Usage

```jsx
import { Code } from '@pittorica/code-react';

function MyComponent() {
  return (
    <>
      <Code>npm install pittorica</Code>

      <Code language="typescript" filename="Example.ts" showLineNumbers>
        {\`const hello = "world";
console.log(hello);\`}
      </Code>
    </>
  );
}
```

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/container-react
Description: The `Container` component.
Latest version: 0.26.3

# @pittorica/container-react

The `Container` component.

## Installation

```bash
npm install @pittorica/container-react
```

## Usage

```jsx
import { Container } from '@pittorica/container-react';
// TODO: Add usage example
```

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/context-menu-react
Description: The `ContextMenu` component.
Latest version: 0.26.3

# @pittorica/context-menu-react

The `ContextMenu` component.

## Installation

```bash
npm install @pittorica/context-menu-react
```

## Usage

```jsx
import { ContextMenu } from '@pittorica/context-menu-react';
// TODO: Add usage example
```

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/data-list-react
Description: The `DataList` component.
Latest version: 0.26.3

# @pittorica/data-list-react

The `DataList` component.

## Installation

```bash
npm install @pittorica/data-list-react
```

## Usage

```jsx
import { DataList } from '@pittorica/data-list-react';
// TODO: Add usage example
```

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/dialog-react
Description: A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
Latest version: 0.26.3

# @pittorica/dialog-react

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

## Installation

```bash
npm install @pittorica/dialog-react
```

You will also need to install the core `pittorica` package which contains the CSS, and its dependencies.

```bash
npm install pittorica @pittorica/box-react @pittorica/heading-react @pittorica/button-react
```

## Usage

```jsx
import { useState } from 'react';
import {
  Dialog,
  DialogActions,
  DialogDescription,
  DialogTitle,
} from '@pittorica/dialog-react';
import { Button } from '@pittorica/button-react';
import 'pittorica/reset';
import 'pittorica/tokens';

function MyDialog() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button variant="elevated" onClick={() => setOpen(true)}>
        Open Dialog
      </Button>

      <Dialog open={open} onClose={() => setOpen(false)}>
        <DialogTitle>Dialog Title</DialogTitle>
        <DialogDescription>
          This is a description of the dialog content. It provides context for
          the user regarding the action they are about to take.
        </DialogDescription>
        <DialogActions>
          <Button variant="text" color="slate" onClick={() => setOpen(false)}>
            Cancel
          </Button>
          <Button variant="filled" onClick={() => setOpen(false)}>
            Confirm
          </Button>
        </DialogActions>
      </Dialog>
    </>
  );
}
```

## API Reference

### Dialog

| Prop                  | Type                             | Description                                      | Default |
| --------------------- | -------------------------------- | ------------------------------------------------ | ------- |
| `open`                | `boolean`                        | If `true`, the dialog is open.                   |         |
| `onClose`             | `() => void`                     | Callback fired when the dialog is closed.        |         |
| `children`            | `React.ReactNode`                | The content of the dialog.                       |         |
| `className`           | `string`                         | Optional class name for the dialog.              |         |
| `appearance`          | `'light' \| 'dark' \| 'inherit'` | The appearance of the dialog.                    |         |
| `closeOnOverlayClick` | `boolean`                        | If `true`, the dialog closes on overlay click.   | `true`  |
| `closeOnEsc`          | `boolean`                        | If `true`, the dialog closes on `Esc` key press. | `true`  |

### DialogTitle

The `DialogTitle` component accepts all props of the `Heading` component.

### DialogDescription

The `DialogDescription` component accepts all props of the `Box` component.

### DialogActions

The `DialogActions` component accepts all props of the `Box` component.
npm package: @pittorica/divider-react
Description: The `Divider` component.
Latest version: 0.26.3

# @pittorica/divider-react

The `Divider` component.

## Installation

```bash
npm install @pittorica/divider-react
```

## Usage

```jsx
import { Divider } from '@pittorica/divider-react';
// TODO: Add usage example
```

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/dropdown-menu-react
Description: The `DropdownMenu` component.
Latest version: 0.26.3

# @pittorica/dropdown-menu-react

The `DropdownMenu` component.

## Installation

```bash
npm install @pittorica/dropdown-menu-react
```

## Usage

```jsx
import { DropdownMenu } from '@pittorica/dropdown-menu-react';
// TODO: Add usage example
```

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/em-react
Description: The `Em` component.
Latest version: 0.26.3

# @pittorica/em-react

The `Em` component.

## Installation

```bash
npm install @pittorica/em-react
```

## Usage

```jsx
import { Em } from '@pittorica/em-react';

function MyComponent() {
  return (
    <p>
      This is a <Em>very important</Em> message.
    </p>
  );
}
```

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/flex-react
Description: The `Flex` component.
Latest version: 0.26.3

# @pittorica/flex-react

The `Flex` component.

## Installation

```bash
npm install @pittorica/flex-react
```

## Usage

```jsx
import { Flex, Box } from '@pittorica/flex-react';

function MyLayout() {
  return (
    <Flex gap="4" align="center" justify="between">
      <Box>Item 1</Box>
      <Box>Item 2</Box>
    </Flex>
  );
}
```

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/grid-react
Description: The `Grid` component.
Latest version: 0.26.3

# @pittorica/grid-react

The `Grid` component.

## Installation

```bash
npm install @pittorica/grid-react
```

## Usage

```jsx
import { Grid, Box } from '@pittorica/grid-react';

function MyDashboard() {
  return (
    <Grid columns={{ initial: '1', md: '2', lg: '4' }} gap="4">
      <Box>Widget 1</Box>
      <Box>Widget 2</Box>
      <Box>Widget 3</Box>
      <Box>Widget 4</Box>
    </Grid>
  );
}
```

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/heading-react
Description: The `Heading` component.
Latest version: 0.26.3

# @pittorica/heading-react

The `Heading` component.

## Installation

```bash
npm install @pittorica/heading-react
```

## Usage

```jsx
import { Heading } from '@pittorica/heading-react';

function MyPage() {
  return (
    <>
      <Heading as="h1" size="9">
        Main Title
      </Heading>
      <Heading as="h2" size="7">
        Subtitle
      </Heading>
    </>
  );
}
```

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/hover-card-react
Description: The `HoverCard` component.
Latest version: 0.26.3

# @pittorica/hover-card-react

The `HoverCard` component.

## Installation

```bash
npm install @pittorica/hover-card-react
```

## Usage

```jsx
import { HoverCard } from '@pittorica/hover-card-react';
// TODO: Add usage example
```

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/icon-button-react
Description: The `IconButton` component.
Latest version: 0.26.3

# @pittorica/icon-button-react

The `IconButton` component.

## Installation

```bash
npm install @pittorica/icon-button-react
```

## Usage

```jsx
import { IconButton } from '@pittorica/icon-button-react';
// TODO: Add usage example
```

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/input-otp-react
Description: The `InputOTP` component.
Latest version: 0.26.3

# @pittorica/input-otp-react

The `InputOTP` component.

## Installation

```bash
npm install @pittorica/input-otp-react
```

## Usage

```jsx
import { InputOTP } from '@pittorica/input-otp-react';

function MyForm() {
  return (
    <InputOTP maxLength={6}>
      <InputOTP.Group>
        <InputOTP.Slot index={0} />
        <InputOTP.Slot index={1} />
        <InputOTP.Slot index={2} />
      </InputOTP.Group>
      <InputOTP.Separator />
      <InputOTP.Group>
        <InputOTP.Slot index={3} />
        <InputOTP.Slot index={4} />
        <InputOTP.Slot index={5} />
      </InputOTP.Group>
    </InputOTP>
  );
}
```

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/inset-react
Description: The `Inset` component.
Latest version: 0.26.3

# @pittorica/inset-react

The `Inset` component.

## Installation

```bash
npm install @pittorica/inset-react
```

## Usage

```jsx
import { Inset, Box, Text } from '@pittorica/react';

function MyCard() {
  return (
    <Box p="4" style={{ border: '1px solid var(--pittorica-slate-4)' }}>
      <Inset side="top">
        <img src="header.jpg" alt="Header" />
      </Inset>
      <Text mt="3">Card Content</Text>
    </Box>
  );
}
```

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/kbd-react
Description: The `Kbd` component.
Latest version: 0.26.3

# @pittorica/kbd-react

The `Kbd` component.

## Installation

```bash
npm install @pittorica/kbd-react
```

## Usage

```jsx
import { Kbd } from '@pittorica/kbd-react';

function ShortCuts() {
  return (
    <p>
      Press <Kbd>⌘ + K</Kbd> to open the search bar.
    </p>
  );
}
```

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/link-react
Description: The `Link` component.
Latest version: 0.26.3

# @pittorica/link-react

The `Link` component.

## Installation

```bash
npm install @pittorica/link-react
```

## Usage

```jsx
import { Link } from '@pittorica/link-react';

function MyLink() {
  return (
    <Link href="https://pittorica.dcdavidev.me" target="_blank">
      Documentation
    </Link>
  );
}
```

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/popover-react
Description: The `Popover` component.
Latest version: 0.26.3

# @pittorica/popover-react

The `Popover` component.

## Installation

```bash
npm install @pittorica/popover-react
```

## Usage

```jsx
import { Popover } from '@pittorica/popover-react';
// TODO: Add usage example
```

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/progress-react
Description: The `Progress` component.
Latest version: 0.26.3

# @pittorica/progress-react

The `Progress` component.

## Installation

```bash
npm install @pittorica/progress-react
```

## Usage

```jsx
import { Progress } from '@pittorica/progress-react';

function MyComponent() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
      <Progress value={45} color="indigo" />
      <Progress value={100} color="success" />
      <Progress value={15} color="danger" />
    </div>
  );
}
```

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/quote-react
Description: The `Quote` component.
Latest version: 0.26.3

# @pittorica/quote-react

The `Quote` component.

## Installation

```bash
npm install @pittorica/quote-react
```

## Usage

```jsx
import { Quote } from '@pittorica/quote-react';

function MyText() {
  return (
    <p>
      As they say, <Quote>less is more</Quote>.
    </p>
  );
}
```

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/radio-card-react
Description: The `RadioCard` component.
Latest version: 0.26.3

# @pittorica/radio-card-react

The `RadioCard` component.

## Installation

```bash
npm install @pittorica/radio-card-react
```

## Usage

```jsx
import { RadioCard } from '@pittorica/radio-card-react';
// TODO: Add usage example
```

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/radio-group-react
Description: The `RadioGroup` component.
Latest version: 0.26.3

# @pittorica/radio-group-react

The `RadioGroup` component.

## Installation

```bash
npm install @pittorica/radio-group-react
```

## Usage

```jsx
import { RadioGroup } from '@pittorica/radio-group-react';
// TODO: Add usage example
```

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/radio-react
Description: The `Radio` component.
Latest version: 0.26.3

# @pittorica/radio-react

The `Radio` component.

## Installation

\`\`\`bash
npm install @pittorica/radio-react
\`\`\`

## Usage

\`\`\`jsx
import { Radio } from '@pittorica/radio-react';

function MyForm() {
const [selectedValue, setSelectedValue] = useState('option1');

return (

<form>
<Radio
label="Option 1"
value="option1"
name="myRadioGroup"
checked={selectedValue === 'option1'}
onCheckedChange={(checked) => {
if (checked) setSelectedValue('option1');
}}
required // Mark as required
color="source" // Default color is now 'source'
/>
<Radio
label="Option 2"
value="option2"
name="myRadioGroup"
checked={selectedValue === 'option2'}
onCheckedChange={(checked) => {
if (checked) setSelectedValue('option2');
}}
/>
<button type="submit" disabled={!selectedValue}>Submit</button>
</form>
);
}
\`\`\`

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/react
Description: This package is a collection of all the React components in the Pittorica design system.
Latest version: 0.26.3

# @pittorica/react

This package is a collection of all the React components in the Pittorica design system.

## Installation

To install the entire component library, run the following command:

```bash
npm install @pittorica/react
```

You will also need to install the core `pittorica` package which contains the CSS.

```bash
npm install pittorica
```

## Usage

Once installed, you can import the components from `@pittorica/react`.

```jsx
import 'pittorica/reset';
import 'pittorica/tokens';
import { Button, Card } from '@pittorica/react';

function MyApp() {
  return (
    <Card>
      <Button>Click me</Button>
    </Card>
  );
}
```

## Available Components

This package includes the following components:

- `AlertDialog`
- `AspectRatio`
- `Avatar`
- `Badge`
- `Blockquote`
- `Box`
- `Button`
- `Callout`
- `Card`
- `Carousel`
- `Checkbox`
- `CheckboxCard`
- `CheckboxGroup`
- `Chip`
- `Code`
- `Container`
- `ContextMenu`
- `DataList`
- `Dialog`
- `Divider`
- `DropdownMenu`
- `Em`
- `Flex`
- `Grid`
- `Heading`
- `HoverCard`
- `IconButton`
- `Inset`
- `Kbd`
- `Link`
- `Popover`
- `Progress`
- `Quote`
- `Radio`
- `RadioCard`
- `RadioGroup`
- `Section`
- `SegmentedControl`
- `Select`
- `Sheet`
- `Skeleton`
- `Slider`
- `Stack`
- `Strong`
- `Switch`
- `Table`
- `Tabs`
- `Text`
- `TextArea`
- `TextField`
- `Theme`
- `Toast`
- `Tooltip`

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/section-react
Description: The `Section` component.
Latest version: 0.26.3

# @pittorica/section-react

The `Section` component.

## Installation

```bash
npm install @pittorica/section-react
```

## Usage

```jsx
import { Section, Heading, Text } from '@pittorica/react';

function MyPage() {
  return (
    <Section size="3">
      <Heading>About Us</Heading>
      <Text>Modular and accessible design system.</Text>
    </Section>
  );
}
```

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/segmented-control-react
Description: The `SegmentedControl` component.
Latest version: 0.26.3

# @pittorica/segmented-control-react

The `SegmentedControl` component.

## Installation

```bash
npm install @pittorica/segmented-control-react
```

## Usage

```jsx
import { SegmentedControl } from '@pittorica/segmented-control-react';
// TODO: Add usage example
```

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/select-react
Description: The `Select` component.
Latest version: 0.26.3

# @pittorica/select-react

The `Select` component.

## Installation

\`\`\`bash
npm install @pittorica/select-react
\`\`\`

## Usage

\`\`\`jsx
import { Select } from '@pittorica/select-react';

function MyForm() {
return (

<form>
<Select.Root
label="Country"
name="country"
required // Mark as required
color="source" // Default color is now 'source'
size="sm"
defaultValue="us" >
<Select.Content>
<option value="">Select a country</option>
<option value="us">United States</option>
<option value="ca">Canada</option>
<option value="mx">Mexico</option>
</Select.Content>
</Select.Root>
<button type="submit">Submit</button>
</form>
);
}
\`\`\`

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/sheet-react
Description: The `Sheet` component.
Latest version: 0.26.3

# @pittorica/sheet-react

The `Sheet` component.

## Installation

```bash
npm install @pittorica/sheet-react
```

## Usage

```jsx
import { Sheet } from '@pittorica/sheet-react';
// TODO: Add usage example
```

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/skeleton-react
Description: The `Skeleton` component.
Latest version: 0.26.3

# @pittorica/skeleton-react

The `Skeleton` component.

## Installation

```bash
npm install @pittorica/skeleton-react
```

## Usage

```jsx
import { Skeleton, Flex, Box } from '@pittorica/skeleton-react';

function MyComponent({ loading }) {
  return (
    <Flex align="center" gap="3">
      <Skeleton loading={loading} variant="circle" width={48} height={48}>
        <img src="avatar.png" alt="User" />
      </Skeleton>
      <Box width={150}>
        <Skeleton loading={loading} variant="text" mb="1" />
        <Skeleton loading={loading} variant="text" width="60%" />
      </Box>
    </Flex>
  );
}
```

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/slider-react
Description: The `Slider` component.
Latest version: 0.26.3

# @pittorica/slider-react

The `Slider` component.

## Installation

\`\`\`bash
npm install @pittorica/slider-react
\`\`\`

## Usage

\`\`\`jsx
import { Slider } from '@pittorica/slider-react';

function MyForm() {
return (

<form>
<Slider
min={0}
max={100}
defaultValue={50}
color="source" // Default color is now 'source'
required // Mark as required
label="Volume"
/>
<button type="submit">Submit</button>
</form>
);
}
\`\`\`

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/stack-react
Description: The `Stack` component.
Latest version: 0.26.3

# @pittorica/stack-react

The `Stack` component.

## Installation

```bash
npm install @pittorica/stack-react
```

## Usage

```jsx
import { Stack, Box } from '@pittorica/stack-react';

function MyList() {
  return (
    <Stack gap="3">
      <Box>Item 1</Box>
      <Box>Item 2</Box>
      <Box>Item 3</Box>
    </Stack>
  );
}
```

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/strong-react
Description: The `Strong` component.
Latest version: 0.26.3

# @pittorica/strong-react

The `Strong` component.

## Installation

```bash
npm install @pittorica/strong-react
```

## Usage

```jsx
import { Strong } from '@pittorica/strong-react';

function MyComponent() {
  return (
    <p>
      This is <Strong>very important</Strong> information.
    </p>
  );
}
```

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/switch-react
Description: The `Switch` component.
Latest version: 0.26.3

# @pittorica/switch-react

The `Switch` component.

## Installation

\`\`\`bash
npm install @pittorica/switch-react
\`\`\`

## Usage

\`\`\`jsx
import { Switch } from '@pittorica/switch-react';

function MyForm() {
return (

<form>
<Switch
label="Enable notifications"
name="notifications"
required // Mark as required
color="source" // Default color is now 'source'
/>
<button type="submit">Submit</button>
</form>
);
}
\`\`\`

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/table-react
Description: The `Table` component.
Latest version: 0.26.3

# @pittorica/table-react

The `Table` component.

## Installation

```bash
npm install @pittorica/table-react
```

## Usage

```jsx
import { Table } from '@pittorica/table-react';
// TODO: Add usage example
```

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/tabs-react
Description: The `Tabs` component.
Latest version: 0.26.3

# @pittorica/tabs-react

The `Tabs` component.

## Installation

```bash
npm install @pittorica/tabs-react
```

## Usage

```jsx
import { Tabs } from '@pittorica/tabs-react';
// TODO: Add usage example
```

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/text-area-react
Description: The `TextArea` component.
Latest version: 0.26.3

# @pittorica/text-area-react

The `TextArea` component.

## Installation

\`\`\`bash
npm install @pittorica/text-area-react
\`\`\`

## Usage

\`\`\`jsx
import { TextArea } from '@pittorica/text-area-react';

function MyForm() {
return (

<form>
<TextArea.Root
label="Comments"
name="comments"
required // Mark as required
color="source" // Default color is now 'source'
size="sm"
helperText="Enter your feedback below." >
<TextArea.Content placeholder="Type your message here..." />
</TextArea.Root>
<button type="submit">Submit</button>
</form>
);
}
\`\`\`

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/text-field-react
Description: The `TextField` component.
Latest version: 0.26.3

# @pittorica/text-field-react

The `TextField` component.

## Installation

\`\`\`bash
npm install @pittorica/text-field-react
\`\`\`

## Usage

\`\`\`jsx
import { TextField } from '@pittorica/text-field-react';

function MyForm() {
return (

<form>
<TextField.Root
label="Username"
name="username"
required // Mark as required
color="source" // Default color is now 'source'
size="sm"
helperText="Enter your username." >
<TextField.Input placeholder="e.g. john_doe" />
</TextField.Root>
<button type="submit">Submit</button>
</form>
);
}
\`\`\`

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/text-react
Description: The `Text` component.
Latest version: 0.26.3

# @pittorica/text-react

The `Text` component.

## Installation

```bash
npm install @pittorica/text-react
```

## Usage

```jsx
import { Text } from '@pittorica/text-react';

function MyComponent() {
  return (
    <Text size="3" weight="bold" color="indigo">
      Hello World
    </Text>
  );
}
```

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/theme-react
Description: The `Theme` component.
Latest version: 0.26.3

# @pittorica/theme-react

The `Theme` component.

## Installation

```bash
npm install @pittorica/theme-react
```

## Usage

```jsx
import { Theme } from '@pittorica/theme-react';
// TODO: Add usage example
```

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/toast-react
Description: The `Toast` component.
Latest version: 0.26.3

# @pittorica/toast-react

The `Toast` component.

## Installation

```bash
npm install @pittorica/toast-react
```

## Usage

```jsx
import { toast, ToastProvider } from '@pittorica/toast-react';

function MyApp() {
  return (
    <>
      <ToastProvider />
      <button
        onClick={() =>
          toast({
            title: 'Success!',
            description: 'Action completed.',
            color: 'teal',
          })
        }
      >
        Show Toast
      </button>
    </>
  );
}
```

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.
npm package: @pittorica/tooltip-react
Description: The `Tooltip` component.
Latest version: 0.26.3

# @pittorica/tooltip-react

The `Tooltip` component.

## Installation

```bash
npm install @pittorica/tooltip-react
```

## Usage

```jsx
import { Tooltip } from '@pittorica/tooltip-react';
import { IconInfoCircle } from '@tabler/icons-react';

function MyComponent() {
  return (
    <Tooltip content="Informative message" side="top">
      <IconInfoCircle size={18} />
    </Tooltip>
  );
}
```

## License

This project is licensed under the MIT License.

**Copyright (c) 2025 Davide Di Criscito**

For the full details, see the [LICENSE](LICENSE) file.