import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Quanta/Introduction" />


# Quanta components

`@plone/components` is a core package of Plone's modular frontend packages story.
The purpose of this package is to provide an agnostic set of baseline components to build Plone sites upon.
It has both a set of components that are agnostic to any framework and a specific implementation using the Quanta design system.
The Quanta components implementation use the [Tailwind](https://tailwindcss.com/) CSS framework.

This section primarily focuses on Quanta components part of the package and how to use them.

## Usage

You can use your choice of package manager (npm, yarn, or pnpm) to install the package in your app.
If you add the components to Seven add-ons, use pnpm, as shown.
You cannot use the components in Volto add-ons, as the Volto build cannot handle Tailwind.

```shell
pnpm add @plone/components
```

Whenever you want to use the components, all are exported as named exports:

```ts
import { TextField } from '@plone/components/quanta';

const MyComponent = (props) => {
  return (
    <>
      <TextField label="Username" />
    </>;
  )
}

export default MyComponent;
```

## Styling

The Quanta components are styled using the Tailwind CSS utility-first framework.
This means that the components are styled using utility classes, which are applied directly to the components.

### CSS layers

This package uses CSS layers to style the components to handle overrides and customizations in a more convenient way.
Tailwind 4 already leverages CSS layers to provide a way to customize the components.
This package extend the Tailwind defined layers:
```
@layer theme, base, components, plone-components, utilities, custom;
```

It introduces the `plone-components` layer to scope the components' styles included in this package.
It also provides a final `custom` layer to allow customizations and overrides.

If you develop in this monorepo by running `make install` in the root directory, the necessary configuration will be automatically generated for you in your `.vscode/settings.json` file.