Unlocked UI

Unlocked is a forward thinking, modern Tailwind based component library built for Vue 3.

We're currently solely maintained by Unlocked's creator Ryan Weston. Unlocked was built with the aim to help tackle issues presented by utilising component libraries, especially tackling the pain points you get when trying to transition your product into using a design system.

We follow the atomic design principles, providing base components within our component library, then providing copy and pastable molecules and organisms under the name 'compositions. These can be found at Unlocked compositions.

This is all with the aim to invert provide the ability for you be able to quickly scale up your product with customisable, premade components. All while providing utilities to invert control. Giving you the ability to easily change complex components without having to wrap them, preintergrated design tokens and a theming system that gives you complete control!

Unlocked is community driven and relies on feedback to help improve. 🎉

• Join our Discord
• Follow our Twitter

🚀 Features

• ⚡️ Treeshakable imports
• 🧱 Atomic interface components
• 🎨 Theming system
• 📚 Custom tokens
• 🦄 Easy integration with UI kit

📦 Getting started

For more complete documentation, please refer to our official documentation.

Installation

To install in your Vue application:

yarn add @unlocked/foundation

import { unlockedGlobal, defaultTheme } from '@unlocked/foundation'

app.use(unlocked, { 
 theme: defaultTheme
})

Usage

With global registration, your components don't need to be imported! If you want a modular apporach, please refer to our official documentation.

<UButton>Button</UButton>

Customisation

For more information on customisationa and managing your theme, please refer to our official documentation.

🔧 Development & maintenance

Commit style

Commit messages must conform to the to the conventional commits format.

type(scope?): subject  #scope is optional

Message types:

• chore
• feat
• fix
• refactor
• revert
• style
• test

Storybook

Please ensure that Storybook's static build has been tested before you push to master.

yarn build:storybook

npx http-server storybook-static

Release

When ready to release ensure you utilise the correct workflow.

yarn release

📄 License

MIT License © 2022-PRESENT Ryan Weston