npm install @myelmut/design-system i18next react-i18next
# or
yarn add @myelmut/design-system i18next react-i18next
# or
pnpm add @myelmut/design-system i18next react-i18next

Usage

Integration with Next.js

1. Import Styles

For App Router (app directory):

Import the CSS in your root layout (app/layout.tsx):

import '@myelmut/design-system/dist/index.css';

import './globals.css';

export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html lang="en">
            <body>{children}</body>
        </html>
    );
}

For Pages Router (pages directory):

Import the CSS in pages/_app.tsx:

import type { AppProps } from 'next/app';

import '@myelmut/design-system/dist/index.css';

export default function App({ Component, pageProps }: AppProps) {
    return <Component {...pageProps} />;
}

2. Use Components

Components can be used in both Server and Client Components:

import { Button } from '@myelmut/design-system';

export default function Page() {
    return <Button variant="primary">Click me</Button>;
}

For interactive features (onClick, etc.), use in Client Components:

'use client';

import { Button } from '@myelmut/design-system';

export default function ClientPage() {
    return (
        <Button variant="primary" onClick={() => console.log('clicked')}>
            Click me
        </Button>
    );
}

Integration with Other React Projects

Import the CSS in your app entry point:

import '@myelmut/design-system/dist/index.css';

Use components:

import { Button } from '@myelmut/design-system';

function App() {
    return <Button variant="primary">Click me</Button>;
}

Package Structure

The package includes:

Components: ES modules and CommonJS compatible
TypeScript Declarations: Full type definitions
Styles: Pre-compiled Tailwind CSS (dist/index.css) and source CSS (styles/)
Assets: Static assets including fonts, images, and illustrations

@myelmut/design-system/
├── dist/
│   ├── index.cjs.js      # CommonJS bundle
│   ├── index.es.js       # ES module bundle
│   ├── index.css         # Compiled styles
│   └── types/            # TypeScript declarations
├── styles/
│   └── globals.css       # Source Tailwind CSS
└── assets/
    ├── fonts/            # Font files
    ├── images/           # Image assets
    └── illustrations/    # Illustration files (webp)

Accessing Static Assets

You can import assets directly from the package:

// Import source CSS (if you want to customize Tailwind)
// Import compiled CSS (recommended for most use cases)
import '@myelmut/design-system/dist/index.css';
import '@myelmut/design-system/styles/globals.css';

// Import illustrations
const chickenImage = '@myelmut/design-system/assets/illustrations/chicken.webp';
const fridgeImage = '@myelmut/design-system/assets/illustrations/fridge.webp';
const leafImage = '@myelmut/design-system/assets/illustrations/leaf.webp';
const potImage = '@myelmut/design-system/assets/illustrations/pot.webp';

Available Scripts

pnpm run build - Build the library
pnpm run storybook - Run Storybook dev server
pnpm run build-storybook - Build Storybook for deployment
pnpm run typecheck - Run TypeScript type checking

Project Structure

src/
├── components/      # React components
│   └── Button/
│       ├── Button.tsx
│       └── Button.stories.tsx
├── styles/         # Global styles
│   └── globals.css
└── index.ts        # Main export file

Keywords

FAQs

What is @myelmut/design-system?

Is @myelmut/design-system well maintained?

Package last updated on 21 Nov 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@myelmut/design-system

Elmut Design System

Setup

Development

Build

Installation