# Vyriy Preset Library

Reusable React component library for library applications.

Published: 2026-06-04
Tags: vyriy, preset, library, cli
Source: https://vyriy.dev/examples/vyriy-preset-library/

---

# Vyriy Preset - Library

Reusable React component library for library applications.

This repository is a Yarn workspace with shared package tooling, Storybook documentation, and Jest tests.

## Create this example

```bash
npm create vyriy@latest
```

Choose the `library` preset.

## Packages

### `@library/components`

React components exported from `packages/components`.

```tsx
import { Button } from '@library/components';
```

The package currently includes:

| Component | Description                                             |
| --------- | ------------------------------------------------------- |
| `Button`  | Styled HTML button with primary and secondary variants. |

## Development

Install dependencies:

```bash
yarn install
```

Run Storybook:

```bash
yarn storybook
```

Run the full validation suite:

```bash
yarn check
```

Focused commands are also available:

```bash
yarn lint
yarn build
yarn test
```

## Documentation

Storybook renders the package documentation from the repository README files:

- `README.md` for the library overview.
- `packages/components/README.md` for the components package.
- `packages/components/button/README.md` for Button usage and props.

## Project Guidance

These articles describe the development approach behind this preset and provide practical guidance for evolving a project on top of it:

- [Calm Development Environment: Node.js, Corepack, Yarn and Static Preview](https://vyriy.dev/blog/calm-development-setup/) - how to keep the local development environment predictable and easy to reproduce.
- [Calm App Structure for the Vyriy Ecosystem](https://vyriy.dev/blog/vyriy-calm-app-structure/) - a practical project structure for Vyriy applications: shared configs, small packages, thin workspaces, Storybook docs, tests, and deployable entry points.
- [Calm Component Structure](https://vyriy.dev/blog/calm-component-structure/) - how to organize component code, tests, stories, and public exports.
- [Storybook as Project Documentation](https://vyriy.dev/blog/storybook-as-project-documentation/) - how to use Storybook as living project documentation and a component playground.