Getting Started with Fileverse UI System

Welcome to the Fileverse UI System documentation. Here, you'll find instructions and examples to help you get started quickly and efficiently.

What is Fileverse design system?

The Fileverse Design System is a Figma library of UI components used by the Fileverse team to create seamless user experiences. These components are designed to match what is available to developers, ensuring consistency between design and implementation.

Installation

Install the library with npm:

npm install @fileverse/ui

Styles and Tailwind

The ui ships design tokens and base rules, and a Tailwind preset that generates its utility and component classes inside your own Tailwind build.

1. Import the base stylesheet after your Tailwind entry (the file that holds @tailwind base/components/utilities):

import './globals.css';              // your tailwind entry
import '@fileverse/ui/styles/base';  // tokens, `*`/`body` rules, third-party overrides

styles/base also ships the legacy !important spacing/border-radius utilities (.space-*, .gap-*, .border-radius-*, and friends) at the same position they held in the old bundle; if your own Tailwind theme defines spacing/radius keys with the same names, these !important rules win. Treat them as deprecated.

2. Add the preset and scan the ui bundle in tailwind.config.js:

module.exports = {
  presets: [require('@fileverse/ui/tailwind')],
  content: [
    './src/**/*.{ts,tsx}',
    './node_modules/@fileverse/ui/dist/**/*.{js,mjs}',
  ],
};

The preset sets darkMode: ['class'], adds tailwindcss-animate, and registers the color-*, text-heading-*, text-body-*, text-helper-text-sm, text-helper-link, font-smoothed, shadow-elevation-*, divider-*, avatar-*, and toggle-* classes, so variants such as hover:color-bg-default-hover work.

The content entry for node_modules/@fileverse/ui/dist/**/*.{js,mjs} is required: Tailwind 3 does not merge content from presets, and without it the design-system classes and the utilities the ui components use are purged from your build. The preset targets Tailwind 3.4; Tailwind 4 is not supported.

That literal node_modules path assumes a hoisted install; under pnpm, Yarn PnP, or a monorepo workspace it won't resolve, so point content at the package's actual install location instead.

The preset loads tailwindcss, postcss, and postcss-js from your project; they are optional peer dependencies, and a Tailwind 3.4 install already provides all three. Under a strict resolver (Yarn PnP, pnpm with hoisting off) add postcss and postcss-js to your own devDependencies.

Legacy bundle (deprecated)

import '@fileverse/ui/styles' still works and ships a full Tailwind build (preflight and utilities included). It is deprecated: it duplicates your own Tailwind output and its classes are purged against the ui's source, not yours. Migrate to the setup above.