Theming

Usage

Initialize Tailwind CSS on your Next.js app, use the official Tailwind CSS plugin:

tailwind.config.js

import { createPreset } from 'styledsea-docs-interface/tailwind-plugin';
 
/** @type {import('tailwindcss').Config} */
export default {
  darkMode: 'class',
  presets: [createPreset()],
  content: [
    './node_modules/styledsea-docs-interface/dist/**/*.js',
 
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './content/**/*.mdx',
    './mdx-components.tsx',
  ],
};

ESM-Only

Use ESM syntax on your configuration file.

Global Styles

By using the Tailwind CSS plugin, or the pre-built stylesheet, your default border, text and background colors will be changed.

Light/Dark Modes

Adalt supports light/dark modes with next-themes. The Theme Provider is a part of Root Provider.

See Root Provider to learn more.

RTL Layout

RTL (Right-to-left) layout is supported. To enable RTL, pass the dir prop to body.

<body dir="rtl"></body>

Also pass the same prop to root provider to configure Radix UI RTL layout.

import { RootProvider } from '@styledsea-docs-interface/provider';
 
<RootProvider dir="rtl"></RootProvider>;

Layout Width

Customise the max width of docs layout with CSS Variables.

:root {
  --fd-layout-width: 1400px;
}

Themes

The design system was inspired by Shadcn UI, you can easily customize all the properties using CSS variables.

global.css

:root {
  /* hsl colors */
  /* use whitespace instead of comma */
  --background: 0 0% 100%;
  --foreground: 222.2 47.4% 11.2%;
 
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
 
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 47.4% 11.2%;
}

Only a subset of colors are provided by Adalt UI.

It may not be compatible with Shadcn UI.

Tailwind CSS Plugin

The official Tailwind CSS plugin introduces new colors and extra utilities including steps.

Presets

It comes with many theme presets out-of-the-box, you can pick one you prefer rather than the default one.

import { createPreset } from 'styledsea-docs-interface/tailwind-plugin';
 
/** @type {import('tailwindcss').Config} */
export default {
  presets: [
    createPreset({
      preset: 'ocean',
    }),
  ],
};

Typography

We use the Tailwind CSS Typography plugin internally, you can customize it with CSS.

The Tailwind CSS plugin overrides the default configuration for the Typography plugin. You can use the prose utility directly.

<div className="prose">...</div>

Colors

Adalt UI has its own colors, animations, and utilities. It adds the colors with a fd- prefix, you can reference them with the prefix like bg-fd-background.

To remove the prefix, enable addGlobalColors.

import { createPreset } from 'styledsea-docs-interface/tailwind-plugin';
 
/** @type {import('tailwindcss').Config} */
export default {
  presets: [
    createPreset({
      addGlobalColors: true,
    }),
  ],
};

Layout Width

Customise the max width of docs layout with Tailwind CSS plugin.

import { createPreset } from 'styledsea-docs-interface/tailwind-plugin';
 
/** @type {import('tailwindcss').Config} */
export default {
  presets: [
    createPreset({
      layoutWidth: '1400px',
    }),
  ],
};

On this page