Flow-core is the base library required by any flow dependecies. It consists mostly of building blocks such design + system tokens, atoms, molecules, base themes, etc.

• Website
• Learn More

Table of contents

• Starter-kits
• Install for an existing project
• VScode Plugin and debuggers
• Components
• Templates
• Dependencies
  • Lineage
  • Form builder
• Resources
• Figma for designers
• Get in touch

For a new project, Flow has put together starter kits with basic dependencies to get you going. Each starter kit will contain Flow core, Flow system icons, Default google fonts and fully functional Flow templates (eg: top navigation, profile, left navigation, etc)

• Vue JS
• Aungular
• React

If you would like to contribute to an existing starter kit or write a new one for a different framework, write to [email protected] or ping on our slack channel.

VScode Plugin: Install Flow's Plugin to access components, icons, values, etc, and documentation inside of VScode.

Browser Debugger: Chrome, Firefox, Safari

Note: For Typescript, make sure you are using version >4.5

yarn add @cldcvr/flow-core

Note: after installation re-start your application.

Vue: Paste the below snippet after the closing <template> in your App.vue

<style>
 @import "@cldcvr/flow-core/dist/style.css";
</style>

React: Paste the below snippet in src/index.tsx or index.jsx

import "@cldcvr/flow-core/dist/style.css";

Angular: Add css file path in angular.json in styles property array.

"styles": ["@cldcvr/flow-core/dist/style.css"],

Copy and import the below snippet into your startup file. In VueJS: (src/main.ts or main.js), Angular: (src/main.ts), React: (src/index.tsx or index.jsx)

import("@cldcvr/flow-core").then(async () => {
  //your application startup code
});

Note: For Typescript, make sure you are using version >4.5

Vue: Copy paste below line in your main.ts file.

import "@cldcvr/flow-core/dist/types/vue2";

or

import "@cldcvr/flow-core/dist/types/vue3";

React Include react type in tsconfig.json like below

"include": ["src", "./node_modules/@cldcvr/flow-core/dist/types/react.ts"]

Note: after adding the snippets, re-start your application.

Icons are not packaged with Flow core to allow more flexibility and customization. We recommend that you install the system icon pack to get started.

yarn add @cldcvr/flow-system-icon

Promise.all([import("@cldcvr/flow-core"), import("@cldcvr/flow-system-icon")]).then(() => {
 // add your application startup code here
});

• Icons Github repo
• View icons

Install Flow's Plugin to access components, icons, values, etc, and documentation inside of VScode.

Browser Debugger: Chrome, Firefox, Safari

Visit the Flow components Storybook

Visit the Flow templates Storybook

• Lineage
• Form builder
• Tables (In development)
• Logs (coming soon)
• Force graph (coming soon)
• Themes (coming soon)
• Time-series (coming soon)

• Documentation
• Figma for designers
• VS code plugin
• Releases

If you would like to get in touch or contribute, please write to [email protected].