React Styleguide

Alternatives To React Styleguide
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Styleguide1639124 months ago665September 08, 202273gpl-3.0JavaScript
The VTEX Design System and React component library.
Styleguide1031579 days ago70June 05, 202317gpl-2.0PHP
TYPO3 extension to showcase TYPO3 Backend capabilities
Html Sketchapp Style Guide99
2 years ago8mitJavaScript
Brainly style guide ➡ Sketch
Styleguide Starterkit32
3 years ago1mitJavaScript
A starterkit to create styleguides with Fractal and Webpack.
Hm Pattern Library21
9 months ago14HTML
Juniper is the web style guide and pattern library for Human Made projects.
Ustyle19138 months ago40March 24, 202045otherSmarty
A living styleguide and pattern library by uSwitch.
3 days ago14iscTypeScript
React component library with styles to use for customer-facing web pages in Telia. #styleguide in Slack
3 years ago54March 06, 20182SCSS
Styleguide and Frontend Assets
2 years ago21mitTypeScript
AngularBaby is an UI component KIT following Atomic Design Principles.
3a year ago470January 04, 202237mitJavaScript
The React Component Library with a living styleguide
Alternatives To React Styleguide
Select To Compare

Alternative Project Comparisons
Readme Styleguide


How to start

To develop:

git clone
cd react-styleguide
npm install
npm run styleguide

Then open http://localhost:6060 in your browser.

To include in your project:

npm install --save tutti-ch-styleguide


yarn add tutti-ch-styleguide

We do work with scss files. In order to include the styles in your project, simply:

@import '~tutti-ch-styleguide/dist/normalize.scss'
@import '~tutti-ch-styleguide/dist/index.scss'

The first file normalize.scss is a normalizer to have a common style accross browsers. The second file will give you access to all variables that are mentioned in the styleguide.

Then you can easily import our components like:

import { Table, Spinner, Image } from 'tutti-ch-styleguide' // See our styleguide for a full list of components

Changing content

We have currently divided the style guide into two sections.

1. Styles

Everything related to styles (colors, sizes, icons etc...) goes under this folder. The styleguide will look into the src/styles folder and load every file matching the following glob:


These files will be directly included in the style guide under the Styles Section.

2. Components

Components that will be used in our project will be grouped under this section. The styleguide will look into the src/components folder and load every file matching the following glob:


These files will be directly included in the style guide under the UI Components Section.

3. Icons

In order to generate icons one must execute the following command:

npm run icons

This command will search for svg files recursively under styles/ folder and will create an index.js file within each folder that svgs are located. This index file serves to import the svgs files directly into react as images. If you prefer to use it as a font, then simply use the corresponding class name. For instance, for kanton-aargau.svg file one will be able to write:

import { icons } from "tutti-ch-styleguide"

Publishing to Github Pages

For detailed information regarding publishing on GitHub pages, you can check this link.

We use the docs/ way. GitHub will read everything under this folder. The index.html is the main file to be loaded.

To facilitate the build procedure, we have configured the styleguide to build directly into the docs/ folder. If you ever have to change this behaviour, check the styleguideDir configuration under styleguide.config.js file.

Publishing to npm

In order to publish to npm one must first create an npm user. npm adduser

Once done, an admin should provide access to the created user on npm's admin page. Afterwards it is as simple as executing the following command:

npm run dist:publish

This command will pull the latest version from the master, build the styleguide, patch the package version, push the changes to master and finally will publish.

Popular Styleguide Projects
Popular Icon Projects
Popular Software Development Categories

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.