npm package: @pagedotapp/page-ui
Description: The complete Page UI components bundle
Author: PageStudio
Latest version: 0.0.0-alpha.15

# @pagedotapp/page-ui

The complete Page UI components bundle

## Installation

```bash
npm install @pagedotapp/page-ui
```

## Included Components

This bundle includes the following components:

- @pagedotapp/page-avatar
- @pagedotapp/page-avatar-select
- @pagedotapp/page-banner
- @pagedotapp/page-banner-select
- @pagedotapp/page-bottom-sheet
- @pagedotapp/page-button
- @pagedotapp/page-card
- @pagedotapp/page-checkbox
- @pagedotapp/page-data-card
- @pagedotapp/page-db-read
- @pagedotapp/page-db-write
- @pagedotapp/page-dialog
- @pagedotapp/page-icon
- @pagedotapp/page-icon-button
- @pagedotapp/page-image
- @pagedotapp/page-input
- @pagedotapp/page-loader
- @pagedotapp/page-media-preview
- @pagedotapp/page-menu
- @pagedotapp/page-pay-button
- @pagedotapp/page-select
- @pagedotapp/page-sidebar
- @pagedotapp/page-switch
- @pagedotapp/page-tabs
- @pagedotapp/page-text
- @pagedotapp/page-textarea
- @pagedotapp/page-toast
- @pagedotapp/page-tooltip

## Usage

Import components from the bundle:

```tsx
import {
	PageButton,
	PageInput,
	PageCard,
	PageText,
	PageImage,
	// ... other components
} from "@pagedotapp/page-ui"

function App() {
	return (
		<PageCard>
			<PageImage src="/logo.png" alt="Logo" width={200} height={100} />
			<PageText as="h1" variant="primary">
				Welcome
			</PageText>
			<PageInput placeholder="Enter text..." />
			<PageButton variant="primary">Submit</PageButton>
		</PageCard>
	)
}
```

## Why Use This Bundle?

- **Single dependency**: Install once, use multiple components
- **Consistent versions**: All components work well together
- **Smaller install**: Shared dependencies are deduplicated
- **Tree-shakable**: Only the components you use are included in your application

## Individual Component Docs

For detailed documentation on each component, see their individual packages:

- [@pagedotapp/page-avatar](https://www.npmjs.com/package/@pagedotapp/page-avatar)
- [@pagedotapp/page-avatar-select](https://www.npmjs.com/package/@pagedotapp/page-avatar-select)
- [@pagedotapp/page-banner](https://www.npmjs.com/package/@pagedotapp/page-banner)
- [@pagedotapp/page-banner-select](https://www.npmjs.com/package/@pagedotapp/page-banner-select)
- [@pagedotapp/page-bottom-sheet](https://www.npmjs.com/package/@pagedotapp/page-bottom-sheet)
- [@pagedotapp/page-button](https://www.npmjs.com/package/@pagedotapp/page-button)
- [@pagedotapp/page-card](https://www.npmjs.com/package/@pagedotapp/page-card)
- [@pagedotapp/page-checkbox](https://www.npmjs.com/package/@pagedotapp/page-checkbox)
- [@pagedotapp/page-conversation](https://www.npmjs.com/package/@pagedotapp/page-conversation)
- [@pagedotapp/page-conversation-input](https://www.npmjs.com/package/@pagedotapp/page-conversation-input)
- [@pagedotapp/page-db-read](https://www.npmjs.com/package/@pagedotapp/page-db-read)
- [@pagedotapp/page-db-write](https://www.npmjs.com/package/@pagedotapp/page-db-write)
- [@pagedotapp/page-dialog](https://www.npmjs.com/package/@pagedotapp/page-dialog)
- [@pagedotapp/page-icon](https://www.npmjs.com/package/@pagedotapp/page-icon)
- [@pagedotapp/page-icon-button](https://www.npmjs.com/package/@pagedotapp/page-icon-button)
- [@pagedotapp/page-image](https://www.npmjs.com/package/@pagedotapp/page-image)
- [@pagedotapp/page-input](https://www.npmjs.com/package/@pagedotapp/page-input)
- [@pagedotapp/page-loader](https://www.npmjs.com/package/@pagedotapp/page-loader)
- [@pagedotapp/page-media-preview](https://www.npmjs.com/package/@pagedotapp/page-media-preview)
- [@pagedotapp/page-menu](https://www.npmjs.com/package/@pagedotapp/page-menu)
- [@pagedotapp/page-pay-button](https://www.npmjs.com/package/@pagedotapp/page-pay-button)
- [@pagedotapp/page-select](https://www.npmjs.com/package/@pagedotapp/page-select)
- [@pagedotapp/page-sidebar](https://www.npmjs.com/package/@pagedotapp/page-sidebar)
- [@pagedotapp/page-switch](https://www.npmjs.com/package/@pagedotapp/page-switch)
- [@pagedotapp/page-tabs](https://www.npmjs.com/package/@pagedotapp/page-tabs)
- [@pagedotapp/page-text](https://www.npmjs.com/package/@pagedotapp/page-text)
- [@pagedotapp/page-textarea](https://www.npmjs.com/package/@pagedotapp/page-textarea)
- [@pagedotapp/page-toast](https://www.npmjs.com/package/@pagedotapp/page-toast)
- [@pagedotapp/page-tooltip](https://www.npmjs.com/package/@pagedotapp/page-tooltip)

## License

MIT © PageStudio