Thickness
The inset of the material. Surface, field, then control.
Eight colors, one material
Controls witha little drift
A color you can press, and a control that gives. Jellyfy is CSS for those controls. Add a class and build.
Pick a color
Primary
Moon jelly is close
It holds in the current.
Moon jelly
PrimaryAdd a class
Keep the element you already have. Add btn and a color such as primary. Call startJellyfy() once. That call runs the press, the loading lights, and the range fill.
Install
One package. Import the whole library, or the material, the motion, and the components you use. A file you do not import stays out of the build.
npm install jellyfy@import "jellyfy/jellyfy.css";import { startJellyfy } from "jellyfy";
startJellyfy();Without Tailwind, link jellyfy.css or import it from a bundler. The same classes apply.
One material
Depth is three separate things. A theme changes the solids. It does not flatten that difference.
Elevation
The drop shadow. It says how far the object sits off the page.
Press light
Press the button, or focus the field. The wash appears while you do.
With Tailwind, or without
Widen a control, narrow it, tilt it, or let it fade. The utility goes on the control. The material stays, and so does the press.
The set
Every color on one pageButton
The main action, with a soft raised press.
Icon button
The same press, for an icon alone.
Input
A soft field. The label rises as you type.
Textarea
The same field, when one line is not enough.
Select
A native menu, wrapped in the same soft field.
Checkbox
A small mark that fills when it is chosen.
Radio
One choice in a group, in the color you set.
Switch
On and off, with the same soft travel.
Range slider
Drag along a soft track. The fill is your color.
Alert
A status line that stays easy to read.
Badge
A small label in any of the eight colors.
Card
A quiet panel for grouping what sits together.
Dialog
A real dialog, with a jelly panel inside.