About Inkline

Inkline is the intuitive UI Components library that gives you the foundation for building high quality, accessible, and customizable Vue.js Design Systems.

Inkline provides a great User Interface, User Experience, and Developer Experience, emphasizing a consistent and expressive API. It has been designed for creating flawless, unique experiences.

Inkline is officially maintained by Alex Grozav and the wonderful community members who are dedicated to building and supporting the system.

In October 2019, Inkline was awarded as a finalist for the Vue.js London 2019 Open Source Awards, for the Developer Experience category.

Getting started

The only prerequisite for using Inkline is having a basic understanding of Vue.js. If you are new to Vue.js, the best way to learn is reading through the Official Vue.js Documentation.

Finally, make sure to go through the Documentation Homepage and discover everything Inkline has to offer.

Core Values

When developing Inkline, our top priority was to create a UI Library that delivers an exceptional User Experience (UX) through an intuitive and appealing User Interface (UI), and efficient Development Experience (DX).

User Interface (UI)

Using Inkline means you will get a great looking, reliable and flawless responsive website:

  • Design - Components are be designed correctly and look objectively good. The design is minimal to offer a good base for customization.
  • Responsiveness - Components look great on any screen size, ranging from phones and tablets to laptops and desktops.
  • Customization - Components are customizable using color variants, design modifiers, and CSS Variables. All of Inkline's CSS Variables are inter-connected and propagate throughout the whole design system where applicable, providing you with a beautiful, consistent, and configurable design.
User Experience (UX)

A web application created with Inkline will be natural and intuitive to use. The User Experience is great, out of the box:

  • Functionality - Components are working as expected. Custom form components have at least the same functionality as a native browser input.
  • Visual Feedback - Components provide hover, focus, active, disabled and readonly states whenever needed.
  • Micro-interactions - Components provide the right visual feedback with micro-interactions wherever possible. Animations are non-intrusive and appropriate.
  • Accessibility - Components are accessible and provide the correct aria-properties for their respective states. Components are usable when navigating with a keyboard as well.
Developer Experience (DX)

Last but not least, Inkline code should be a pleasure to write. This is something that most UI Libraries overlook, but it is as important as UI and UX.

  • Code Design - Code is well written, using Composition API. It uses the best practices and provides integrations with existing tools. The code is linted and follows a good style guide. It also promotes code reuse.
  • Documentation - Great and easy to follow documentation with lots of examples. We know you love copy-pasting.
  • Consistency - Components are natural and intuitive to use. Components have consistent property names and class names.
  • Performance - Webpack introduced the concept of Tree shaking, where any code that remains unused will not be included in the final release bundle. Inkline fully takes advantage of it.
  • Testing - The UI Library is well tested. Inkline proudly features Unit tests and integration tests with close to 100% code coverage.
  • Completely Typed - Inkline is written entirely in TypeScript and provides first-class TypeScript support.