Changelog
See what has changed recently in UI Thing.
February 27, 2025
Timeline
In this update, the Timeline component was added.
You can add it by running
npx ui-thing@latest add timeline
February 9, 2025
Progress
In this update, the Progress component was updated.
There was an issue with how the transform value was being calculated.
You can update it by running
npx ui-thing@latest add progress
Description List
The Description List component was added.
You can try it out by running
npx ui-thing@latest add description-list
Native Checkbox
The Native Checkbox component was added.
It was added because of some array issues I had with the Checkbox from Radix Vue.
You can try it out by running
npx ui-thing@latest add vee-native-checkbox
February 7, 2025
Loader
In this update, I added the Loader component.
It was recommended in this issue.
You can try it out by running
npx ui-thing@latest add loader
February 2, 2025
Form Builder
In this update, I added the Form Builder component.
I stumbled across an example in the Vee Validate docs and thought it would be nice to have something like this at hand.
You can try it out by running
npx ui-thing@latest add vee-form-builder
January 15, 2025
Tabs
Im this update, I added some examples for the Tabs component.
The examples are taken from the Origin UI library.
Thanks to the team over there for all the great free examples ❤️.
You can run this command to add the updated tabs component to your project
npx ui-thing@latest add tabs
January 15, 2025
Datatables
Im this update, I added some examples for the Datatables component.
The examples are taken from the Origin UI library.
Thanks to the team over there for all the great free examples ❤️.
You can run this command to add the updated table component to your project
npx ui-thing@latest add datatable
January 14, 2025
Table
Im this update, I added some examples for the Table component.
The examples are taken from the Origin UI library.
Thanks to the team over there for all the great free examples ❤️.
You can run this command to add the updated table component to your project
npx ui-thing@latest add table
December 28, 2024
Avatar
Im this update, I added some examples for the Avatar component.
The examples are taken from the Origin UI library.
Thanks to the team over there for all the great free examples ❤️.
December 27, 2024
Input & Textarea
In this update, the Input and Textarea components were updated.
A new pattern & maxlength props was added to them both. Thanks to arshx86.
You can try them out by running
npx ui-thing@latest add input textarea
December 23, 2024
Breadcrumbs & Pagination
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 { BreadcrumbItem } from "~/components/Ui/Breadcrumbs.vue";
const items: BreadcrumbItem[] = [{ 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
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 Reka UI.
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
November 20, 2024
Sidebar & Placeholder
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 🙏.
Sidebar Blocks
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.