EcoWestern Design
Docsnorth_east

The 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 north_east
01 / FoundationsColor, type, and spacesouth_east02 / TokensThe values underneathsouth_east
Updated for v0.1

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 workbench

Choose a component, adjust it, and take the code with you.

Previewing
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
01Core

Button

For clear, confident action.

Docs north_east
02Core
Casual surfaceLayered with sunlight

Surface

A place for things to land.

Docs north_east
05Forms

Select

A considered choice.

Docs north_east
06Forms

Checkbox

A small affirmative gesture.

Docs north_east
11Feedback

Alert

Useful feedback.

Docs north_east