@validationcloud/fractal-ui

This is Validation Cloud's component library, providing our web applications with custom React components, design tokens, and Tailwind classes.

Usage

The @validationcloud/fractal-ui package requires react, react-dom, and tailwindcss to also be installed as they are peer dependencies.

npm install @validationcloud/fractal-ui react react-dom tailwindcss

Components

All components located in src/components/ are available for use and can be imported as such:

import { Button } from '@validationcloud/fractal-ui'

Stylesheet

This library provides a stylesheet that can be used in projects using the Tailwind CSS styling framework. Currently the consuming project needs to be using Tailwind 4.

In the consuming application's global stylesheet, import the tailwind.css file after the tailwindcss import:

@import 'tailwindcss';
@import '@validationcloud/fractal-ui/tailwind.css';

Local development

Install packages:

npm install

Start Storybook development server:

npm run storybook

Storybook can be accessed at http://localhost:6006

Project structure

├── src            -> svgs files (e.g: project logo, icons)
│ ├── assets       -> serverless functions deployed as API on Vercel
│ ├── components   -> publicy exported components
│ ├── internal     -> components used internally, not exported
│ ├── lib          -> utility function and shared logic
│ └── styles       -> stylesheets with design tokens and custom Tailwind classes

Storybook

A deployed version of the @validationcloud/fractal-ui Storybook docs can be found at https://fractal-ui.vercel.app/