Welcome to Devlos UI, the ultimate solution for developers seeking clean, customizable, and high-performance UI components. Whether you're building the next big thing or refining an existing project, Devlos UI provides the tools to craft exceptional user experiences.
- A curated selection: Start with a powerful component that delivers value out of the box. More to come!
- Plug-and-play: Simplify development with components that integrate seamlessly into your project.
- Optimize your builds: Import only the features you need. No excess baggage, just lean, efficient code.
- Built for TypeScript: Enjoy a type-safe experience with complete TypeScript support and full TS documentation.
- Customization at your fingertips: Tailor components to meet your design needs, including built-in styling options.
- See it in action: Comprehensive documentation includes interactive demos to test components before using them.
- Speed up development: Eliminate the time-consuming process of creating components from scratch.
- Maintainable codebase: Fully typed and documented components ensure clarity and maintainability.
- Future-proof your projects: Designed with scalability and flexibility in mind.
Devlos UI is a collection of components based on Tailwind CSS. We assume you are already familiar with the basic ideas of Tailwind CSS before you continue.
Start by creating a new Vue project using vite:
npm create vite@latestInstall tailwindcss and its peer dependencies, then generate your tailwind.config.js and postcss.config.js files:
npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -pAdd this import header in your main css file, src/index.css in our case:
@tailwind base;
@tailwind components;
@tailwind utilities;
/* ... */Configure the tailwind template paths in tailwind.config.js:
/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [],
};npm i devlos-ui@latestYou can now start adding components to your project.
Use the import statement to import any components needed.
import { DragSelect } from "devlos-ui";Simply use it as a component in any vue application.
<DragSelect v-model="selectedItems" :items="items" class="...">
<template #item="{ item }">
<div class="...">
<div>ID: {{ item.id }}</div>
</div>
</template>
</DragSelect>Devlos UI is open-source and thrives on contributions from developers like you. Found a bug or have a feature request? Join us on GitHub and help make Devlos UI even better!