open-index/open-npm huggingface dataset:
npm package: @morpheme/alert
Description: Morpheme Alert - a flexible Vue alert component that can be used to display various types of messages to the user.
Author: Warsono
Latest version: 1.0.1

# Morpheme Alert

Morpheme Alert - a flexible Vue alert component that can be used to display various types of messages to the user.

## Installation

Install with your prefered package manager.

With NPM:

```
npm i @morpheme/alert
```

With Yarn:

```
yarn add @morpheme/alert
```

With PNPM:

```
pnpm i @morpheme/alert
```

## Usage

To use the component, you can simply include it in your template like this:

```vue
<script setup lang="ts">
// import component
import VAlert from '@morpheme/alert';
// import styles (includes dark mode)
import '@morpheme/alert/dist/style.css';
// or import the SASS styles
import '@morpheme/alert/src/VAlert.scss';
// if are using SASS bundle and want to add dark mode support,
// uncomment this line
// import '@morpheme/alert/src/VAlert.dark.scss';
</script>

<template>
  <VAlert color="primary"> Hello World </VAlert>
</template>
```

## Documentation

View full documentation [here](https://gitsindonesia.github.io/ui-component/components/alert).

## License

MIT
npm package: @morpheme/app-bar
Description: Morpheme AppBar is a Vue component used to display content at the top of a page.
Author: Warsono
Latest version: 1.0.1

# Morpheme AppBar

Morpheme AppBar is a Vue component used to display content at the top of a page.

## Installation

Install with your prefered package manager.

With NPM:

```
npm i @morpheme/alert
```

With Yarn:

```
yarn add @morpheme/alert
```

With PNPM:

```
pnpm i @morpheme/alert
```

## Usage

To use the component, you can simply include it in your template like this:

```vue
<script setup lang="ts">
// import component
import AppBar from '@morpheme/app-bar';
// import styles
import '@morpheme/app-bar/dist/style.css';
</script>

<template>
  <AppBar> Hello World </AppBar>
</template>
```

## Documentation

View full documentation [here](https://gits-ui.web.app/?path=/story/components-app-bar--default).

## License

MIT
npm package: @morpheme/app-shell
Description: Morpheme Application Shell Component
Author: Warsono
Latest version: 1.0.1

# Morpheme AppShell

Morpheme Application Shell Component.

## Installation

npm

```
npm i @morpheme/app-shell
```

yarn

```
yarn add @morpheme/app-shell
```

pnpm

```
pnpm i @morpheme/app-shell
```

## Usage

```vue
<script setup lang="ts">
import VAppShell from '@morpheme/app-shell';
</script>

<template>
  <VAppShell>
    Content
  </VAppShell>
</template>
```

## Documentation

Check out storybook documentation [here](https://gits-ui.web.app/?path=/story/components-app-shell--default).

## License

MIT
npm package: @morpheme/autocomplete
Description: Morpheme Autocomplete
Author: Warsono
Latest version: 1.0.1

# Morpheme Autocomplete

Morpheme Autocomplete.

## Installation

npm

```bash
npm i @morpheme/autocomplete
```

yarn

```bash
yarn add @morpheme/autocomplete
```

pnpm

```bash
pnpm i @morpheme/autocomplete
```

## Usage

```html
<script setup lang="ts">
  import Autocomplete from '@morpheme/autocomplete';
  import {ref} from 'vue';

  const items = [
    {value: 1, text: 'Wade Cooper'},
    {value: 2, text: 'Arlene Mccoy'},
    {value: 3, text: 'Devon Webb'},
    {value: 4, text: 'Tom Cook'},
    {value: 5, text: 'Tanya Fox'},
    {value: 6, text: 'Hellen Schmidt'},
  ];

  const selected = ref();
</script>

<template>
  <Autocomplete v-model="selected" :items="items" />
</template>
```

## Documentation

View full documentation [here](https://gits-ui.web.app/?path=/story/components-autocomplete--default).

## License

MIT
npm package: @morpheme/avatar
Description: Morpheme Avatar
Author: Warsono
Latest version: 1.0.1

# Morpheme Avatar

Morpheme Avatar.

## Installation

npm

```
npm i @morpheme/avatar
```

yarn

```
yarn add @morpheme/avatar
```

pnpm

```
pnpm i @morpheme/avatar
```

## Usage

```vue
<script setup lang="ts">
// import component
import Avatar from '@morpheme/avatar';
// import style
import '@morpheme/avatar/dist/style.css';
</script>

<template>
  <Avatar color="primary" name="John Doe" />
  <Avatar color="primary" src="path-to-image.png" />
</template>
```

## Documentation

View full documentation [here](https://gits-ui.web.app/?path=/story/components-avatar--variants).

## License

MIT
npm package: @morpheme/badge
Description: Morpheme Badge
Author: Warsono
Latest version: 1.0.1

# Morpheme Badge

Morpheme Badge.

## Installation

npm

```
npm i @morpheme/badge
```

yarn

```
yarn add @morpheme/badge
```

pnpm

```
pnpm i @morpheme/badge
```

## Usage

```vue
<script setup lang="ts">
import Badge from '@morpheme/badge';
</script>

<template>
  <Badge color="primary"> Text </Badge>
</template>
```

## Documentation

View `Badge` documentation [here](https://gits-ui.web.app/?path=/story/components-badge--default).

## License

MIT
npm package: @morpheme/banner
Description: Morpheme Banner Component
Author: Warsono
Latest version: 1.0.1

# Morpheme Banner

Morpheme Banner Component.

## Installation

npm

```
npm i @morpheme/banner
```

yarn

```
yarn add @morpheme/banner
```

pnpm

```
pnpm i @morpheme/banner
```

## Usage

```vue
<script setup lang="ts">
import {VBanner, VBannerText} from '@morpheme/banner';
import VBtn from '@morpheme/button';
</script>

<template>
  <VBanner color="primary">
    <VBannerText>
      Welcome to the <span class="font-semibold">Morpheme</span> Design System
    </VBannerText>
    <template #actions="{close}">
      <VBtn text flush @click="close" class="!text-white" prefix-icon="ri:close-line" />
    </template>
  </VBanner>
</template>
```

## Documentation

Check out storybook documentation [here](https://gits-ui.web.app/?path=/story/components-banner--default).

## License

MIT
npm package: @morpheme/bottom-navigation
Description: Morpheme Bottom Navigation Component
Author: Warsono
Latest version: 1.0.1

# Morpheme Bottom Navigation

Morpheme Bottom Navigation Component.

## Installation

npm

```
npm i @morpheme/bottom-navigation
```

yarn

```
yarn add @morpheme/bottom-navigation
```

pnpm

```
pnpm i @morpheme/bottom-navigation
```

## Usage

```vue
<script setup lang="ts">
import {VBottomNavigation, VBottomNavigationItem} from '@morpheme/bottom-navigation';
</script>

<template>
  <VBottomNavigation>
    <VBottomNavigationItem icon="ri:home-line">
      Home
    </VBottomNavigationItem>
    <VBottomNavigationItem icon="ri:history-line">
      Recents
    </VBottomNavigationItem>
    <VBottomNavigationItem icon="ri:heart-line">
      Favorites
    </VBottomNavigationItem>
    <VBottomNavigationItem icon="ri:map-pin-2-line">
      Nearby
    </VBottomNavigationItem>
    <VBottomNavigationItem icon="ri:user-line">
      Account
    </VBottomNavigationItem>
  </VBottomNavigation>
</template>
```

## Documentation

Check out storybook documentation [here](https://gits-ui.web.app/?path=/story/components-bottom-navigation--default).

## License

MIT
npm package: @morpheme/bottom-sheet
Description: Morpheme Bottom Sheet Component
Author: Warsono
Latest version: 1.0.1

# Morpheme Bottom Sheet

Morpheme Bottom Sheet Component.

## Installation

npm

```
npm i @morpheme/bottom-sheet
```

yarn

```
yarn add @morpheme/bottom-sheet
```

pnpm

```
pnpm i @morpheme/bottom-sheet
```

## Basic Usage

```vue
<script setup lang="ts">
import {ref} from 'vue';
import {BottomSheet, BottomSheetBody} from '@morpheme/bottom-sheet';

const isOpen = ref(false);
</script>

<template>
  <button @click="isOpen = !isOpen">Open Bottom Sheet</button>
  <BottomSheet v-model="isOpen">
    <BottomSheetBody>Hello World!</BottomSheetBody>
  </BottomSheet>
</template>
```

## Documentation

View full documentation [here](https://gits-ui.web.app/?path=/story/components-bottom-sheet--default).

## License

MIT
npm package: @morpheme/breadcrumbs
Description: Morpheme Breadcrumbs Component
Author: Warsono
Latest version: 1.0.1

# Morpheme Breadcrumbs

Morpheme Breadcrumbs Component.

## Installation

npm

```
npm i @morpheme/breadcrumbs
```

yarn

```
yarn add @morpheme/breadcrumbs
```

pnpm

```
pnpm i @morpheme/breadcrumbs
```

## Usage

```vue
<script setup lang="ts">
import {ref} from 'vue';
import Breadcrumbs from '@morpheme/breadcrumbs';

const items = ref([
  {
    text: 'Home',
    to: '/',
  },
  {
    text: 'Users',
    to: '/users',
  },
]);
</script>

<template>
  <Breadcrumbs :items="items" />
</template>
```

## Documentation

View `Breadcrumbs` documentation [here](https://gits-ui.web.app/?path=/story/components-breadcrumbs--default).

## License

MIT
npm package: @morpheme/button
Description: Morpheme Button Component
Author: Warsono
Latest version: 1.0.1

# Morpheme Button Component

> Button Component

## Installation

via npm

```
npm i @morpheme/button
```

via yarn

```
yarn add @morpheme/button
```

via pnpm

```
pnpm i @morpheme/button
```

## Usage

```html
<script setup lang="ts">
  import Button from '@morpheme/button';
</script>

<button color="primary">Click Me</button>
```

## Documentation

View `Button` documentation [here](https://gits-ui.web.app/?path=/story/components-button--default).

## License

MIT
npm package: @morpheme/card
Description: Morpheme Card Component
Author: Warsono
Latest version: 1.0.1

# Morpheme Card

Morpheme Card Component.

## Installation

via npm

```
npm i @morpheme/card
```

via yarn

```
yarn add @morpheme/card
```

via pnpm

```
pnpm i @morpheme/card
```

## Usage

```vue
<script setup lang="ts">
import Card from '@morpheme/card';
</script>

<template>
  <Card title="Header">My Body</Card>
</template>
```

## Documentation

View `Card` documentation [here](https://gits-ui.web.app/?path=/story/components-card--default).

## License

MIT
npm package: @morpheme/collapsible
Description: Morpheme Collapsible Component
Author: Warsono
Latest version: 1.0.1

# Morpheme Collapsible

Morpheme Collapsible Component.

## Installation

npm

```
npm i @morpheme/collapsible
```

yarn

```
yarn add @morpheme/collapsible
```

pnpm

```
pnpm i @morpheme/collapsible
```

## Usage

```vue
<script setup lang="ts">
import {ref} from 'vue';
import Collapsible from '@morpheme/collapsible';

const isOpen = ref(false);
</script>

<template>
  <Collapsible v-model="isOpen">
    Anim eiusmod ea nostrud do incididunt consequat duis adipisicing
    reprehenderit nisi. Minim mollit eiusmod incididunt fugiat ipsum velit ut
    consequat est consectetur adipisicing. Nulla duis anim velit magna aute nisi
    elit nulla deserunt. Fugiat consequat ut magna eiusmod sit incididunt qui.
    Incididunt velit fugiat sunt sint amet magna est laborum excepteur. Aute
    aliqua nisi est nulla voluptate enim qui amet labore et consectetur. Est
    pariatur qui amet cupidatat magna est adipisicing quis ea ea.
  </Collapsible>
</template>
```

## Documentation

View `VCollapsible` documentation [here](https://gits-ui.web.app/?path=/story/components-collapsible--default).

## License

MIT
npm package: @morpheme/command
Description: Morpheme Command Menu Component
Author: Warsono
Latest version: 1.0.1

# Morpheme Command

Morpheme Command Palette Component.

## Installation

npm

```
npm i @morpheme/command
```

yarn

```
yarn add @morpheme/command
```

pnpm

```
pnpm i @morpheme/command
```

## Usage

```vue
<script setup lang="ts">
import {VCommand} from '@morpheme/command';
</script>

<template>
  <VCommand />
</template>
```

## Documentation

Check out storybook documentation [here](https://gits-ui.web.app/?path=/story/components-command--default).

## License

MIT
npm package: @morpheme/container
Description: Morpheme Container Component
Author: Warsono
Latest version: 1.0.0

# Morpheme Container

Morpheme Container Component.

## Installation

npm

```
npm i @morpheme/container
```

yarn

```
yarn add @morpheme/container
```

pnpm

```
pnpm i @morpheme/container
```

## Usage

```vue
<script setup lang="ts">
import Container from '@morpheme/container';
</script>

<template>
  <Container>Text</Container>
</template>
```

## Documentation

View `Container` documentation [here](https://gits-ui.web.app/?path=/story/components-container--default).

## License

MIT
npm package: @morpheme/divider
Description: Morpheme Divider Component
Author: Warsono
Latest version: 1.0.0

# Morpheme Divider

Morpheme Divider Component.

## Installation

npm

```
npm i @morpheme/divider
```

yarn

```
yarn add @morpheme/divider
```

pnpm

```
pnpm i @morpheme/divider
```

## Usage

```vue
<script setup lang="ts">
import VDivider from '@morpheme/divider';
</script>

<template>
  <VList>
    <VListItem>Jane</VListItem>
    <VDivider />
    <VListItem>Lily</VListItem>
    <VDivider inset />
    <VListItem>Mary</VListItem>
  </VList>
</template>
```

## Documentation

Check out storybook documentation [here](https://gits-ui.web.app/?path=/story/components-divider--default).

## License

MIT
npm package: @morpheme/dropdown
Description: Morpheme Dropdown Component
Author: Warsono
Latest version: 1.0.1

# Morpheme Dropdown

Morpheme Dropdown Component.

## Installation

npm

```
npm i @morpheme/dropdown
```

yarn

```
yarn add @morpheme/dropdown
```

pnpm

```
pnpm i @morpheme/dropdown
```

## Usage

```vue
<script setup lang="ts">
import Dropdown from '@morpheme/dropdown';
</script>

<template>
  <Dropdown />
</template>
```

## Documentation

View `Dropdown` documentation [here](https://gits-ui.web.app/?path=/story/components-dropdown--default).

## License

MIT
npm package: @morpheme/editor
Description: Morpheme Rich Text Editor Component
Author: Warsono
Latest version: 1.0.1

# Morpheme Editor

Rich Text Editor Based on Vue 3 CKEditor.

## Installation

via npm

```
npm i @morpheme/editor
```

via yarn

```
yarn add @morpheme/editor
```

via pnpm

```
pnpm i @morpheme/editor
```

## Usage

```vue
<script setup lang="ts">
import {ref} from 'vue';
import VEditor from '@morpheme/editor';
import '@morpheme/editor/dist/style.css';

const content = ref('');
</script>

<template>
  <VEditor v-model="content" />
</template>
```

## Documentation

View `Editor` documentation [here](https://gits-ui.web.app/?path=/story/components-editor--default).

## License

MIT
npm package: @morpheme/forms
Description: Morpheme Form Component
Author: Warsono
Latest version: 1.0.1

# Morpheme Forms

Morpheme Forms Component. 

## Installation

npm

```
npm i @morpheme/forms
```

yarn

```
yarn add @morpheme/forms
```

pnpm

```
pnpm i @morpheme/forms
```

## Usage

```vue
<script setup lang="ts">
import {Textarea} from '@morpheme/forms';
</script>

<template>
  <Textarea />
</template>
```

## Documentation

View `Form` documentation [here](https://gits-ui.web.app/?path=/story/components-forms--default).

## License

MIT
npm package: @morpheme/icon
Description: Morpheme Icon Component
Author: Warsono
Latest version: 1.0.1

# Morpheme Icon

Morpheme Icon Component.

## Installation

npm

```
npm i @morpheme/icon
```

yarn

```
yarn add @morpheme/icon
```

pnpm

```
pnpm i @morpheme/icon
```

## Usage

```vue
<script setup lang="ts">
import {Icon} from '@morpheme/icon';
</script>

<template>
  <Icon icon="ic:add" />
</template>
```

## Documentation

View full documentation [here](https://gits-ui.web.app/?path=/story/components-icon--default).

## License

MIT