@toptal/picasso
TypeScript icon, indicating that this package has built-in type declarations

44.0.6 • Public • Published

@toptal/picasso

Picasso NPM package

Picasso

Picasso is Toptal's component library, based on Toptal's design system - BASE. UI designs and documentation can be found for most components at picasso.toptal.net.

Installation instructions

yarn add @toptal/picasso @toptal/picasso-provider @toptal/picasso-tailwind
 tailwindcss postcss autoprefixer

Create tailwind.config.js in the root of the project

const path = require('path')

const projectRoot = __dirname

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    path.join(projectRoot, 'node_modules/@toptal/picasso/**/*.js'),
    path.join(projectRoot, 'node_modules/@toptal/picasso-*/**/*.js'),
    // adjust for your project infrastructure
    path.join(projectRoot, '{hosts,libs,namespaces}/**/src/**/*.{ts,tsx}'),
  ],
  presets: [require('@toptal/picasso-tailwind')],
  corePlugins: {
    preflight: false,
  },
}

Add Tailwind CSS directives to your CSS source files

/* index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Setup webpack to use PostCSS loader with tailwindcss plugin

If you are reusing webpack configuration from @toptal/davinci-engine you can skip this step as it is setup automatically if tailwind.config.js is in the repository.

Make sure to check all webpack configuration, Application (start/build), Storybook, Cypress

// webpack.config.js

...
{
  test: /\.css$/i,
  use: [
    'style-loader',
    'css-loader',
    {
      loader: 'postcss-loader',
      options: {
        postcssOptions: {
          config: false,
          plugins: {
            tailwindcss: {
              config: require.resolve(
                // update with actual path to tailwind config
                './tailwind.config.js'
              ),
            },
            autoprefixer: {},
          },
        },
      },
    },
  ],
},

...

When using Vite or NextJS, adding tailwind config with correct content should be sufficient in most cases, depending on your configuration.

For more info, you can check out the official Tailwind docs:

Install Tailwind CSS with Vite

Install Tailwind CSS with Next.js

Start using the library

import Picasso from '@toptal/picasso-provider'
import { Button } from '@toptal/picasso'
...

render () {
  return (
    <Picasso injectFirst>
      <Button>Hello world!</Button>
    </Picasso>
  )
}

A Picasso component rendered at root level is required for the library theme configuration and theme to work properly.

Documentation

Documentation and demos are available at picasso.toptal.net.

Decisions

Our decisons are documented at GitHub


Readme

Keywords

none

Package Sidebar

Install

npm i @toptal/picasso

Weekly Downloads

6,565

Version

44.0.6

License

MIT

Unpacked Size

48.9 kB

Total Files

21

Last publish

Collaborators

  • talbot