open-index/open-npm huggingface dataset:
npm package: @kongponents/kalert
Description: Alert component
Author: Kong Inc
Latest version: 7.2.2

# @kongponents/kalert

[![](https://img.shields.io/npm/v/@kongponents/kalert.svg?style=flat-square)](https://www.npmjs.com/package/@kongponents/kalert)

```html
<KAlert isShowing alertMessage="howdy!" isDismissible />
```
npm package: @kongponents/kbadge
Description: Badges, pills, lozenges, or whatever you wanna call them.
Author: Kong Inc
Latest version: 7.2.2

# @kongponents/kbadge

[![](https://img.shields.io/npm/v/@kongponents/kbadge.svg?style=flat-square)](https://www.npmjs.com/package/@kongponents/kbadge)

```html
<KBadge appearance="success">SUCCESS</KBadge>
<KBadge appearance="warning">WARNING</KBadge>
<KBadge appearance="danger">DANGER</KBadge>
<KBadge color="var(--blue-200)" background-color="var(--blue-500)">👋🏻 Hello</KBadge>
```
npm package: @kongponents/kbutton
Description: Button component
Author: Kong Inc
Latest version: 7.2.2

# @kongponents/kbutton

[![](https://img.shields.io/npm/v/@kongponents/kbutton.svg?style=flat-square)](https://www.npmjs.com/package/@kongponents/kbutton)

```html
<KButton @click='alert("hey")' appearance='primary'>button</KButton>
```
npm package: @kongponents/kcard
Description: Card component
Author: Kong Inc
Latest version: 7.2.2

# @kongponents/kcard

[![](https://img.shields.io/npm/v/@kongponents/kcard.svg?style=flat-square)](https://www.npmjs.com/package/@kongponents/kcard)

```html
<KCard>
  <template #title>Title</template>
  <template #actions><a href="">Link</a></template>
  <template #body>
    <p style="margin: 0">Some kind of content can go here.</p>
  </template>
</KCard>
```
npm package: @kongponents/kcardcatalog
Description: A grid view of KCards
Author: Kong Inc
Latest version: 6.24.0

# @kongponents/kcardcatalog

[![](https://img.shields.io/npm/v/@kongponents/kcardcatalog.svg?style=flat-square)](https://www.npmjs.com/package/@kongponents/kcardcatalog)

```vue
<KCardCatalog :description="'hello world'">
  Hello from a slot
</KCardCatalog>
```
npm package: @kongponents/kcatalog
Description: A grid view of KCards
Author: Kong Inc
Latest version: 7.2.2

# @kongponents/kcatalog

[![](https://img.shields.io/npm/v/@kongponents/KCatalog.svg?style=flat-square)](https://www.npmjs.com/package/@kongponents/kcatalog)

```html
<KCatalog :description="'hello world'">
  Hello from a slot
</KCatalog>
```
npm package: @kongponents/kcheckbox
Description: Checkbox input component
Author: Kong Inc
Latest version: 7.2.2

# @kongponents/kcheckbox

[![](https://img.shields.io/npm/v/@kongponents/kcheckbox.svg?style=flat-square)](https://www.npmjs.com/package/@kongponents/kcheckbox)

```html
<template>
  <KCheckbox
    v-model="checked"
    @change="handleToggle" />
</template>
<script>
export default {
  data() {
    return {
      checked: false
    }
  },
  methods: {
    handleToggle(isChecked) {
      // do something, make api call?
    }
  }
}
</script>
```
npm package: @kongponents/kclipboardprovider
Description: Provide clipboard copy capabilities to any component
Author: Kong Inc
Latest version: 7.2.2

# @kongponents/kclipboardprovider

[![](https://img.shields.io/npm/v/@kongponents/kclipboardprovider.svg?style=flat-square)](https://www.npmjs.com/package/@kongponents/kclipboardprovider)

```html
<KClipboardProvider v-slot="{ copyToClipboard }">
  <button
    @click="() => copyToClipboard('copy me!')">
    copy to clipboard
  </button>
</KClipboardProvider>
```
npm package: @kongponents/kdatetimepicker
Description: DateTime Picker component
Author: Kong Inc
Latest version: 7.2.2

# @kongponents/kdatetimepicker

[![](https://img.shields.io/npm/v/@kongponents/kdropdownmenu.svg?style=flat-square)](https://www.npmjs.com/package/@kongponents/kdatetimepicker)

```html
<KDateTimePicker
  @change="handleChangeInParent()"
  defaultMessage="Please select a time range"
  :timePeriods="exampleTimeFrames"
  :defaultRelative="defaultRelativeTimeframe"
/>
```
npm package: @kongponents/kdropdownmenu
Description: Dropdown Menu component
Author: Kong Inc
Latest version: 7.2.2

# @kongponents/kdropdownmenu

[![](https://img.shields.io/npm/v/@kongponents/kdropdownmenu.svg?style=flat-square)](https://www.npmjs.com/package/@kongponents/kdropdownmenu)

```html
<KDropdownMenu :description="'hello world'">
  Hello from a slot
</KDropdownMenu>
```
npm package: @kongponents/kemptystate
Description: Empty state component
Author: Kong Inc
Latest version: 7.2.2

# @kongponents/kemptystate

[![](https://img.shields.io/npm/v/@kongponents/kemptystate.svg?style=flat-square)](https://www.npmjs.com/package/@kongponents/kemptystate)

```html
<KEmptyState cta-text="Do A Thing">
  <template #title>No Enabled Plugins</template>
  <template #message>To enable, click below.</template>
</KEmptyState>
```
npm package: @kongponents/kinlineedit
Description: Inline editable field.
Author: Kong Inc
Latest version: 7.2.2

# @kongponents/kinlineedit

[![](https://img.shields.io/npm/v/@kongponents/kinlineedit.svg?style=flat-square)](https://www.npmjs.com/package/@kongponents/kinlineedit)

```html
<template>
  <EditableInput @changed="val => textVal = val">
    <h1>{{ textVal }}</h1>
  </EditableInput>
</template>
<script>
import EditableInput from "@/components/EditableInput";
export default {
  name: "App",
  components: { EditableInput },
  data() {
    return {
      textVal: "Inline Text"
    };
  }
};
</script>
```
npm package: @kongponents/kinput
Description: Input component
Author: Kong Inc
Latest version: 7.2.2

# @kongponents/kinput

[![](https://img.shields.io/npm/v/@kongponents/kinput.svg?style=flat-square)](https://www.npmjs.com/package/@kongponents/kinput)

```html
<KInput type="text" placeholder="placeholder" />
```
npm package: @kongponents/kinputswitch
Description: KInputSwitch description here.
Author: Kong Inc
Latest version: 7.2.2

# @kongponents/kinputswitch

[![](https://img.shields.io/npm/v/@kongponents/kinputswitch.svg?style=flat-square)](https://www.npmjs.com/package/@kongponents/kinputswitch)

```html
<KInputSwitch
  v-model="checked"
  :label="checked ? 'on' : 'off'" />
```
npm package: @kongponents/klabel
Description: Form input label
Author: Kong Inc
Latest version: 7.2.2

# @kongponents/klabel

[![](https://img.shields.io/npm/v/@kongponents/klabel.svg?style=flat-square)](https://www.npmjs.com/package/@kongponents/klabel)

```html
<KLabel />
<KInput type="text" id="name" placeholder="Enter a Name" />
```
npm package: @kongponents/kmenu
Description: <Menu component>
Author: Kong Inc
Latest version: 7.2.2

# @kongponents/kmenu

[![](https://img.shields.io/npm/v/@kongponents/kmenu.svg?style=flat-square)](https://www.npmjs.com/package/@kongponents/kmenu)

```html
<KMenu :description="'hello world'">
  Hello from a slot
</KMenu>
```
npm package: @kongponents/kmodal
Description: Modal component
Author: Kong Inc
Latest version: 7.2.2

# @kongponents/kmodal

[![](https://img.shields.io/npm/v/@kongponents/kmodal.svg?style=flat-square)](https://www.npmjs.com/package/@kongponents/kmodal)


```html
<KToggle v-slot="{ isToggled, toggle }">
  <div>
    <KButton @click="toggle">
      Show Modal
    </KButton>
    <KModal
      :isVisible="isToggled"
      @proceed="toggle"
      @canceled="toggle" />
  </div>
</KToggle>
```
npm package: @kongponents/kmodalfullscreen
Description: A full screen Modal
Author: Kong Inc
Latest version: 7.2.2

# @kongponents/kmodalfullscreen

[![](https://img.shields.io/npm/v/@kongponents/kmodalfullscreen.svg?style=flat-square)](https://www.npmjs.com/package/@kongponents/kmodalfullscreen)

```html
<KModalFullscreen :description="'hello world'">
  Hello from a slot
</KModalFullscreen>
```
npm package: @kongponents/kmultiselect
Description: Multiselect dropdown component
Author: Kong Inc
Latest version: 7.2.2

# @kongponents/kmultiselect

[![](https://img.shields.io/npm/v/@kongponents/kmultiselect.svg?style=flat-square)](https://www.npmjs.com/package/@kongponents/kmultiselect)

```html
<KMultiselect
  toggle-text="Items"
  :items="[{label: 'one', selected: false}, {label: 'two', selected: false}, {label: 'three', selected: true }]"/>
```
npm package: @kongponents/komponent
Description: Expose reactive state to components.
Author: Kong Inc
Latest version: 7.2.2

# @kongponents/komponent

[![](https://img.shields.io/npm/v/@kongponents/komponent.svg?style=flat-square)](https://www.npmjs.com/package/@kongponents/komponent)

Expose reactive state to components.

```html
<Komponent :data="{ count: 0 }" v-slot="{ data }">
  <div>
    <KButton @click="data.count = data.count - 1">-</KButton>
    {{ data.count }}
    <KButton @click="data.count = data.count + 1">+</KButton>
  </div>
</Komponent>
```
npm package: @kongponents/kooltip
Description: A tooltip component
Author: Kong Inc
Latest version: 7.2.2

# @kongponents/kooltip

[![](https://img.shields.io/npm/v/@kongponents/kooltip.svg?style=flat-square)](https://www.npmjs.com/package/@kongponents/kooltip)

```html
<KoolTip :message="`hello world`">
  Hover over me to see tooltip
</KoolTip>
```
npm package: @kongponents/kpagination
Description: Pagination component
Author: Kong Inc
Latest version: 7.2.2

# @kongponents/kpagination

[![](https://img.shields.io/npm/v/@kongponents/kpagination.svg?style=flat-square)](https://www.npmjs.com/package/@kongponents/kpagination)

```html
<KPagination :description="'hello world'">
  Hello from a slot
</KPagination>
```
npm package: @kongponents/kpop
Description: A Popover component
Author: Kong Inc
Latest version: 7.2.2

# @kongponents/kpop

[![](https://img.shields.io/npm/v/@kongponents/kpop.svg?style=flat-square)](https://www.npmjs.com/package/@kongponents/kpop)

```js
const attributes = {
  width: 350,
  title: 'Cool Beans!'
  content: 'I have fantastic content!'
}

<KPop 
  :width="attributes.width"
  :title="attributes.title"
  :content="attributes.content"
>
  Click on me to see popover
</KPop>
```
npm package: @kongponents/kprompt
Description: A dialog that prompts a user to take an action
Author: Kong Inc
Latest version: 7.2.2



# @kongponents/kprompt

[![](https://img.shields.io/npm/v/@kongponents/kprompt.svg?style=flat-square)](https://www.npmjs.com/package/@kongponents/kprompt)

```html
<KPrompt :description="'hello world'">
  Hello from a slot
</KPrompt>
```
npm package: @kongponents/kradio
Description: Radio input component
Author: Kong Inc
Latest version: 7.2.2

# @kongponents/kradio

[![](https://img.shields.io/npm/v/@kongponents/kradio.svg?style=flat-square)](https://www.npmjs.com/package/@kongponents/kradio)

```html
<KRadio name="blue" :value="true" v-model="blue">Blue</KRadio>
<KRadio name="red" :value="true" v-model="red">Red</KRadio>
```
npm package: @kongponents/krumbs
Description: Breadcrumbs component
Author: Kong Inc
Latest version: 7.2.2

# @kongponents/krumbs

[![](https://img.shields.io/npm/v/@kongponents/krumbs.svg?style=flat-square)](https://www.npmjs.com/package/@kongponents/krumbs)

```html
<template>
  <Krumbs :items="routes" />
</template>

<script>
export default {
  data: function () {
    return {
      routes: [
        {
          key: 'root-services',
          to: { name: 'services', params: {}, path: '/services/' },
          title: 'Services',
          text: 'Services'
        },
        {
          key: 'docs',
          to: 'https://docs.konghq.com',
          title: 'Go to Kong Docs',
          text: 'External Link'
        }
      ]
    }
  }
}
</script>
```
npm package: @kongponents/ksegmentedcontrol
Description: Segmented Control component.
Author: Kong Inc
Latest version: 7.2.2

# @kongponents/ksegmentedcontrol

[![](https://img.shields.io/npm/v/@kongponents/ksegmentedcontrol.svg?style=flat-square)](https://www.npmjs.com/package/@kongponents/ksegmentedcontrol)

```html
<template>
<KSegmentedControl
    :options="['one','two']"
    :v-model="selected"
    @click="handleToggle"
/>
</template>

<script>
export default {
  data() {
    return {
      selected: 'one'
    }
  },
  methods: {
    handleToggle(selected) {
      this.selected = selected
      // do something, make api call?
    }
  }
}
</script>
```
npm package: @kongponents/kselect
Description: Dropdown/Select component
Author: Kong Inc
Latest version: 7.2.2

# @kongponents/KSelect

[![](https://img.shields.io/npm/v/@kongponents/KSelect.svg?style=flat-square)](https://www.npmjs.com/package/@kongponents/KSelect)

```html
<KSelect label="Pick Something:" :items="[{
    label: 'test',
    value: 'test'
  }, {
    label: 'Test 1',
    value: 'test1'
  }, {
    label: 'TEST 2',
    value: 'test2'
  }]"
/>
```
npm package: @kongponents/kskeleton
Description: Loading/Skeleton state component.
Author: Kong Inc
Latest version: 7.2.2

# @kongponents/kskeleton

[![](https://img.shields.io/npm/v/@kongponents/kskeleton.svg?style=flat-square)](https://www.npmjs.com/package/@kongponents/kskeleton)

```html
<KSkeleton type="form" />
```
npm package: @kongponents/kslideout
Description: KSlideout description here.
Author: Kong Inc
Latest version: 7.2.2

# @kongponents/kslideout

[![](https://img.shields.io/npm/v/@kongponents/kslideout.svg?style=flat-square)](https://www.npmjs.com/package/@kongponents/kslideout)

```html
<KSlideout
  :is-visible="isToggled"
  @close="toggle">
  <div>
    <p>Anim officia eiusmod duis est consequat nulla tempor ad non magna Lorem ullamco nostrud amet. Occaecat voluptate dolor enim eiusmod do qui nulla pariatur enim. Et elit elit consequat do do duis enim est ullamco id sunt sunt amet eiusmod. Do minim mollit irure ea sunt officia minim sint eiusmod enim amet. Quis exercitation in ullamco quis aliqua.</p>
  </div>
</KSlideout>
```
npm package: @kongponents/kstepper
Description: An ordered Stepper component
Author: Kong Inc
Latest version: 7.2.2

# @kongponents/kstepper

[![](https://img.shields.io/npm/v/@kongponents/kstepper.svg?style=flat-square)](https://www.npmjs.com/package/@kongponents/kstepper)

```html
<KStepper :description="'hello world'">
  Hello from a slot
</KStepper>
```
npm package: @kongponents/ktable
Description: Table component
Author: Kong Inc
Latest version: 7.2.2

# @kongponents/ktable

[![](https://img.shields.io/npm/v/@kongponents/ktable.svg?style=flat-square)](https://www.npmjs.com/package/@kongponents/ktable)

```js
const options = {
  headers: [
    { label: 'Name', key: 'name', sortable: true },
    { label: 'Type', key: 'type', sortable: true },
    { label: 'Credentials', key: 'credentials' },
    { label: '', key: 'actions', hideLabel: true }
  ],
  data: [
    {
      name: 'iOS App',
      type: 'Key',
      credentials: 'xyz'
    },
    {
      name: 'Website Desktop',
      type: 'Basic',
      credentials: '123xyz'
    },
    {
      name: 'Android App',
      type: 'JWT',
      credentials: '123xyz'
    }
  ]
}

<KTable :options=options :isStriped='true' :hasHover='true'>
  <template v-slot:actions="{row, rowKey, rowValue}"><a href="">Edit</a></template>
</KTable>
```
npm package: @kongponents/ktabs
Description: Tabs component.
Author: Kong Inc
Latest version: 7.2.2

# @kongponents/ktabs

[![](https://img.shields.io/npm/v/@kongponents/ktabs.svg?style=flat-square)](https://www.npmjs.com/package/@kongponents/ktabs)

```html
<template>
  <KTabs :tabs="tabs">
    <template v-slot:tab1>
      <span>Tab 1 content</span>
    </template>
    <template v-slot:tab2>
      <span>Tab 2 content</span>
    </template>
  </KTabs>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        {
          hash: '#tab1',
          title: 'tab1'
        },
        {
          hash: '#tab2',
          title: 'tab2
        }
      ]
    }
  }
}
</script>
```
npm package: @kongponents/ktest
Description: Testing 1, 2, 3, 4...
Author: Kong Inc
Latest version: 5.0.8

# @kongponents/ktest

[![](https://img.shields.io/npm/v/@kongponents/ktest.svg?style=flat-square)](https://www.npmjs.com/package/@kongponents/ktest)

⚠️ This package exists to test out our CI process (publishing, tagging, lerna,
etc.). It's useless otherwise.
npm package: @kongponents/ktextarea
Description: Text area component
Author: Kong Inc
Latest version: 7.2.2

# @kongponents/ktextarea

[![](https://img.shields.io/npm/v/@kongponents/ktextarea.svg?style=flat-square)](https://www.npmjs.com/package/@kongponents/ktextarea)

```html
<KTextArea :description="'hello world'">
  Hello from a slot
</KTextArea>
```
npm package: @kongponents/ktoaster
Description: Toaster component.
Author: Kong Inc
Latest version: 7.2.2

# @kongponents/ktoaster

[![](https://img.shields.io/npm/v/@kongponents/ktoaster.svg?style=flat-square)](https://www.npmjs.com/package/@kongponents/ktoaster)

```js
new Vue({
  data(){
    return {
      isVisible: false,
    }
  },
  methods: {
    showToaster() {
      this.isVisible = true;
    },
    closeToaster() {
      this.isVisible = false;
    }
  },
  template: `
    <div>
      <KButton appearance='primary' :isRounded='true' :handleClick="showToaster">Open Toaster</KButton>
      <KToaster :isVisible="isVisible" appearance='success' message="Hello! 👋🏼" @close="closeToaster" />
    </div>
  `
})
```
npm package: @kongponents/ktoggle
Description: Provide toggle functionality to components.
Author: Kong Inc
Latest version: 7.2.2

# @kongponents/ktoggle

[![](https://img.shields.io/npm/v/@kongponents/ktoggle.svg?style=flat-square)](https://www.npmjs.com/package/@kongponents/ktoggle)

Provide toggle functionality to components.

```html
<KToggle>
  <template v-slot:default="{isToggled, toggle}">
    <KButton @click="toggle">
      {{ isToggled ? 'toggled' : 'not toggled' }}
    </KButton>
  </template>
</KToggle>
```
npm package: @kongponents/kviewswitcher
Description: KViewSwitcher description here.
Author: Kong Inc
Latest version: 7.2.2

# @kongponents/kviewswitcher

[![](https://img.shields.io/npm/v/@kongponents/kviewswitcher.svg?style=flat-square)](https://www.npmjs.com/package/@kongponents/kviewswitcher)

```html
<KViewSwitcher :description="'hello world'">
  Hello from a slot
</KViewSwitcher>
```