Changelog

In this update the Breadcrumbs component got a little update. You can now pass a slot in the array of items & customize what is displayed in that slot.

<template>
  <UiBreadcrumbs :items="items" class="justify-center">
    <template #select>
      <UiSelect default-value="s1">
        <UiSelectTrigger class="h-9 w-36" />
        <UiSelectContent>
          <UiSelectItem value="s1">Orion</UiSelectItem>
          <UiSelectItem value="s2">Sigma</UiSelectItem>
          <UiSelectItem value="s3">Dorado</UiSelectItem>
        </UiSelectContent>
      </UiSelect>
    </template>
  </UiBreadcrumbs>
</template>

<script lang="ts" setup>
  import type { Crumbs } from "~/components/Ui/Breadcrumbs.vue";

  const items: Crumbs[] = [{ label: "Databases" }, { slot: "select" }];
</script>

You can try it out by running

npx ui-thing@latest add breadcrumbs

Pagination

The Pagination component got a little update too. For the core components, only an additional import statement was added from the Vue Use library.

Some nice examples were copied over from the Origin UI library.

You can try it out by running

npx ui-thing@latest add pagination

December 21, 2024 - Carousel

In this update, the Carousel component was added.

Thanks to the Shadcn Vue team for doing the heavy lifting.

You can try it out by running

npx ui-thing@latest add carousel

December 17, 2024 - Alert

In this update, the Alert component was updated.

Some cool examples were added from the Origin UI library.

To update just run this command in your project

npx ui-thing@latest add alert

Vue Tippy

The Goodies section was updated with the Vue Tippy package.

You can create cool tooltips with it. The Tooltip component still works so now you have two options to choose from 🎉.

December 15, 2024 - Sliders Sliders Sliders

In this update, the Slider component was updated to accommodate vertical orientation.

While adding some examples from the Origin UI library, I noticed that the Slider component was missing the necessary classes that would make it work in a vertical orientation.

Vertical Slider

You can check out all the awesome examples here: Sliders.

Checkboxes?

I also add some examples of checkboxes from the Origin UI library. You can check them out here: Checkboxes.

December 11, 2024 - More Examples & Refactor

Refactor

In this update, I made some minor fixes to some components that were using className instead of class.

Some of the code examples were also updated:

Button Examples

I added more button examples to the Button page. Shoutout to the Origin UI team for providing these examples 🙏.

Dialogs

Some dialog examples were added to the Dialog page. These examples are taken from the Origin UI library as well. I hope to add some more examples soon.

December 1, 2024 - VueForm Slider

Let me start by giving credit to the VueForm Slider creators ❤️.

In this release, I added the VeeVueFormSlider component to the forms section.

Yes, there is an existing Slider component provided here. The problem with this component is that the v-model directive returns an array. ALWAYS! This is coming from the implementation provided by Radix-Vue.

Based on the issue raised here #38, I decided to create a new slider component that returns a single value. This is the VeeVueFormSlider component.

The cool thing is that this one has built in support for vee-validate 🙂.

You can try it out by running

npx ui-thing@latest add vee-vue-form-slider

In this release, the Sidebar component was added to the components section.

Thanks to this issue here #32, I saw that shadcn-ui added a Sidebar component to their library.

The guys at shadcn-vue had already created a port of this, so I used most of that code to create the Sidebar component.

Thanks to all the great devs that made this component possible ❤️.

As for the Placeholder component, this one was taken from the guys at Nuxt UI 🙏.

If you want to copy and paste some Sidebar blocks, you can check out the Sidebar Blocks page.

The examples are taken from the shadcn-ui library 🙂.

November 14, 2024 - Input Examples

In this update, a tonne of Input examples were added to the Vee Input page.

Thanks to the maintainers of the Origin UI library for providing these examples 🙏.

Check them out & let me know what you think.

The Password Strength example is really cool 😎.

October 31, 2024 - Button Styles

In this release, I added a few button styles to the Button page.

The examples are taken from Enhanced Button ❤️.

Check them out & let me know what you think.

Shortcuts

Learn how to display and define keyboard shortcuts in your app.

Cards

A set of different cards showing how you can use form elements in a real world application.