DOCSEARCHbyAlgolia
Submit Docs

UI Thing

repository·v2·Indexed 20 days ago

https://github.com/baybreezy/ui-thing

A modern set of Nuxt components built with Reka UI and TailwindCSS, inspired by shadcn/ui. It features a CLI-driven workflow for adding components and themes, as well as an installable agent skill for component authoring, MCP integration, and React/shadcn-to-UI-Thing conversion.

Tokens
264.6K
Snippets
886
Records
1.1K
Agent score
65%

What's inside ui-thing

  1. Overview of UI Thing

    v2

    UI Thing is a Nuxt-first, shadcn-inspired component system designed for Vue 3, Nuxt 4, Reka UI, Tailwind CSS v4, tailwind-variants, and Nuxt Content.

    Unlike traditional packaged libraries, UI Thing uses a copy-paste model where the source files are part of your project. This allows for direct editing of components, demos, docs, registries, and APIs. It is designed to be managed via the ui-thing CLI.

  4. Bubble component features and capabilities

    v2

    The UiBubble component provides several advanced features for building chat UIs:

    • Visual Variants: Seven visual variants ranging from strong primary bubbles to unframed ghost content.
    • Alignment: Supports both start and end alignment for sender and receiver bubbles.
    • Reactions: UiBubbleReactions anchors to the bubble edge with configurable side and alignment.
    • Sizing: Bubbles automatically size to their content, up to 80% of the container width.
    • Polymorphism: Supports the as or as-child props for rendering links or buttons as bubbles.
    • Extensibility: Every part renders through Primitive, meaning as / as-child and standard Vue class overrides work on any part of the component.

  5. Explore About Us block components

    v2

    The ui-thing library provides a variety of pre-built 'About Us' layout components for building company profiles, team showcases, and mission statements. These components can be used as standalone blocks or integrated into larger pages.

    Available block types include:

    • Layouts: Simple Centered, Two Column, Split Content, Full Page.
    • Team Showcases: Team Grid, Leadership Team, Meet the Founders, Team Carousel (requires Nuxt Swiper).
    • Storytelling: Story Timeline, Journey Map, Split Content.
    • Company Identity: Mission Vision, Values Grid, Culture & Values, Stats Highlight, Awards & Recognition.
    • Social Proof: Testimonials.
    • Utility/Contact: Image Gallery, Office Locations, FAQ About, Contact Integrated.

  6. Available Newsletter Block Styles

    v2

    The Newsletter collection provides several pre-built UI blocks for email subscription forms, privacy notices, and promotional content. These blocks utilize Motion-v for animations and support various layouts including split designs, centered cards, and multi-field forms.

    Available Styles:

    • Style One: Split layout with a large image and email signup form. Includes heading, description, email input, subscribe button, and privacy notice.
    • Style Two: Horizontal layout with a simple heading and inline form (email input and subscribe button).
    • Style Three: Centered signup featuring a badge and staggered fade-in animations.
    • Style Four: Card-based design with split content, decorative icons (check marks, shields), and subscriber count badges. Uses slide-in animations.
    • Style Five: Multi-field form with a grid background. Includes fields for first name, last name, and email, plus a checkbox for terms acceptance.
    • Style Six: Featured block showcasing benefits and statistics (e.g., weekly digest, instant updates) using icon cards and staggered animations.
    • Style Seven: Premium card design with social proof elements like subscriber counts, ratings, and security badges, featuring a bordered card design and fade-in animations.

  7. Explore Sidebar navigation patterns

    v2

    The ui-thing library provides a comprehensive collection of sidebar navigation patterns ported from shadcn-ui. These components are designed for application interfaces and support various layouts, interaction models, and nested structures.

    Key patterns available include:

    • Standard Navigation: Simple grouped sections with labels and dividers, or sidebars with submenus.
    • Collapsible Layouts: Sidebars that collapse to icons to save space, or sidebars with collapsible nested sections and submenus.
    • Specialized Containers: Sidebars rendered within a popover (ideal for mobile), a dialog (for full-screen overlays), or as a floating panel.
    • Advanced UI Integration: Sidebars containing a collapsible file tree, a calendar for date selection, or an inset panel for secondary navigation.
    • Layout Variations: Standard left-aligned sidebars, right-aligned sidebars, and multi-level inset sidebars.

  8. Available Dashboard Block Styles

    v2

    The Dashboards collection provides various pre-built dashboard blocks for analytics, reporting, and management interfaces. Each style is a Vue component that can be integrated into your application.

    Common use cases include:

    • Analytics & Revenue: KPI cards, sales charts (line, bar, area, mixed), and revenue tracking.
    • User & Customer Management: Paginated tables (using tanstack-table), user stats, and management sheets (add/edit).
    • Traffic & Membership: MRR charts, member statistics, and traffic analytics with sparklines.
    • Financial & Banking: Transaction tables, budget sections, radial account charts, and fund transfer forms.
    • Vendor & Organization: Security dashboards, radar charts, and vendor management with ratings.

    To use a specific style, locate the corresponding component (e.g., BlockDashboards1) and its source file in /components/content/Block/Dashboards/.

  9. The uithing skill capabilities

    v2

    The uithing skill provides an agent with the following capabilities:

    • UI Thing CLI usage: Interacting with the command line interface.
    • Component authoring: Creating and managing UI components.
    • Docs/generator workflows: Managing documentation and generation processes.
    • MCP usage: Model Context Protocol integration.
    • React/shadcn-to-UI-Thing conversion: Converting existing React or shadcn components into UI Thing compatible formats.

  11. Theme Selection and Token Usage

    v2

    UI Thing uses a token-based system for theming.

    • Tokens: Always prefer semantic theme tokens over raw Tailwind colors.
    • Mechanism: Theme selection is handled through theme-* classes and CSS variables.
    • Extending Themes: If you need to implement a new theme, follow the existing UI Thing theme flow rather than creating new, standalone theme files from scratch.

  12. Configure Line Chart curve styles

    v2

    The stroke.curve property in the ApexOptions object determines the visual style of the line. Supported values include:

    • straight: A standard linear connection between points.
    • smooth: A curved line (often using spline interpolation).
    • stepline: A step-like line that changes value only at data points.
    • monotoneCubic: A smooth curve that avoids overshooting (useful for avoiding extreme peaks/valleys).