Button
For clear, confident action.
EcoWestern DesignThe component library
Everything you need
to feel at home.
A considered collection of drop-in components built on MateFluency. Find the right piece, copy the import, keep the feeling.
Read implementation docs Updated for v1.0.2
A small foundation
The feeling
is in the details.
MateFluency tokens keep every component in the same climate: warm surfaces, organic corners, a 4px rhythm, and typography that leaves room to breathe.
--mf-accent--mf-radius-organic--mf-text-lg15px--mf-space-2xl32px
Core components
Drop in.
Carry on.
Each component arrives with its own shape, motion, contrast, and restraint. No assembly required.
Live preview Synced to package
Variant
Drop-in code
import { Button } from "@ecowestern/matefluency";
<Button variant="solid">Continue</Button>Includes the package styling automatically when you import styles.css.
Also in the libraryBadgeStatuses and labels
Also in the libraryInputForm fields with warmth
Also in the libraryAlertUseful feedback
Also in the librarySwitchSmall state changes
Casual surfaceLayered with sunlight
Surface
A place for things to land.
Input
Form fields with warmth.
Textarea
More room for a thought.
Select
A considered choice.
Checkbox
A small affirmative gesture.
Switch
Small state changes.
New component
Badge
Statuses and labels.
EWMF+3
Avatar
A human presence.
or continue
Divider
A little breathing room.
Alert
Useful feedback.
Tabs
Organized, not crowded.
Preparing your workspace68%
Progress
NewLoadingA calm sense of moving forward.
Skeleton
NewLoadingA soft placeholder while things arrive.
Toast
NewInteractiveBrief feedback that stays out of the way.
A little extra context
Tooltip
NewInteractiveHelpful context, right when needed.
Opens as a focused layer
Dialog
NewOverlayA focused moment above the page.
ewEcoWestern Design
Header
Navigation that knows when to move.
Footer
A bold place to leave the page.