misaradmin
Repositories
1
 Projects Packages
6
 Public activity Starred repositories

@misar/ui (1.0.2)

Published 2026-03-13 15:32:33 +00:00 by misaradmin

Installation

@misar:registry=
npm install @misar/ui@1.0.2
"@misar/ui": "1.0.2"

About this package

@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
  • HeaderUtils: Header utilities and navigation helpers
  • ThemeSwitcher: Dark/light mode toggle component

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

  1. Create component in src/ directory
  2. Add TypeScript types and JSDoc documentation
  3. Export from src/index.ts
  4. Add tests in __tests__/ directory
  5. 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

  1. Follow the existing code style and conventions
  2. Add tests for new components
  3. Update documentation
  4. Ensure accessibility compliance
  5. Test across different browsers and devices

License

MIT

Dependencies

Dependencies

ID Version
@radix-ui/react-accordion ^1.2.0
@radix-ui/react-alert-dialog ^1.1.0
@radix-ui/react-avatar ^1.1.0
@radix-ui/react-collapsible ^1.1.0
@radix-ui/react-dialog ^1.1.0
@radix-ui/react-dropdown-menu ^2.1.0
@radix-ui/react-label ^2.1.0
@radix-ui/react-popover ^1.1.0
@radix-ui/react-progress ^1.1.0
@radix-ui/react-scroll-area ^1.2.0
@radix-ui/react-select ^2.1.0
@radix-ui/react-separator ^1.1.0
@radix-ui/react-slot ^1.1.0
@radix-ui/react-switch ^1.1.0
@radix-ui/react-tabs ^1.1.0
@radix-ui/react-tooltip ^1.1.0
class-variance-authority ^0.7.1
lucide-react ^0.469.0
next-themes ^0.4.4
sonner ^1.7.1

Development dependencies

ID Version
@types/react ^19.0.1
typescript ^5.7.3

Peer dependencies

ID Version
@misar/lib 1.0.0
next >=15.0.0
react ^18.0.0 || ^19.0.0
react-dom ^18.0.0 || ^19.0.0
react-hook-form >=7.0.0
Details
npm
2026-03-13 15:32:33 +00:00
2
80 KiB
Assets (1)
ui-1.0.2.tgz 80 KiB
Versions (8) View all
1.0.7 2026-03-22
1.0.6 2026-03-17
1.0.5 2026-03-17
1.0.4 2026-03-16
1.0.3 2026-03-13