An implementation of (most) Material 3 components - written purely in SCSS.
Compile the SCSS in this repo, or grab the precompiled latest release here. Then, simply link to it in your HTML file, and give elements the classes they need.
Generally speaking, the classes are [component type]-[variant] - for example, the class button-elevated results in an elevated button. Components that don't have variants, such as the divider, are simply called [component type] (eg divider). Actual documentation coming soon™.
Here's a giant list of every Material 3 component, it's states, and whether or not it has been implemented:
- Badges
- Bottom App Bar
- Bottom Sheets
- Buttons
- Common
- Elevated
- Enabled
- Disabled
- Hovered
- Focused
- Pressed
- Filled
- Enabled
- Disabled
- Hovered
- Focused
- Pressed
- Tonal
- Enabled
- Disabled
- Hovered
- Focused
- Pressed
- Outlined
- Enabled
- Disabled
- Hovered
- Focused
- Pressed
- Text
- Enabled
- Disabled
- Hovered
- Focused
- Pressed
- Elevated
- Floating Action Button (FAB)
- Enabled
- Hovered
- Focused
- Pressed
- Extended FAB
- Enabled
- Hovered
- Focused
- Pressed
- Icon
- Standard
- Enabled
- Disabled
- Hovered
- Focused
- Pressed
- Toggleable
- Toggled On
- Enabled
- Disabled
- Hovered
- Focused
- Pressed
- Toggled Off
- Enabled
- Disabled
- Hovered
- Focused
- Pressed
- Toggled On
- Contained
- Filled
- Enabled
- Disabled
- Hovered
- Focused
- Pressed
- Tonal
- Enabled
- Disabled
- Hovered
- Focused
- Pressed
- Outlined
- Enabled
- Disabled
- Hovered
- Focused
- Pressed
- Filled
- Standard
- Segmented
- Enabled
- Disabled
- Hovered
- Focused
- Pressed
- Common
- Cards
- Elevated
- Headline
- Subhead
- Text
- Action row
- Enabled
- Disabled
- Hovered
- Focused
- Pressed
- Dragged
- Filled
- Headline
- Subhead
- Text
- Action row
- Enabled
- Disabled
- Hovered
- Focused
- Pressed
- Dragged
- Outlined
- Headline
- Subhead
- Text
- Action row
- Enabled
- Disabled
- Hovered
- Focused
- Pressed
- Dragged
- Elevated
- Checkbox
- Enabled
- Disabled
- Hovered
- Focused
- Pressed
- Chips (not planned)
- Date Pickers (not planned)
- Dialogs (not planned)
- Divider
- Lists (not planned)
- Menus (not planned)
- Navigation Bar
- Enabled
- Hovered
- Focused
- Pressed
- Navigation Drawer
- Standard
- Section headers
- Section dividers
- Enabled
- Hovered
- Focused
- Pressed
- Modal
- Section headers
- Section dividers
- Enabled
- Hovered
- Focused
- Pressed
- Standard
- Navigation Rail
- FAB
- Enabled
- Hovered
- Focused
- Pressed
- Progress Indicator (not planned)
- Radio Button (not planned)
- Search (not planned)
- Sliders (not planned)
- Snackbar (not planned)
- Switch (not planned)
- Tabs (not planned)
- Text Field (not planned)
- Time Picker (not planned)
- Top App Bar (not planned)
woah, look, you made it to the bottom :O