SNCF frontend framework

Usage no npm install needed!

<script type="module">
  import sncfBootstrapSncfMetierReseau from 'https://cdn.skypack.dev/@sncf/bootstrap-sncf.metier.reseau';


Bootstrap SNCF

Table of contents

Quick start

Several quick start options are available:

  • Install with npm: npm install @sncf/bootstrap-sncf.metier or npm install @sncf/bootstrap-sncf.communication
  • Install with yarn: yarn add @sncf/bootstrap-sncf.metier or yarn add @sncf/bootstrap-sncf.communication

Read the Getting started page for information on the framework contents, templates and examples, and more.


MASTER Build Status This is the branch you'll see on documentations sites sn.cf/socledesign
DEV Build Status This is developement branch, be careful, it could destroy your computer and burn your mouse.


Bootstrap's documentation, included in this repo in the root directory, is built with Hugo and publicly hosted on GitHub Pages at https://design-bootstrap.sncf.fr/ and https://designmetier-bootstrap.sncf.fr/. The docs may also be run locally.

Running documentation locally

  1. Run yarn install to install the Node.js dependencies, including Hugo (the site builder).
  2. Decide which version you need (intern or extern, cf. SNCF Digital resources)
  3. Run watch-docs-extern or watch-docs-intern to watch css & js.
  4. Run yarn docs-serve-extern or yarn docs-serve-intern to build the templates.
  5. Open http://localhost:9001/ in your browser, and voilĂ .

Learn more about using Hugo by reading its documentation.

Build icofonts

  • yarn icofont-base : build only required icons
  • yarn iconfont : build all icons


How to use with Reactjs

Read the cookbook

If you want to create a new Reactjs project, you need to:

  1. Create a new project:

    npx create-react-app reactjs-sncf
  2. Add bootstrap-sncf package:

    yarn add @sncf/bootstrap-sncf.metier
  3. Import

    import '@sncf/bootstrap-sncf.metier/dist/bootstrap-sncf.min.css';
    import '@sncf/bootstrap-sncf.metier';
  4. Start

    yarn start

Use Bootstrap and SNCF components with Reactjs

Read the cookbook

See the Bootstrap JavaScript section, import what you need:

  1. Import

    import 'bootstrap/js/dist/dropdown';
    import SelectExclusive from './dist/js/components/selectRadios'
  2. Init

    useEffect(() => {
        const dataSelectRadios = 'select-radios';
        const components = document.querySelectorAll(dataComponent);
        components.forEach((component) => {
            if (component.dataset.component === dataSelectRadios) {
                new SelectRadios(component)
    }, []);
  3. Use template

    return (
        <div className="form-group">
            <div className="input-group">
                <div className="input-group-prepend">
                <div className="btn-group dropdown" data-component="select-radios">
                    <button type="button" className="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-controls="actionsgroup">
                    <span data-role="placeholder">Tous ces mots</span>
                    <i className="icons-arrow-down" aria-hidden="true"></i>
                    <div className="dropdown-menu dropdown-menu-right" id="actionsgroup">
                    <input data-role="value" type="radio" name="keywordSearch" value="keywordSearch1" id="action1" className="sr-only" />
                    <label className="dropdown-item" htmlFor="action1">Action</label>
                    <hr className="dropdown-divider"/>
                    <input data-role="value" type="radio" name="keywordSearch" value="keywordSearch2" id="action2" className="sr-only" />
                    <label className="dropdown-item" htmlFor="action2">Another action</label>
                    <input data-role="value" type="radio" name="keywordSearch" value="keywordSearch3" id="action3" className="sr-only" />
                    <label className="dropdown-item" htmlFor="action3">Something else here</label>
                <div className="form-control-container">
                <input id="entertext" type="text" className="form-control" title="Enter text" placeholder="Enter text" />
                <span className="form-control-state"></span>