@turk.net/mui - Material UI Theme Package

A Material UI theme package for NextJs projects, providing customized theme configuration, and icon components.

Note: This is a theme package, not a component library. It provides styling and theming for Material UI components. For component usage, refer to the Material UI documentation.

Installation

npm install @turk.net/mui
# or
yarn add @turk.net/mui

Usage

1. Apply the Theme

Wrap your application with the theme provider:

import { ThemeProvider } from "@mui/material/styles";
import theme from "@turk.net/mui/theme";

function App() {
  return <ThemeProvider theme={theme}>{/* Your app content */}</ThemeProvider>;
}

2. Use Material UI Components

Once the theme is applied, use Material UI components as documented in the Material UI documentation:

import { Button, Typography, Box } from "@mui/material";

function MyComponent() {
  return (
    <Box>
      <Typography variant="display.lg.bold">Welcome to OneHub</Typography>
      <Button variant="contained" color="primary">
        Get Started
      </Button>
    </Box>
  );
}

The theme will automatically style all Material UI components according to the OneHub design system.

Custom Typography Variants

This theme includes custom typography variants following the Untitled UI design system:

import { Typography } from "@mui/material";

function TypographyExamples() {
  return (
    <>
      {/* Display variants - for headings and hero text */}
      <Typography variant="display.xl2.bold">Extra Large Display</Typography>
      <Typography variant="display.xl.semibold">Large Display</Typography>
      <Typography variant="display.lg.medium">Medium Display</Typography>
      <Typography variant="display.md.regular">Regular Display</Typography>

      {/* Text variants - for body text and UI elements */}
      <Typography variant="text.xl.bold">Extra Large Text</Typography>
      <Typography variant="text.lg.semibold">Large Text</Typography>
      <Typography variant="text.md.medium">Medium Text</Typography>
      <Typography variant="text.sm.regular">Small Text</Typography>
      <Typography variant="text.xs.regular">Extra Small Text</Typography>
    </>
  );
}

Available sizes: xl2, xl, lg, md, sm, xs
Available weights: regular, medium, semibold, bold

3. Using Icons

The package includes custom icon components:

import HomeIcon from "@turk.net/mui/icons/Home";
import Settings01Icon from "@turk.net/mui/icons/Settings01Icon";

function MyComponent() {
  return (
    <div>
      <HomeIcon />
      <Settings01Icon />
    </div>
  );
}

What's Included

• Custom color schemes (light/dark mode support)
• Typography variants following Untitled UI design system
• Custom shadows and spacing
• Component style overrides

Icons

Custom SVG icons as React components, compatible with Material UI's icon system.

Fonts

Inter font family (Regular, Medium, SemiBold, Bold with italic variants) in WOFF2 format.

Development

Building the Package

yarn build

This will:

1. Generate icon components from SVG files
2. Bundle the library with tsup (ESM + CJS)
3. Convert TTF fonts to WOFF2 and generate fonts.css
4. Generate TypeScript declarations
5. Output everything to the dist folder

Watch Mode

yarn watch

Storybook

yarn storybook

LLM Guidelines & OpenCode Skill

For AI/LLM Models: This package is designed to be used by large language models (AI assistants) in consuming projects. Please refer to the following guidelines:

Documentation for LLMs

• LLM_GUIDELINES.md - Comprehensive guide for component usage, color system, typography variants, and complete component reference table
• LLM_EXAMPLES.md - Practical examples showing correct and incorrect usage patterns

OpenCode Skill for Consuming Projects

For projects that want LLM models to automatically follow Material UI best practices:

• SKILL_SETUP.md - Installation and setup instructions for the OpenCode skill
• Skill File: .opencode/skills/turknet-onehub-component-usage/SKILL.md - The actual skill that enforces component usage rules

The OpenCode skill automatically guides LLM models to:

• Use Material UI components exclusively
• Follow variant/size/color rules from the theme
• Avoid custom components
• Use correct typography variants
• Apply the color palette correctly

Setup: Copy the skill from .opencode/skills/ to your project's .opencode/skills/ directory and configure your .opencode.json. See SKILL_SETUP.md for details.

These documents are essential for generating consistent and correct Material UI code using this theme package.

Resources

• Material UI Documentation - For component usage
• Material UI Theming Guide - For understanding theme customization

License

MIT