UI screenshot

UI

Author Avatar Theme by Catppuccin
Updated: 10 Dec 2022
40 Stars

Soothing pastel React components! (WIP)

Categories

Overview:

The article provides instructions on how to set up and use the @catppuccin/ui Tailwind CSS theme. It explains the steps required to extend the Tailwind configuration and import the necessary files.

Features:

  • Easy Customization: The @catppuccin/ui Tailwind CSS theme can be extended and customized according to specific requirements.
  • Plugin Integration: The theme includes the @catppuccin/tailwindcss plugin along with default settings for seamless integration.
  • Standalone Option: Although not fully supported, users can access the standalone version of the theme’s CSS file for experimentation.

Installation:

To install the @catppuccin/ui Tailwind CSS theme, follow these steps:

Step 1: Import configuration

@import 'path/to/@catppuccin/ui';

Step 2: Extend your existing configuration

module.exports = {
  // ...
  extend: {
    'catppuccin': require('@catppuccin/ui')
  }
}

Summary:

The @catppuccin/ui Tailwind CSS theme provides an easy and customizable way to enhance the look and feel of Tailwind CSS. By following the installation instructions, users can quickly set up and extend the theme’s configuration. Although a standalone option is not fully supported, users can still access the theme’s CSS file for experimentation.