Package Exports
- m3-svelte
- m3-svelte/buttons/Button.svelte
- m3-svelte/buttons/FAB.svelte
- m3-svelte/buttons/SegmentedButton.svelte
- m3-svelte/colors/BaseStyles.svelte
- m3-svelte/colors/StyleFromScheme.svelte
- m3-svelte/colors/utils
- m3-svelte/containers/BottomSheet.svelte
- m3-svelte/containers/Card.svelte
- m3-svelte/containers/Dialog.svelte
- m3-svelte/containers/List.svelte
- m3-svelte/containers/Snackbar.svelte
- m3-svelte/forms/Checkbox.svelte
- m3-svelte/forms/Chip.svelte
- m3-svelte/forms/CircularProgress.svelte
- m3-svelte/forms/DatePickerDocked.svelte
- m3-svelte/forms/LinearProgress.svelte
- m3-svelte/forms/Radio.svelte
- m3-svelte/forms/Slider.svelte
- m3-svelte/forms/Switch.svelte
- m3-svelte/forms/TextField.svelte
- m3-svelte/misc/Divider.svelte
- m3-svelte/nav/NavDrawer.svelte
- m3-svelte/nav/NavRail.svelte
- m3-svelte/nav/Tabs.svelte
- m3-svelte/package.json
- m3-svelte/utils/ChipChooser.svelte
- m3-svelte/utils/DateFieldAndPicker.svelte
- m3-svelte/utils/ResponsiveLayout.svelte
- m3-svelte/utils/SnackbarPlacer.svelte
- m3-svelte/utils/animation
- m3-svelte/utils/easing
Readme
m3-svelte
An attempt to make Material 3 in Svelte. See the website for docs.
Getting started
- Install the library into a Svelte project (
npm i m3-svelte). - Use the theme page to construct a theme. Copy the usage, and paste it in
+layout.svelte(don't forget to import it first). - Set up your typography. By default, M3 Svelte uses Roboto, but you need to import it from
https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap. You could also customize the font (see BaseStyles.svelte). - Set up your body to use the theme's background and text color, as well as its font. See M3 Svelte's app.html for an example.