View Storybook · Documentation · Report Bug

• About the Project
  • Screenshots
  • Tech Stack
  • Components
• Figma
• Getting Started
  • Prerequisites
  • Run Locally
  • Running Tests
  • Deployment
• Usage
• License
• Contact
• Acknowledgements

Confetti is Labcodes Software Studio's Design System for digital experiences and products. It consists of two component libraries: one for design, in Figma, and another in React, in Storybook.

• Figma
• Fluent UI Icons
• Storybook
• React
• Turborepo
• Netlify

• Buttons
• Cards
• Dropdowns
• Tags
• Inputs
• Check box
• Search Bar
• Sidebar
• Alert
• Banner
• Tooltip

Confetti's design specifications can be found on Figma.

Nowadays, the Confetti imports some icons from the Fluent UI repository. The @fluentui/react-icons are listed as a dev dependency, so the usage and the import must follow the Fluent UI guidelines. The all the Confetti icons at size of 20 and with the Regular theme as following:

  Code20Regular

  (...)

  if (type === "Code") IconComponent = Code20Regular;

However, if you wish to import an Icon that is not listed at the Confetti's list you can import it as code below:

import { AccessTimeFilled20Regular } from '@fluentui/react-icons';

Hipotetically, you also might need to import an Icon with another size or theme, so you can import as the following example:

import { AccessTime24Filled } from '@fluentui/react-icons';

• Node

Clone the project

  git clone [email protected]:labcodes/confetti-ds.git

Go to the project directory and instal its dependencies

  npm install

Starting the server

The project will run at localhost:8000

  npx turbo start

Alternatively, you can perform the commands below:

  cd apps/docs
  npm start

To run tests, run the following command inside at any folder

  npx turbo test

In order to run the application build, run the following command inside at any folder

  npx turbo build

We use Netlify for running checks for the review apps and deployment.

We use the manage of Confetti CI is Github Actions, which runs all the tests before opening a Pull Request. However, the deployment process itself is managed by the Netlify platform. To check our configurations, visit this link with the configuration file source and the Netlify setup file.

You can install and use Confetti on your project via npm. Instructions on Confetti's package README.

Distributed under the MIT License. See LICENSE file for more information.

Labcodes Software Studio - Linkedin - [email protected]

• Confetti Documentation
• Shields.io
• Awesome README
• Emoji Cheat Sheet
• Readme Template