Welcome to the Ogonëk M3 component library. This library is built following Material Design 3 guidelines and uses Bits UI for headless components.
Buttons, FABs, Tooltips, Navigation, Cards, Dialogues, Popovers, and more.
Text Fields, Checkboxes, Switches, Selects, Sliders, and Form components.
Canonical Material 3 layouts: Single Pane, Split Pane, and Supporting Pane.
Data tables for displaying sets of data.
Miscellaneous components like Avatars and more.
npm i @ogonek-education/ogonek-m3
Add to your root CSS file or layout stylesheet:
@import '@ogonek-education/ogonek-m3/styles';
The App component sets up theming, dark-mode detection, and icon loading. Pass any extra icons your app uses via iconProviderProps.
<script lang="ts">
import { App } from '@ogonek-education/ogonek-m3';
</script>
<App iconProviderProps={{ extraIcons: ['search', 'add'] }}>
<!-- your content -->
</App> <script lang="ts">
import { Button, Card, Title } from '@ogonek-education/ogonek-m3';
</script>
<Card class="p-4">
<Title>Hello world</Title>
<Button>Click me</Button>
</Card> You can generate Material Design 3 themes dynamically in the browser using a source color or an image, and easily toggle light/dark modes and contrast levels.
To prevent the "Flash of Unstyled Content" (FOUC), it is recommended to read the theme
configuration on the server and pass it to the App component.
// src/routes/+layout.server.ts
import { DEFAULT_CONFIG } from '@ogonek-education/ogonek-m3';
export const load = ({ cookies }) => {
const themeCookie = cookies.get('ogonek-m3-theme-config');
let themeConfig = DEFAULT_CONFIG;
if (themeCookie) {
try {
themeConfig = JSON.parse(decodeURIComponent(themeCookie));
} catch (e) {}
}
return { themeConfig };
}; <script lang="ts">
import { App, ThemeSwitcher, isDarkScheme } from '@ogonek-education/ogonek-m3';
const { data, children } = $props();
const isDark = $derived(isDarkScheme(data.themeConfig.scheme));
</script>
<App themeConfig={data.themeConfig} {isDark}>
{@render children()}
<ThemeSwitcher />
</App>