A library of beautiful components with a focus on accessibility, as well as ease of use for developers and for users.
Accessibility is one of the most important things we can spend time improving. The web is for everyone, and making steps to ensure content is as accessible as possible helps everyone, not just those who need it most.
This library helps improve accessibility not just by implementing a set of standards into the components so that they're provided without effort from the developer, but the docs also help promote the mindset of accessibility, and some components even show visible errors if standards are not met—such as form fields requiring labels.
At the moment, components in the library are registered globally, so there is no need to manually import any of the components. To use the library, set it up in your main file, for example:
import { createApp } from "vue";
import App from "./App.vue";
import components from "@lewishowles/components";
const app = createApp(App);
app.use(components);
app.mount("#app");Since components are globally registered for now, you can simply use them directly anywhere in your app. For example:
<ui-button @click="doMagic">
🪄 Bibbidi-Bobbidi-Boo
</ui-button>You can find more information about each component on its relevant docs page.
Special scaffold scripts have been created to generate files for a new component (or icon). These can be found at support/scaffold-component.sh and support/scaffold-icon.sh.
There are a number of improvements and new components that could be made to improve flexibility.
- Devise a system to allow the definition of a "brand colour" and "dark brand colour" to override any defaults. Perhaps a stylesheet.
- Add notes about default recommended stylesheet.
- Data table - Providing built-in options for searching, sorting, pagination, filtering, and custom display of any data in a table.
- Form date - including calendar with quick access to months, years and relative dates.
- Checkbox group - A set of checkboxes with optional introductory text.