Repository files navigation
M3 Solid
Material Design 3 components for SolidJS.
Installation
TODO.
Usage
setOpen(true)}>
Open Dialog
Card Title
Card content goes here
Toggle
setOpen(false)}>Cancel
setOpen(false)}>OK
}
>
Dialog content
);
}">import { Button , Card , Switch , Dialog } from 'm3-solid' ; import { createSignal } from 'solid-js' ; import 'm3-solid/styles.css' ; import 'm3-solid/themes/default.css' ; // or bring your own theme function App ( ) { const [ checked , setChecked ] = createSignal ( false ) ; const [ open , setOpen ] = createSignal ( false ) ; return ( < div > < Button variant = "filled" onClick = { ( ) => setOpen ( true ) } > Button > < Card variant = "elevated" > < h3 > Card Titleh3 > < p > Card content goes herep > Card > < label > < Switch checked = { checked ( ) } onChange = { setChecked } icons = "both" /> < span > Togglespan > label > < Dialog headline = "Dialog Title" open = { open ( ) } onOpenChange = { setOpen } actions = { < > < Button variant = "text" onClick = { ( ) => setOpen ( false ) } > CancelButton > < Button variant = "filled" onClick = { ( ) => setOpen ( false ) } > OKButton > > } > < p > Dialog contentp > Dialog > div > ) ; }
Design Tokens
The library includes all Material Design 3 design tokens:
Elevation levels (0-5)
Shape tokens (extra-small, small, medium, large, extra-large, full)
Typography scale (display, headline, title, label, body)
Easing functions (emphasized, standard, fast, slow, spatial)
Color Theming
You can define your color scheme using CSS custom properties. See themes/default.css for an example.
: root {--m3c-primary : # 6750A4--m3c-on-primary : # FFFFFF--m3c-secondary : # 625B71--m3c-on-secondary : # FFFFFF--m3c-surface : # FEF7FF--m3c-on-surface : # 1C1B1F/* ... and more */
Development
# Install dependencies# Run demo# Build library
License
Apache-2.0 OR GPL-3.0-only
Attribution
Ported from m3-svelte by KTibow.
Assistance from LLMs were used in this project.