MigsLab UI
My own Vue 3 and TypeScript component library. It is copied into a project rather than installed, so the code stays visible, editable and free of a dependency chain.
- 41
- Vue components
- 1
- Runtime dependency: Vue
- 0
- Icon fonts
- 38
- Theme tokens (--ml-*)
Change the tokens. Every component follows.
Small surface, plain code
Copied, not installed
The library lives inside the project. There is no package version to chase and nothing hidden to work around.
Tokens over configuration
Colors, radius and shadows are CSS variables. A theme is a stylesheet, not a build step or a set of component props.
Compose before you extend
App-specific needs are met by wrapping components in the app, which keeps the library itself generic.
Readable by people and tools
A short integration guide with a full API reference ships inside the library, for developers and AI assistants alike.
This site's theme, in the library's tokens
The library ships light. This site's angular dark and light themes are override stylesheets, with no edits inside the library. Use the switch in the header to see both.
--ml-background#0c0d0e--ml-foreground#edeef0--ml-muted#17191b--ml-border#2c2f33--ml-primary#ff5a1f--ml-success#4cc38a--ml-danger#e5484d
41 components in 11 groups
Compound components share state through injection, and form controls use v-model through defineModel.
- Form11
- Button05
- Table05
- Accordion04
- Card04
- Dialog04
- Tab04
- Alert01
- Chip01
- Icon01
- Pagination01
Built where it is used
MigsLab UI is developed in a dedicated component workshop and carried into real products. HomeChic and this website both run on it, so every component is judged by how it behaves in real software.
import { ButtonComponent, InputComponent } from '@/components/MigsLab/shared'
/* theme.css, loaded after the library */
:root {
--ml-primary: #ff5a1f;
--ml-radius: 2px;
}