Top Sites>UI Thing | TailwindCSS Component Library for Nuxt | UI Thing

User-agent: *
Allow: /

# UI Thing | TailwindCSS Component Library for Nuxt

> UI Thing is a flexible and modern component library for Nuxt, offering reusable UI components styled with TailwindCSS and inspired by shadcn/ui. Simplify your development process with easy-to-integrate components and a powerful CLI tool.

## Documentation Sets

- [Complete Documentation for UI Thing](https://uithing.com/llms-full.txt): The complete documentation including all content

## API Endpoints

Documentation for all API endpoints

- [Get Components](/api/components): Retrieve a list of UI components. A search query parameter can be provided to filter components by name, value, or docsPath.
- [Get Component by Name](/api/components/{name}): Retrieve detailed information about a specific UI component by its name. The name parameter is required and should match the component's name or value. To get the list of available components, use the /api/components endpoint.
- [Get Prose](/api/prose): Retrieve a list of prose elements. A search query parameter can be provided to filter prose elements by name or value.
- [Get Prose by Name](/api/prose/{name}): Retrieve detailed information about a specific prose element by its name. The name parameter is required and should match the prose element's name or value. To get the list of available prose elements, use the /api/prose endpoint.
- [Get Blocks](/api/blocks): Retrieve a list of UI blocks. A search query parameter can be provided to filter blocks by name, fileName, category, or path.
- [Get Block by Name](/api/blocks/{name}): Retrieve detailed information about a specific UI block by its name. The name parameter is required and should match the block's name or fileName. To get the list of available blocks, use the /api/blocks endpoint.
- [Get Block Categories](/api/blocks/categories): Retrieve a list of unique block categories available in the system.
- [Get Blocks by Category](/api/blocks/categories/{name}): Retrieve a list of UI blocks that belong to a specific category. The name parameter is required and should match the desired block category. To get the list of available categories, use the /api/blocks/categories endpoint.

## Content

- [Introduction](https://uithing.com/raw/getting-started/introduction.md): A brief overview of UI Thing for Nuxt, its philosophy, and how it differs from traditional component libraries.
- [Setup](https://uithing.com/raw/getting-started/setup.md): Learn how to setup your Nuxt project with UI Thing.
- [CLI](https://uithing.com/raw/getting-started/cli.md): Learn how to use the cli that comes with this project.
- [Starters](https://uithing.com/raw/getting-started/starter.md): Quickly create a Nuxt project with one of the UI Thing starters below.
- [Shortcuts](https://uithing.com/raw/getting-started/shortcuts.md): Learn how to display and define keyboard shortcuts in your app.
- [MCP Server](https://uithing.com/raw/getting-started/mcp.md): Connect UI Thing to Codex, VS Code, and other MCP clients for scaffold-first access to components, blocks, prose, docs, and install plans.
- [Changelog](https://uithing.com/raw/getting-started/changelog.md): See what has changed recently in UI Thing.
- [Cards](https://uithing.com/raw/examples/cards.md): A set of different cards showing how you can use form elements in a real world application.
- [Dashboard](https://uithing.com/raw/examples/dashboard.md): A simple dashboard created with the components from the library. It shows how to use the components in a real application.
- [Landing Page](https://uithing.com/raw/examples/landing.md): A complete landing page example showcasing various UI Thing components including hero, features, testimonials, pricing, FAQ, and CTA sections.
- [Schema Visualizer](https://uithing.com/raw/examples/schema-visualizer.md): A schema visualizer created with Vue Flow. All credits go to the team over at Origin UI.
- [All Components](https://uithing.com/raw/components.md): Browse and search through all available UI Thing components. Find the perfect component for your next project.
- [Accordion](https://uithing.com/raw/components/accordion.md): A vertically stacked set of interactive headings that each reveal an associated section of content.
- [Alert](https://uithing.com/raw/components/alert.md): A visually emphasized message that informs the user of an event.
- [Alert Dialog](https://uithing.com/raw/components/alertdialog.md): A modal dialog that interrupts the user with important content and expects a response.
- [Animated Tooltip](https://uithing.com/raw/components/animatedtooltip.md): A group of animated tooltips that display on hover with smooth spring animations and dynamic positioning based on mouse movement.
- [Aspect Ratio](https://uithing.com/raw/components/aspectratio.md): Displays content within a desired ratio.
- [Autocomplete](https://uithing.com/raw/components/autocomplete.md): Choose from a list of suggested values with full keyboard support.
- [Avatar](https://uithing.com/raw/components/avatar.md): An image element with a fallback for representing the user.
- [Badge](https://uithing.com/raw/components/badge.md): A badge is a component that is used to highlight an item's status for quick recognition.
- [Badge Group](https://uithing.com/raw/components/badge-group.md): A pill-style badge group that pairs a labeled addon with a short message, available in light and modern themes with leading or trailing alignment.
- [BG Pattern - Circle](https://uithing.com/raw/components/bg-pattern-circle.md): A decorative concentric circle SVG pattern that fades outward - useful as a background embellishment for hero sections, cards, and empty states.
- [BG Pattern - Grid](https://uithing.com/raw/components/bg-pattern-grid.md): A decorative grid SVG pattern that fades outward — useful as a background embellishment for hero sections, cards, and empty states.
- [BG Pattern - Square](https://uithing.com/raw/components/bg-pattern-square.md): A decorative concentric rotated-square SVG pattern that fades outward — useful as a background embellishment for hero sections, cards, and empty states.
- [Breadcrumbs](https://uithing.com/raw/components/breadcrumbs.md): Breadcrumbs are a great way to show hierarchy in a page.
- [Button](https://uithing.com/raw/components/button.md): A button is a component that is used to trigger an action.
- [Button Group](https://uithing.com/raw/components/button-group.md): A container that groups related buttons together with consistent styling.
- [Calendar](https://uithing.com/raw/components/calendar.md): A calendar component allows you to display a calendar with events.
- [Card](https://uithing.com/raw/components/card.md): A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
- [Carousel](https://uithing.com/raw/components/carousel.md): A carousel with motion and swipe built using Embla.
- [Checkbox](https://uithing.com/raw/components/checkbox.md): A control that allows the user to toggle between checked and not checked.
- [Chip](https://uithing.com/raw/components/chip.md): A component used to display some sort of indicator on another component.
- [Collapsible](https://uithing.com/raw/components/collapsible.md): An interactive component which expands/collapses a panel.
- [Color Picker](https://uithing.com/raw/components/color-picker.md): A fully-featured color picker component with support for multiple color formats, alpha channel, and preset swatches.
- [Combobox](https://uithing.com/raw/components/combobox.md): Autocomplete input and command palette with a list of suggestions.
- [Command](https://uithing.com/raw/components/command.md): A command menu component composed of the Combobox primitives from Reka UI.
- [Container](https://uithing.com/raw/components/container.md): A container to wrap content in. It has a max-width and is centered by default.
- [Context Menu](https://uithing.com/raw/components/contextmenu.md): Displays a menu located at the pointer, triggered by a right-click or a long-press.
- [Credit Card](https://uithing.com/raw/components/creditcard.md): A visual credit card component with 13 style variants, optional scaling, and a card-network detection utility.
- [Currency Input](https://uithing.com/raw/components/currencyinput.md): Displays a form input field for currency values.
- [DataTable](https://uithing.com/raw/components/datatable.md): DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, built upon the foundations of progressive enhancement, that adds all of these advanced features to any HTML table.
- [Date Field](https://uithing.com/raw/components/datefield.md): Enables users to input specific dates within a designated field.
- [Datepicker](https://uithing.com/raw/components/datepicker.md): Allows the user to select a date from a calendar.
- [Description List](https://uithing.com/raw/components/description-list.md): A description list is typically used to display pairs of terms and details, like in invoices or product specifications, enhancing clarity and organization of information.
- [Dialog](https://uithing.com/raw/components/dialog.md): A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
- [Divider](https://uithing.com/raw/components/divider.md): A horizontal line to separate content. Similiar to the Seperator component, but with items in the middle.
- [Draggable](https://uithing.com/raw/components/draggable.md): A wrapper component around Vue Draggable that makes any list of items sortable via drag and drop.
- [Drawer](https://uithing.com/raw/components/drawer.md): A drawer component that can be used as a Dialog replacement on tablet and mobile devices.
- [Dropdown Menu](https://uithing.com/raw/components/dropdownmenu.md): Displays a menu to the user—such as a set of actions or functions—triggered by a button.
- [Dropfile](https://uithing.com/raw/components/dropfile.md): Allows users to drag and drop files into the browser to upload them.
- [Editable](https://uithing.com/raw/components/editable.md): Displays an input field used for editing a single line of text, rendering as static text on load. It transforms into a text input field when the edit interaction is triggered.
- [Empty](https://uithing.com/raw/components/empty.md): A component used to display a message when there is no data to show.
- [Fancy Icon](https://uithing.com/raw/components/fancyicon.md): An icon with a nice background color.
- [Field](https://uithing.com/raw/components/field.md): Combine labels, controls, and help text to compose accessible form fields and grouped inputs.
- [Flip Clock](https://uithing.com/raw/components/flip-clock.md): Animated split-flap clock that supports live time and countdown modes.
- [Floating Dock](https://uithing.com/raw/components/floating-dock.md): A responsive floating dock with a magnified desktop hover state and an expandable mobile menu.
- [Form](https://uithing.com/raw/components/form.md): Building forms with VeeValidate and Zod.
- [Gradient Divider](https://uithing.com/raw/components/gradeint-divider.md): A divider that has a gradient background
- [Heading](https://uithing.com/raw/components/heading.md): Displays a semantic heading with multiple levels of size and style customization.
- [Hover Card](https://uithing.com/raw/components/hovercard.md): For sighted users to preview content available behind a link.
- [Icon](https://uithing.com/raw/components/icon.md): A versatile icon component that supports Iconify icons, emojis, and custom images with automatic detection.
- [Iframe (Lazy)](https://uithing.com/raw/components/iframelazy.md): A lazy-loaded iframe component that loads content only when it comes into view, with customizable placeholder and intersection options.
- [Input](https://uithing.com/raw/components/input.md): Displays a form input field or a component that looks like an input field.
- [Input Group](https://uithing.com/raw/components/input-group.md): Display additional information or actions to an input or textarea.
- [Item](https://uithing.com/raw/components/item.md): A versatile component that you can use to display any content.
- [Keyboard Key](https://uithing.com/raw/components/keyboardkey.md): The <kbd> HTML element represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device.
- [Label](https://uithing.com/raw/components/label.md): Renders an accessible label associated with controls.
- [List](https://uithing.com/raw/components/list.md): Lists are used to group together related pieces of information so they are clearly associated with each other and easy to read.
- [Listbox](https://uithing.com/raw/components/listbox.md): A control that allows the user to toggle between checked and not checked from a list of options.
- [Loader](https://uithing.com/raw/components/loader.md): A loader indicates an unknown wait time or process duration, keeping users informed and enhancing their experience by providing visual feedback during delays.
- [Menubar](https://uithing.com/raw/components/menubar.md): A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
- [Nav](https://uithing.com/raw/components/nav.md): A horizontal navigation bar for primary site links, branding, and interactive elements.
- [Navbar](https://uithing.com/raw/components/navbar.md): A navbar to use in your app. It is rendered as a header element by default but can be changed to a div with the as props.
- [Navigation Menu](https://uithing.com/raw/components/navigationmenu.md): A collection of links for navigating websites.
- [Number Field](https://uithing.com/raw/components/number-field.md): A number field allows a user to enter a number and increment or decrement the value using stepper buttons.
- [Pagination](https://uithing.com/raw/components/pagination.md): Displays data in paged format and provides navigation between pages.
- [Pin Input](https://uithing.com/raw/components/pininput.md): A sequence of one-character alphanumeric inputs. Useful for PIN codes, verification codes, etc.
- [Placeholder](https://uithing.com/raw/components/placeholder.md): A placeholder box that can be used as any filler content.
- [Pointer Highlight](https://uithing.com/raw/components/pointer-highlight.md): Draw attention to any element with an animated rectangle and pointer reveal.
- [Popover](https://uithing.com/raw/components/popover.md): Displays rich content in a portal, triggered by a button.
- [Progress](https://uithing.com/raw/components/progress.md): Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
- [QR Code](https://uithing.com/raw/components/qrcode.md): A component for generating and displaying QR codes with customizable styling and frame handles.
- [Radio Group](https://uithing.com/raw/components/radiogroup.md): A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
- [Rating](https://uithing.com/raw/components/rating.md): A component for displaying and selecting star ratings.
- [Scroll Area](https://uithing.com/raw/components/scrollarea.md): Augments native scroll functionality for custom, cross-browser styling.
- [Scrollspy](https://uithing.com/raw/components/scrollspy.md): A component for tracking scroll position and updating active links.
- [Select](https://uithing.com/raw/components/select.md): Displays a list of options for the user to pick from—triggered by a button.
- [Select - Native](https://uithing.com/raw/components/select-native.md): Display a dropdown list of options for users to choose from.
- [Separator](https://uithing.com/raw/components/separator.md): Visually or semantically separates content.
- [Sheet](https://uithing.com/raw/components/sheet.md): Extends the Dialog component to display content that complements the main content of the screen.
- [Sidebar](https://uithing.com/raw/components/sidebar.md): A composable, themeable and customizable sidebar component.
- [Skeleton](https://uithing.com/raw/components/skeleton.md): Use to show a placeholder while content is loading.
- [Slider](https://uithing.com/raw/components/slider.md): An input where the user selects a value from within a given range.
- [Sonner](https://uithing.com/raw/components/sonner.md): Sonner is an opinionated toast component for Vue. It's customizable, but styled by default. Comes with a swipe to dismiss animation.
- [Splitter](https://uithing.com/raw/components/splitter.md): A component that divides your layout into resizable sections.
- [Stepper](https://uithing.com/raw/components/stepper.md): A set of steps that are used to indicate progress through a multi-step process.
- [Switch](https://uithing.com/raw/components/switch.md): A control that allows the user to toggle between checked and not checked.
- [Table](https://uithing.com/raw/components/table.md): A responsive table component.
- [Tabs](https://uithing.com/raw/components/tabs.md): A set of layered sections of content—known as tab panels—that are displayed one at a time.
- [Tags Input](https://uithing.com/raw/components/tagsinput.md): Tag inputs render tags inside an input, followed by an actual text input.
- [Tanstack Table](https://uithing.com/raw/components/tanstacktable.md): A powerful datatable for your app built with TanStack Table.
- [Textarea](https://uithing.com/raw/components/textarea.md): Displays a form textarea or a component that looks like a textarea.
- [Timeline](https://uithing.com/raw/components/timeline.md): A timeline component to display a series of events in chronological order.
- [Toggle](https://uithing.com/raw/components/toggle.md): A two-state button that can be either on or off.
- [Toggle Group](https://uithing.com/raw/components/togglegroup.md): A set of two-state buttons that can be toggled on or off.
- [Tooltip](https://uithing.com/raw/components/tooltip.md): A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
- [Tree](https://uithing.com/raw/components/tree.md): A tree view widget displays a hierarchical list of items that can be expanded or collapsed to show or hide their child items, such as in a file system navigator.
- [Border Beam](https://uithing.com/raw/goodies/border-beam.md): An animated beam of light which travels along the border of its container.
- [Confetti](https://uithing.com/raw/goodies/confetti.md): Display some confetti effect in your nuxt app.
- [File Upload](https://uithing.com/raw/goodies/file-upload.md): Components used to allow users to upload files to your application.
- [Full Calendar](https://uithing.com/raw/goodies/full-calendar.md): Display a full calendar in your nuxt app.
- [Gooey Menu](https://uithing.com/raw/goodies/gooey-menu.md): Display a gooey menu that expands to display a list of items.
- [Meteors](https://uithing.com/raw/goodies/meteors.md): Shower your UI with meteors.... For whatever reason you want to do that.
- [Neon Gradient Card](https://uithing.com/raw/goodies/neon-gradient-card.md): A beautiful neon card effect
- [Quill](https://uithing.com/raw/goodies/quill.md): Allow users to create rich text content with the Quill editor.
- [Retro Grid](https://uithing.com/raw/goodies/retro-grid.md): Display an animated scrolling grid of retro squares.
- [Terminal](https://uithing.com/raw/goodies/terminal.md): An implementation of the MacOS terminal. Useful for showcasing a command line interface.
- [Tiptap](https://uithing.com/raw/goodies/tip-tap.md): Tiptap is an open source headless content editor and real-time collaboration framework to craft exactly the content experience you’d like to have – built for developers.
- [Vue Tippy](https://uithing.com/raw/goodies/vue-tippy.md): VueTippy is a Vue 3 wrapper for the Tippy.js library, which allows you to use the tooltips as a Vue component and as a directive.
- [V-Wave](https://uithing.com/raw/goodies/vwave.md): The material-ripple directive for Vue that actually works!
- [Forms Introduction](https://uithing.com/raw/forms.md): Check out the form elements that are created with the help of Vee-Validate to easily add validation to your Nuxt app.
- [Form Builder](https://uithing.com/raw/forms/form-builder.md): Quickly create a form from an array of objects.
- [VeeVueFormSlider](https://uithing.com/raw/forms/vee-vueformslider.md): Displays a slider for the user to pick a value from.
- [VeeCheckbox](https://uithing.com/raw/forms/veecheckbox.md): A checkbox component that uses the composition API provided by Vee-Validate to perform validation.
- [Checkbox - Native](https://uithing.com/raw/forms/veecheckbox-native.md): The native checkbox allows you to do regular checkbox stuff like binding to an array of values.
- [VeeCurrencyInput](https://uithing.com/raw/forms/veecurrencyinput.md): A currency input component that uses the composition API provided by Vee-Validate to perform validation.
- [VeeDateField](https://uithing.com/raw/forms/veedatefield.md): A Date Field component that uses the composition API provided by Vee-Validate to perform validation.
- [VeeDatepicker](https://uithing.com/raw/forms/veedatepicker.md): An input component that allows the user to select a date.
- [VeeFileInput](https://uithing.com/raw/forms/veefileinput.md): An input component that allows the user to upload files to your application.
- [VeeInput](https://uithing.com/raw/forms/veeinput.md): An input component that uses the composition API provided by Vee-Validate to perform validation.
- [VeeMultiSelect](https://uithing.com/raw/forms/veemultiselect.md): Displays a list of options for the user to pick from.
- [VeeNumberField](https://uithing.com/raw/forms/veenumberfield.md): An number field component that uses the composition API provided by Vee-Validate to perform validation.
- [VeePinInput](https://uithing.com/raw/forms/veepininput.md): A Pin Input component that uses the composition API provided by Vee-Validate to perform validation.
- [VeeRadioGroup](https://uithing.com/raw/forms/veeradiogroup.md): Radio group component that uses the composition API provided by Vee-Validate to perform validation.
- [VeeSelect](https://uithing.com/raw/forms/veeselect.md): A select component that uses the composition API provided by Vee-Validate to perform validation.
- [VeeSwitch](https://uithing.com/raw/forms/veeswitch.md): A switch component that uses the composition API provided by Vee-Validate to perform validation.
- [VeeTagsInput](https://uithing.com/raw/forms/veetagsinput.md): An tags input component that uses the composition API provided by Vee-Validate to perform validation.
- [VeeTextarea](https://uithing.com/raw/forms/veetextarea.md): An textarea component that uses the composition API provided by Vee-Validate to perform validation.
- [ApexCharts](https://uithing.com/raw/apex-charts.md): A modern charting library that helps developers to create beautiful and interactive visualizations for web pages
- [Area](https://uithing.com/raw/apex-charts/area.md): Area charts are used to represent quantitative data visually, showing the magnitude of change over time.
- [Bar](https://uithing.com/raw/apex-charts/bar.md): Bar charts are used to compare different categories of data.
- [Candlestick](https://uithing.com/raw/apex-charts/candle-stick.md): Candlestick charts are used to display the high, low, open, and close values of a financial instrument over time.
- [Funnel](https://uithing.com/raw/apex-charts/funnel.md): Funnel charts are ideal for visualizing progressive stages in a linear process—typically where there's drop-off at each stage. They're perfect for showing conversion or attrition.
- [Heatmap](https://uithing.com/raw/apex-charts/heatmap.md): Heatmaps are used to visualize data through variations in color, making it easy to see patterns and correlations in large datasets.
- [Line](https://uithing.com/raw/apex-charts/line.md): Line charts are used to display data points over a continuous time period, showing trends and changes.
- [Pie / Donut](https://uithing.com/raw/apex-charts/pie-donut.md): Pie and Donut charts are used to represent data in a circular format, showing the proportion of each category relative to the whole.
- [Polar Area](https://uithing.com/raw/apex-charts/polar-area.md): Polar area charts are used to display multivariate data in a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point.
- [Radar](https://uithing.com/raw/apex-charts/radar.md): Radar charts are used to display multivariate data in a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point.
- [Radial](https://uithing.com/raw/apex-charts/radial.md): Radial charts are used to display multivariate data in a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point.
- [Slope](https://uithing.com/raw/apex-charts/slope.md): Slope charts are used to compare two or more data points across different categories, showing the change in value over time or between two variables.
- [Treemaps](https://uithing.com/raw/apex-charts/treemaps.md): Treemaps are used to visualize hierarchical data using nested rectangles, where the size and color of each rectangle represent different attributes of the data.
- [About](https://uithing.com/raw/blocks/about.md): On this page you will find different ways to create compelling About Us sections for your website.
- [App - Empty State](https://uithing.com/raw/blocks/app-empty-state.md): On this page you will ways to style the empty state in your application.
- [App - Header](https://uithing.com/raw/blocks/app-header.md): Header blocks for dashboard pages showcasing different layouts and information hierarchies for admin interfaces.
- [App - Sidebar](https://uithing.com/raw/blocks/app-sidebar.md): Sidebar navigation blocks for application dashboards with various layouts and interaction patterns.
- [App - Stats](https://uithing.com/raw/blocks/app-stats.md): On this page you will ways to style the stat cards in your app.
- [Banner](https://uithing.com/raw/blocks/banner.md): Eye-catching banner components for announcements, promotions, and important messages with smooth animations.
- [Blog - Page](https://uithing.com/raw/blocks/blog-page.md): Complete blog page layouts with animated headers, featured posts, and responsive article grids for showcasing content collections.
- [Blog Post - Card](https://uithing.com/raw/blocks/blog-post-card.md): Beautifully animated blog post card components with various layouts and hover effects for showcasing articles.
- [Blog - Section](https://uithing.com/raw/blocks/blog-section.md): Beautifully designed blog section components with various layouts and animation styles for showcasing content collections.
- [Blog - Subscribe](https://uithing.com/raw/blocks/blog-subscribe.md): Beautiful newsletter subscription cards for blogs with smooth animations and engaging designs.
- [Career](https://uithing.com/raw/blocks/career.md): Professional career section components with job listings, department filtering, and elegant animations for recruitment pages.
- [Contact - Header](https://uithing.com/raw/blocks/contact-header.md): Professional contact page sections with forms, maps, team info, and FAQ components. Features animated entrances, support team displays, location showcases, and department-based routing for effective customer communication.
- [Call To Action (CTA)](https://uithing.com/raw/blocks/cta.md): Compelling call-to-action sections with animated entrances, testimonials, and conversion-focused designs. Features newsletter signups, app downloads, feature showcases, and testimonial carousels to drive user engagement.
- [Dashboards](https://uithing.com/raw/blocks/dashboards.md): Dashboard blocks for analytics, reporting, and order management interfaces.
- [Error](https://uithing.com/raw/blocks/error.md): On this page you will find different ways in which you can styles your Error page.
- [FAQs](https://uithing.com/raw/blocks/faq.md): Comprehensive FAQ section components with multiple layouts including grids, accordions, cards, and search functionality for help centers and support pages.
- [Features](https://uithing.com/raw/blocks/features.md): Comprehensive feature section components with multiple layouts, animations, and styles. Features can also be used as service sections for showcasing offerings, capabilities, and benefits.
- [Footer](https://uithing.com/raw/blocks/footer.md): Footer components for websites with various layouts and styles. From simple single-line footers to comprehensive multi-section layouts with navigation, social links, and newsletter subscriptions.
- [Forgot & Reset Password](https://uithing.com/raw/blocks/forgot-reset-password.md): Password recovery and reset components including email input, success confirmation, password reset, OTP verification, and two-step authentication. Features centered layouts, card designs, split-screen layouts, and clear user feedback.
- [Header Section](https://uithing.com/raw/blocks/header-section.md): Page header and hero section components featuring headlines, titles, descriptions, and call-to-action elements. Includes centered and left-aligned layouts with various interactive elements like buttons, tabs, email inputs, and search fields.
- [Hero](https://uithing.com/raw/blocks/hero.md): Hero section components for landing pages featuring headlines, CTAs, images, videos, and form inputs. Includes split layouts, centered designs, background patterns, and smooth animations using Motion-v.
- [Login](https://uithing.com/raw/blocks/login.md): Professional login page examples with various layouts and authentication options. Features simple forms, social logins, card designs, split layouts, and more.
- [Metric](https://uithing.com/raw/blocks/metric.md): Showcase your key statistics and metrics with professional layouts. Features various grid patterns, card designs, icon integrations, and visual styles to highlight important numbers.
- [Navigation (Header)](https://uithing.com/raw/blocks/navigation.md): Professional navigation header examples with responsive layouts, mega menus, and mobile support. Features dropdown menus, categorized links, blog showcases, and sheet-based mobile navigation.
- [Newsletter](https://uithing.com/raw/blocks/newsletter.md): Newsletter subscription blocks featuring email signup forms, privacy notices, and promotional content. Includes split layouts, centered designs, card variations, and form fields with Motion-v animations.
- [Pricing](https://uithing.com/raw/blocks/pricing.md): Professional pricing section examples with various layouts and feature comparisons. Includes card designs, billing toggles, feature tables, and popular plan highlights.
- [Sidebar](https://uithing.com/raw/blocks/sidebar.md): Comprehensive sidebar navigation examples ported from shadcn-ui. Features collapsible sections, submenus, dropdowns, file trees, calendars, and various layout options for application interfaces.
- [Sign Up](https://uithing.com/raw/blocks/sign-up.md): Professional sign up page examples with various layouts and features. Includes password strength meters, social authentication, split layouts, and background patterns.
- [Social Proof](https://uithing.com/raw/blocks/social-proof.md): Social proof and testimonial components featuring company logos, customer reviews, ratings, and trust indicators. Includes animated logo grids, testimonial cards, statistics, and scrolling marquees using Motion-v animations.
- [Team](https://uithing.com/raw/blocks/team.md): Team member showcase components featuring avatars, bios, roles, and social links. Includes grid layouts, card designs, department sections, and statistics with Motion-v animations.
- [Testimony](https://uithing.com/raw/blocks/testimony.md): Customer testimonial section examples with various layouts. Features carousel sliders, grid layouts, company logos, ratings, and customer quotes to build trust and credibility.
- [Tiptap Editor](https://uithing.com/raw/blocks/tip-tap.md): Rich text editor blocks built with Tiptap featuring formatting toolbars, content editing, and grouped icon buttons. Perfect for blog posts, comments, documentation, and any content creation needs.
- [Callout](https://uithing.com/raw/prose/callout.md): Display important information with icons and variants for different message types.
- [Card](https://uithing.com/raw/prose/card.md): Display content in elegant cards with animated border beam effects, perfect for features, navigation, and content highlights.
- [Code Collapse](https://uithing.com/raw/prose/code-collapse.md): A collapsible code block wrapper, perfect for showing long code examples without overwhelming your documentation.
- [Code Group](https://uithing.com/raw/prose/code-group.md): Display multiple code snippets in a tabbed interface with automatic language detection, custom icons, and sync support across groups.
- [Code Snippet](https://uithing.com/raw/prose/code-snippet.md): Dynamically import and display code from your project files or external URLs without duplicating content in your documentation.
- [Code Tree](https://uithing.com/raw/prose/code-tree.md): Display a hierarchical file structure with expandable folders and file preview, perfect for showcasing project structures and code organization.
- [Collapsible](https://uithing.com/raw/prose/collapsible.md): Hide and reveal content with a collapsible component featuring customizable icons and labels.
- [Field & Field Group](https://uithing.com/raw/prose/field.md): Display component props or configuration options in a beautiful, readable format instead of traditional tables.
- [Icon List](https://uithing.com/raw/prose/icon-list.md): Display lists with custom icons and variants for each item.
- [Images](https://uithing.com/raw/prose/images.md): How to use images in your content with zoom and styling options.
- [Mermaid Diagrams](https://uithing.com/raw/prose/mermaid.md): Render interactive diagrams and flowcharts using Mermaid syntax with automatic theme detection and lazy loading.
- [Package Manager](https://uithing.com/raw/prose/package-manager.md): Display commands for multiple package managers with automatic syncing and switching.
- [Steps](https://uithing.com/raw/prose/steps.md): Display numbered sequential steps with auto-incrementing counters, perfect for tutorials, installation guides, and multi-step processes.
- [Tabs](https://uithing.com/raw/prose/tabs.md): The Tabs component from the Prose collection allows you to create tabbed interfaces in your content.
- [Typography](https://uithing.com/raw/prose/typography.md): Explore the various typography styles and components available in the design system.