@vue-material/core/README.md

Yet another 'Material Design Components' library for Vue3.

<div align="center">

<a href="https://sle.okyle.xyz"><img src="https://raw.githubusercontent.com/obillekyle/components/main/assets/logo.png" alt="@vue-material/core" title="See in action" width="80"></a>

# MD Components

### Bootleg Material Components.

Recreated the [Material Design Components](https://github.com/material-components/material-components-web) for Vue3.

![GitHub Repo stars](https://img.shields.io/github/stars/obillekyle/components)
![GitHub License](https://img.shields.io/github/license/obillekyle/components)\
![Version](https://img.shields.io/npm/v/@vue-material/core?label=Version&color=orange&logo=npm)
![MinZip Size](https://badgen.net/bundlephobia/minzip/@vue-material/core)\
![Tree Shaking](https://badgen.net/bundlephobia/tree-shaking/@vue-material/core)
![SSR](https://img.shields.io/badge/SSR-supported-'')

</div>

## Notes

> [!CAUTION]  
> This package is still in Alpha development and updates may contain breaking changes.
> Please report any bugs [here](https://github.com/obillekyle/components/issues).

> [!IMPORTANT]
> If you previously installed @okyle/components, please remove it before installing this package.

## Screenshots

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/obillekyle/components/alpha/assets/preview-dark.png">
  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/obillekyle/components/alpha/assets/preview.png">
  <img alt="Preview" src="https://raw.githubusercontent.com/obillekyle/components/alpha/assets/preview.png">
</picture>

## Docs

- [**Home**](https://vue-mdc.okyle.xyz)
- [**Getting Started**](https://vue-mdc.okyle.xyz/docs/getting-started)
- [**Components**](https://vue-mdc.okyle.xyz/core)
- [**Utils**](https://vue-mdc.okyle.xyz/utils)

## Install

```bash
# NPM
npm install @vue-material/core

# Yarn
yarn add @vue-material/core

# PNPM
pnpm add @vue-material/core

# BUN
bun install @vue-material/core
```
## Contents

### Components

Total components: 42

- [AppBar](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/components/AppBar)
- [Box](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/components/Box)
- [Button](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/components/Button)
- [Card](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/components/Card)
- [Chip](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/components/Chip)
- [Divider](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/components/Divider)
- [Flex](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/components/Box/Flex)
- [Form](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/components/Form)
- [Image](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/components/Image)
- [Frame](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/components/Frame)
- [Input](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/components/Input)
- [Layout](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/components/Layout)
- [List](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/components/List)
- [Misc](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/components/Misc)
- [Modal](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/components/Modal)
- [Navigation](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/components/Navigation)
- [Paper](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/components/Paper)
- [Progress](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/components/Progress)
- [Select](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/components/Select)
- [Sheet](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/components/Sheet)
- [Skeleton](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/components/Skeleton)
- [Slider](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/components/Slider)
- [Snackbar](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/components/Snackbar)
- [Switch](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/components/Switch)
- [Text](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/components/Text)
- [ThemeProvider](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/components/ThemeProvider)
- [Toast](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/components/Toast)

### Custom Refs / Hooks

Total custom refs (not including component specific hooks): 11


- [customRef](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/ref/custom-ref)
- [fnRef](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/ref/fn-ref)
- [use-drag](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/hooks/use-drag)
- [use-focus-lock](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/hooks/use-focus-lock)
- [use-form-value](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/hooks/use-form-value)
- [use-key-event](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/hooks/use-key-event)
- [use-local-storage](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/ref/use-local-storage)
- [use-preferred-theme](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/hooks/use-preferred-theme)
- [use-rect](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/hooks/use-rect)
- [use-toggle](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/hooks/use-toggle)
- [use-tooltip](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/hooks/use-tooltip)
- [use-window-rect](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/hooks/use-window-rect)

### Utils

- [color-engine](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/utils/color-engine)
- [colors](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/utils/colors)
- [component-manager](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/utils/component-manager)
- [css](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/utils/css)
- [create-style](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/utils/create-style)
- [dom](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/utils/dom)
- [event](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/utils/event)
- [function](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/utils/function)
- [number](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/utils/number)
- [object](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/utils/object)
- [other](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/utils/other)
- [string](https://github.com/obillekyle/components/tree/alpha/packages/lib/src/utils/string)