---
source_hash: "071494b1"
title: "Module 6: SmartCommon - Components"
weight: 520
category: "Training"
type: "training"
---

# Module 6: SmartCommon - Components

> SmartCommon is the shared React component library for all SmartMaker applications. This module covers the essential components.

## Prerequisites

- Module 5 completed (SmartMaker architecture)
- Understanding React components and props

## Installation

### 1. Configure npm registry

In the `.npmrc` file:

```
@cap-rel:registry=https://inligit.fr/api/v4/projects/197/packages/npm/
```

### 2. Install the package

```bash
npm install @cap-rel/smartcommon
```

### 3. Import styles

In `main.jsx`:

```javascript
import "@cap-rel/smartcommon/dist/smartcommon-style.css";
```

## Component Categories

| Category | Components | Usage |
| --- | --- | --- |
| Layout | Page, Block, Panel, Popup | Page structure |
| Navigation | Navbar, Sidebar, Tabbar | Menus and navigation |
| Forms | Input, Select, Calendar, etc. | Data input |
| Display | String, Number, Datetime, etc. | Data formatting |
| UI | Button, Spinner, Tag, List | Interface elements |

## Chapters

| # | Chapter | Content | |
| --- | --- | --- | --- |
| 1 | [Layout](/training/module6-smartcommon-composants/mise-en-page) | Page, Block, Panel, Popup |
| 2 | [Navigation](/training/module6-smartcommon-composants/navigation) | Navbar, Sidebar, Tabbar |
| 3 | [Forms](/training/module6-smartcommon-composants/formulaires) | Input, Select, Calendar, Form |
| 4 | [Display](/training/module6-smartcommon-composants/affichage) | Formats and display components |

## Component Imports

```javascript
// Individual import
import { Page, Block, Button } from '@cap-rel/smartcommon';

// Or grouped import
import {
    // Layout
    Page,
    Block,
    Panel,
    Popup,

    // Navigation
    Navbar,
    Tabbar,
    TabbarItem,

    // Forms
    Form,
    Input,
    Select,
    Calendar,
    Boolean,

    // Display
    List,
    ListItem,
    Button,
    Spinner,
    Tag
} from '@cap-rel/smartcommon';
```

## Module Objectives

By the end of this module, you will know how to:

- Build a page with Page and Block
- Create complete forms
- Use navigation components
- Format data display

[Start: Layout ->](/training/module6-smartcommon-composants/mise-en-page)