@misar/ui (1.10.1)

Published 2026-10-31 12:53:28 +00:00 by misaradmin

Setup this registry in your project .npmrc file:

@misar:registry=

To install the package using npm, run the following command:

npm install @misar/ui@1.10.1

or add it to the package.json file:

"@misar/ui": "1.10.1"

For more information on the npm registry, see the documentation.

@misar/ui

Shared UI components and design system for the MisarIO ecosystem.

Overview

This package provides a comprehensive design system and reusable UI components built with Radix UI and Tailwind CSS. It includes all the components used across MisarIO applications with consistent styling and accessibility.

Features

Design System: Consistent color palette, typography, spacing, and animations
Radix UI Components: Accessible, unstyled components with Misar styling
Tailwind CSS: Utility-first CSS framework with custom theme
TypeScript: Full TypeScript support with strict type checking
SSR Compatible: Server-side rendering support
Dark Mode: Built-in dark mode support with theme switching

Installation

pnpm add @misar/ui

Usage

Basic Component Usage

import { Button, Card, Input } from '@misar/ui';

export function LoginForm() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Sign In</CardTitle>
      </CardHeader>
      <CardContent>
        <Input type="email" placeholder="Email address" />
        <Button variant="primary">Sign In</Button>
      </CardContent>
    </Card>
  );
}

Theme Provider

Wrap your application with the ThemeProvider:

import { ThemeProvider } from '@misar/ui';

export default function App({ children }) {
  return (
    <ThemeProvider
      attribute="class"
      defaultTheme="dark"
      enableSystem
      disableTransitionOnChange
    >
      {children}
    </ThemeProvider>
  );
}

Analytics Provider

For GA4 integration with cookie consent:

import { AnalyticsProvider } from '@misar/ui';

export default function App({ children }) {
  return (
    <AnalyticsProvider gaId={process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID}>
      {children}
    </AnalyticsProvider>
  );
}

Components

Layout Components

BaseFooter: Reusable footer with sections and social links
SiteFooter: The mandated product footer — BaseFooter plus the standard Misar legal links
HeaderUtils: Header utilities and navigation helpers
ThemeSwitcher: Dark/light mode toggle component

Footer heading level (`headingLevel`)

SiteFooter / BaseFooter render each column title ("Product", "Company", "Resources") as a heading. The default is h3, and it is deliberately unchanged — a published package shared by every Misar site must not silently restructure five document outlines on a version bump.

h3 is wrong on any page that has no <h2> in its body: the outline then goes h1 → h3, a skipped level, which fails WCAG 2.1 SC 1.3.1 and is flagged by axe's heading-order rule. This was confirmed on MisarReach, MisarPost and MisarDev.

Every site should therefore declare its own level:

const footerConfig: SiteFooterConfig = {
  // ...
  headingLevel: 2, // pages have no <h2> above the footer
};

headingLevel is 2 | 3 | 4 | 5 | 6 — a level, not an element name, so it cannot be pointed at a div/span (which would drop the heading role) or at h1 (never correct for a footer column label). The heading is styled identically at every level: font-size, weight, letter-spacing and line-height are all pinned by FOOTER_SECTION_HEADING_CLASS, so changing the level changes the semantics only, never the appearance.

Form Components

Button: Primary, secondary, and ghost button variants
Input: Text input with label and error states
Label: Form field labels
Textarea: Multi-line text input

Data Display

Card: Container with header, content, and footer sections
Sonner: Toast notification system

Authentication

CookieConsent: GDPR-compliant cookie consent banner
CookieSettingsLink: Link to manage cookie preferences

Providers

ThemeProvider: Theme management with system preference detection
AnalyticsProvider: GA4 integration with consent mode

Styling

Tailwind Configuration

The package includes a custom Tailwind configuration with:

Color Palette: Custom colors for brand consistency
Typography: Font families, sizes, and weights
Spacing: Consistent spacing scale
Animations: Custom animations and transitions
Components: Pre-styled component variants

CSS Variables

Theme colors are defined as CSS variables for easy customization:

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  /* ... more variables */
}

Accessibility

All components follow WCAG 2.1 AA guidelines:

Keyboard Navigation: Full keyboard support
Screen Reader Support: Proper ARIA labels and roles
Focus Management: Visible focus indicators
Semantic HTML: Proper semantic structure

Theming

Custom Colors

// Use custom color classes
<div className="bg-misar-primary-500 text-misar-primary-foreground">
  Custom colored background
</div>

Theme Switching

import { useTheme } from 'next-themes';

function ThemeToggle() {
  const { theme, setTheme } = useTheme();
  
  return (
    <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
      Toggle Theme
    </button>
  );
}

Development

Building the Package

# Build the package
pnpm build

# Run type checking
pnpm typecheck

# Run tests
pnpm test

Adding New Components

Create component in src/ directory
Add TypeScript types and JSDoc documentation
Export from src/index.ts
Add tests in __tests__/ directory
Update this README

Component Guidelines

Use Radix UI primitives for accessibility
Follow existing naming conventions
Include proper TypeScript types
Add comprehensive JSDoc documentation
Ensure mobile responsiveness
Test with screen readers

Integration

Next.js Integration

// app/layout.tsx
import { ThemeProvider, AnalyticsProvider } from '@misar/ui';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <ThemeProvider defaultTheme="dark" enableSystem>
          <AnalyticsProvider gaId={process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID}>
            {children}
          </AnalyticsProvider>
        </ThemeProvider>
      </body>
    </html>
  );
}

Storybook (Optional)

For component development and documentation:

# Start Storybook
pnpm storybook

# Build Storybook
pnpm build:storybook

Testing

The package includes tests for:

Component rendering
Accessibility compliance
Theme switching
Responsive behavior
User interactions

Contributing

Follow the existing code style and conventions
Add tests for new components
Update documentation
Ensure accessibility compliance
Test across different browsers and devices

License

MIT

Dependencies

ID	Version
@misar/content	1.0.3
@misar/lib	2.1.0
@misar/upsell	1.1.0
@radix-ui/react-accordion	^1.3.1
@radix-ui/react-alert-dialog	^1.2.1
@radix-ui/react-avatar	^1.3.1
@radix-ui/react-collapsible	^1.2.1
@radix-ui/react-dialog	^1.3.1
@radix-ui/react-dropdown-menu	^2.2.1
@radix-ui/react-label	^2.1.17
@radix-ui/react-popover	^1.3.1
@radix-ui/react-progress	^1.2.1
@radix-ui/react-scroll-area	^1.4.0
@radix-ui/react-select	^2.4.1
@radix-ui/react-separator	^1.2.0
@radix-ui/react-slot	^1.5.0
@radix-ui/react-switch	^1.4.1
@radix-ui/react-tabs	^1.2.1
@radix-ui/react-tooltip	^1.4.1
class-variance-authority	^0.7.1
lucide-react	^0.577.0
next-themes	^0.4.6
sonner	^1.7.4

Development dependencies

ID	Version
@types/react	^19.3.0
react	^19.3.1
react-dom	^19.3.1
typescript	^5.9.3

Peer dependencies

ID	Version
next	>=15.5.27 <16
react	^18.0.0 \|\| ^19.0.0
react-dom	^18.0.0 \|\| ^19.0.0
react-hook-form	>=7.90.0

Details

npm

2026-10-31 12:53:28 +00:00

latest

232 KiB

Assets (1)

ui-1.10.1.tgz 232 KiB

Versions (31) View all

1.10.1

2026-10-31

1.10.0

2026-10-30

1.9.0

2026-10-27

1.8.1

2026-10-22

1.8.0

2026-10-21

@misar/ui (1.10.1)

Installation

About this package

@misar/ui

Overview

Features

Installation

Usage

Basic Component Usage

Theme Provider

Analytics Provider

Components

Layout Components

Footer heading level (headingLevel)

Form Components

Data Display

Authentication

Providers

Styling

Tailwind Configuration

CSS Variables

Accessibility

Theming

Custom Colors

Theme Switching

Development

Building the Package

Adding New Components

Component Guidelines

Integration

Next.js Integration

Storybook (Optional)

Testing

Contributing

License

Dependencies

Footer heading level (`headingLevel`)