Introduction

Mockline is a module that provides a set of Vue components and composables built with Tailwind CSS and Headless UI to help you build beautiful and accessible user interfaces.

Its goal is to provide everything related to UI when building a Nuxt app. This includes components, icons, colors, dark mode as well as keyboard shortcuts.

Features

• Built with Headless UI and Tailwind CSS
• HMR support through Nuxt App Config
• Dark mode support
• Support for LTR and RTL languages
• Keyboard shortcuts
• Bundled icons
• Fully typed
• Figma Kit

Reka UI

We use Reka UI as our core component foundation. This shift brings several key advantages:

• Extensive Component Library: With 55+ primitives, Reka UI significantly expands our component offerings.
• Active Development: Reka UI's growing popularity ensures ongoing improvements and updates.
• Enhanced Accessibility: Built-in accessibility features align with our commitment to inclusive design.
• Vue 3 Optimization: Seamless integration with Vue 3 and the Composition API.

This transition empowers Nuxt UI to become a more comprehensive and flexible UI library, offering developers greater power and customization options.

Tailwind CSS v4

Mockline integrates the latest Tailwind CSS v4, bringing significant improvements:

• Built for performance: Full builds in the new engine are up to 5x faster, and incremental builds are over 100x faster — and measured in microseconds.
• Unified toolchain: Built-in import handling, vendor prefixing, and syntax transforms, with no additional tooling required.
• CSS-first configuration: A reimagined developer experience where you customize and extend the framework directly in CSS instead of a JavaScript configuration file.
• Designed for the modern web: Built on native cascade layers, wide-gamut colors, and including first-class support for modern CSS features like container queries, @starting-style, popovers, and more.

Tailwind Variants

We've adopted Tailwind Variants to manage our design system, offering:

• Dynamic Styling: Flexible component variants with a powerful API
• Type Safety: Full TypeScript support with auto-completion
• Conflict Resolution: Efficient merging of conflicting styles

This integration unifies the styling of components, ensuring consistency and code maintainability.

TypeScript Integration

Mockline offers significantly improved TypeScript integration, providing a superior developer experience:

• Enhanced Auto-completion:
  • Full auto-completion for component props based on your theme
  • Intelligent suggestions for app.config.ts theme configuration
• Generic-based Components:
  • Built using Vue 3 Generics
  • Improved type inference for slots and events
• Type-safe Theming:
  • Leveraging Tailwind Variants for type-safe styling options
  • Customizable types for extended theme configurations

Vue compatibility

You can now use Mockline in any Vue project without Nuxt by adding the Vite and Vue plugins to your configuration. This provides:

• Auto-imports: Components and composables are automatically imported and available globally
• Theming System: Full theming support with customizable colors, sizes, variants and more
• Developer Experience: Complete TypeScript support with IntelliSense and auto-completion