Configuration File

The sublay.json file is created in your project root during initialization. It stores your preferences and is used by the CLI when adding components.

File Location

your-project/
├── package.json
├── sublay.json          ← Configuration file
├── src/
│   └── components/
└── ...

Configuration Schema

{
  "platform": "react" | "react-native" | "expo",
  "style": "tailwind" | "styled",
  "typescript": true | false,
  "paths": {
    "components": "src/components"
  },
  "aliases": {
    "@/components": "./src/components"
  }
}

Configuration Options

`platform`

Type: "react" | "react-native" | "expo" Specifies your application platform. This determines which component variants are available, which peer dependencies are required, and platform-specific imports.

{ "platform": "react" }        // React web applications
{ "platform": "react-native" } // React Native mobile applications
{ "platform": "expo" }         // Expo-managed projects

`style`

Type: "tailwind" | "styled" Determines which styling approach to use for components.

tailwind
styled (Inline Styles)

Components use Tailwind CSS utility classes.

{ "style": "tailwind" }

Requires: Tailwind CSS installed in your project

<div className="bg-white dark:bg-gray-800 p-4 rounded-lg">
  <span className="text-blue-600 font-bold">Username</span>
</div>

Best for: Projects already using Tailwind, design systems, developers who prefer utility-first CSS

Components use inline style={{}} objects.

{ "style": "styled" }

Requires: Nothing additional

<div style={{
  backgroundColor: theme === 'dark' ? '#1F2937' : '#FFFFFF',
  padding: '16px',
  borderRadius: '8px'
}}>
  <span style={{ color: '#2563EB', fontWeight: 'bold' }}>Username</span>
</div>

Best for: Projects without Tailwind, explicit self-contained styling

Once you’ve added components with a specific style variant, switching requires re-installing them. Change style in sublay.json, delete the installed component directory, then re-run add.

`typescript`

Type: boolean — Default: true (auto-detected) Indicates whether your project uses TypeScript. Automatically detected from tsconfig.json or file extensions. You rarely need to change this manually.

{ "typescript": true }   // .tsx files
{ "typescript": false }  // .jsx files (types are stripped during installation)

`paths`

Type: object Configures where components are installed.

{
  "paths": {
    "components": "src/components"
  }
}

Components install at:

src/components/comments-threaded/
src/components/comments-social/

Use any path relative to your project root. The CLI creates the directory if it doesn’t exist.

`aliases`

Type: object Path aliases used in component imports. These should match your tsconfig.json paths or bundler alias configuration.

{
  "aliases": {
    "@/components": "./src/components"
  }
}

Components will use imports like:

import { SomeUtil } from '@/components/utils';

Aliases must match your tsconfig.json or bundler config. Mismatched aliases cause import errors.

Complete Example

A typical sublay.json for a React web app with Tailwind CSS:

{
  "platform": "react",
  "style": "tailwind",
  "typescript": true,
  "paths": {
    "components": "src/components"
  },
  "aliases": {
    "@/components": "./src/components"
  }
}

Platform-Specific Notes

React (Web)

{ "platform": "react" }

Required dependency: @sublay/react-js@^7.0.0 Available components: Threaded comments ✅, Social comments ✅, Notification control ✅

React Native

{ "platform": "react-native" }

Required dependency: @sublay/react-native@^7.0.0 Available components: Threaded comments ✅, Social comments ✅

Expo

{ "platform": "expo" }

Required dependency: @sublay/expo@^7.0.0 Available components: Threaded comments ✅, Social comments ✅

Changing Configuration

Option 1 — Edit manually: Update sublay.json directly, then delete and re-add any installed components.

rm -rf src/components/comments-threaded
npx @sublay/cli add comments-threaded

Option 2 — Re-initialize: Delete sublay.json and run init again.

rm sublay.json
npx @sublay/cli init

FAQ

Can I use both styling variants in the same project?

No, the configuration applies globally. Pick one approach for consistency.

What if I delete sublay.json?

The CLI will error when you try to add components. Run npx @sublay/cli init to recreate it.

Does this file affect my application at runtime?

No. sublay.json is only used by the CLI during component installation. Your application never reads this file.

Overview

Installation

Component Types

Threaded Comments

Social Comments

Notification Control

Customization

Configuration

Configuration File

File Location

Configuration Schema

Configuration Options

`platform`

`style`

`typescript`

`paths`

`aliases`

Complete Example

Platform-Specific Notes

React (Web)

React Native

Expo

Changing Configuration

FAQ

Next Steps

Quick Start Guide

Threaded Comments

Social Comments

Customization Guide

​Configuration File

​File Location

​Configuration Schema

​Configuration Options

​platform

​style

​typescript

​paths

​aliases

​Complete Example

​Platform-Specific Notes

​React (Web)

​React Native

​Expo

​Changing Configuration

​FAQ

​Next Steps

Quick Start Guide

Threaded Comments

Social Comments

Customization Guide

Configuration File

File Location

Configuration Schema

Configuration Options

`platform`

`style`

`typescript`

`paths`

`aliases`

Complete Example

Platform-Specific Notes

React (Web)

React Native

Expo

Changing Configuration

FAQ

Next Steps