Ogonëk M3

Component Library Overview

Welcome to the Ogonëk M3 component library. This library is built following Material Design 3 guidelines and uses Bits UI for headless components.

smart_button

Clickables

Buttons, FABs, Tooltips, Navigation, Cards, Dialogues, Popovers, and more.

edit

Inputs

Text Fields, Checkboxes, Switches, Selects, Sliders, and Form components.

view_quilt

Layouts

Canonical Material 3 layouts: Single Pane, Split Pane, and Supporting Pane.

table

Table

Data tables for displaying sets of data.

circle

Misc

Miscellaneous components like Avatars and more.

Get Started

1. Install

npm i @ogonek-education/ogonek-m3

2. Import styles

Add to your root CSS file or layout stylesheet:

@import '@ogonek-education/ogonek-m3/styles';

3. Wrap your app

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>

4. Use components

<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>

5. Setup Dynamic Theming (Optional)

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.

Recommended: Server-Side Rendering (SSR)

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>