UI Thing

Changelog

See what has changed recently in UI Thing.

October 31, 2025

New Field Components

Added new interactive field components to enhance user input experiences:

  • DocsFieldHear - A hearing-style interactive field component
  • DocsFieldNotionPrompt - Notion-style prompt field with mentions and context

Home Page Refactor

Refactored the home page layout and added new HomeCards components for improved visual presentation.

Utilities

Added no-scrollbar utility class for improved user experience on scrollable elements.

October 20, 2025

Prose Components

Added a comprehensive collection of prose components for enhanced content rendering and documentation:

Typography Components

  • ProseH1-H6 - Heading components with anchor link support and customizable styles
  • ProseP - Paragraph component with customizable classes
  • ProseLead - Lead paragraph component for introductory text
  • ProseStrong - Strong text rendering component
  • ProseEm - Emphasized text component
  • ProseBlockquote - Styled blockquote component
  • ProseA - Customizable anchor links with styling
  • ProseHr - Horizontal rule component

List Components

  • ProseUl, ProseOl, ProseLi - List components with customizable styles
  • ProseIconList - Lists with icons and multiple variants

Table Components

  • Added complete table prose components for documentation tables

Code Components

  • ProseCodeGroup - Tabbed interface for multiple code snippets
  • ProseCodeSnippet - Dynamic code imports with syntax highlighting
  • ProsePre - Enhanced code blocks with file name display and meta parsing
  • ProseCodeTree - Interactive file navigation component
  • Code collapse functionality
  • Copy button for code blocks

Documentation Components

  • ProseField & ProseFieldGroup - Enhanced documentation for component props
  • ProseCallout - Callout component with various styles and variants
  • ProseCard - Card component with animated border effects
  • ProseCollapsible - Collapsible content with customizable icons
  • ProseTabs - Tabbed content for documentation
  • ProseImage - Custom image with zoom functionality
  • ProseColorModeImage - Adaptive images for light/dark modes
  • ProseSmartIcon - Smart icon component

Package Manager Components

  • ProsePmInstall - Package installation commands
  • ProsePmRun - Package manager script execution
  • ProsePmX - Package manager command execution
  • Added usePm composable for package manager integration

Typography Documentation

Added comprehensive typography documentation showcasing all prose components and their usage.

October 30, 2025

New Block Components

Expanded the blocks section with multiple new component categories:

Testimonial Blocks

Added 8 new testimonial block variations featuring:

  • Carousel sliders with auto-rotation
  • Grid layouts with customer avatars
  • Star ratings and company logos
  • Masonry/Pinterest-style layouts

Sign Up Blocks

Added 4 new sign up page designs:

  • Two-column layouts with feature showcases
  • Password confirmation fields
  • Social authentication options
  • Compact and minimal card designs

Pricing Blocks

Added 4 new pricing section layouts:

  • Interactive annual/monthly toggles
  • Feature comparison grids
  • Popular plan badges
  • Four-tier pricing with custom options

Login Blocks

Added 4 new login page designs:

  • Two-column layouts with security messages
  • Minimal card designs with icon headers
  • Social-first authentication layouts
  • Compact designs with terms notices

Metric Blocks

Added 6 new metric display styles:

  • Icon-based compact layouts
  • Card-based designs with badges
  • Two-column contextual sections
  • Business metrics with growth indicators

Newsletter Blocks

Created 5 new newsletter signup blocks:

  • Centered layouts with badges
  • Card-based split designs
  • Multi-field forms with checkboxes
  • Feature showcase grids

Documentation Updates

Enhanced documentation across multiple sections:

  • Updated sidebar documentation with detailed descriptions
  • Improved navigation documentation
  • Enhanced header section documentation with style descriptions

Component Updates

  • Tiptap Editor: Added new Tiptap editor block with toolbar and formatting options
  • Nav Component: Removed client-only wrapper for better performance
  • Animated Tooltip: Added new component with mouse tracking and animations

October 27, 2025

New Block Components

Password Recovery & Reset

Implemented password recovery and reset components with enhanced layouts and validation.

Footer Components

Enhanced footer components with multiple layouts and styles.

Feature Blocks

Added multiple feature blocks with animations and responsive design.

FAQ Components

Enhanced FAQ components with multiple layouts and animations.

Error Pages

Added custom error pages (404, 500, etc.) with animations and helpful suggestions.

CTA Components

Enhanced call-to-action components with animations and new styles.

Infrastructure

  • Added Dockerfile for building and running the application
  • Updated to Nuxt v4.2

September 4, 2023

UI Thing V2 Launch 🚀

Launched version 2 of UI Thing with a complete rebuild featuring:

  • Modern component architecture
  • Enhanced documentation
  • Improved developer experience
  • New component library built on Reka UI
  • Update to Tailwind CSS v4
  • Comprehensive examples and blocks

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.

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.