Skip to main content

​
Sublay Components

Sublay provides a CLI-based component distribution system inspired by shadcn/ui. Instead of hiding UI components in node_modules, Sublay copies the full source code directly into your project so you own and control every line.
The philosophy: Copy, paste, customize. Not install and configure.You get source code, not packages. You own your components and can modify anything.

​
How It Works

1

Initialize Sublay

Configure your platform (React/React Native/Expo), styling preference (Tailwind/Inline styles), and component installation path.
2

Add Components

Components are copied directly into your src/components/ directory as editable source files. --ref v8 reads the component from the v8 branch of the registry, where the v8 components live.
3

Use & Customize

The component works out of the box. Want to customize? Edit the source files directly.

​
Available Components

Threaded Comments

Reddit-style threaded discussions with:
  • Unlimited nesting depth
  • Upvote/downvote system
  • Visual threading lines
  • Collapsible threads
Best for: Forums, technical discussions, detailed conversations

Social Comments

Instagram-style social comments with:
  • Single-level nesting
  • Heart/like system
  • Clean, minimal design
  • Top/New/Old sorting
Best for: Social platforms, media content, quick interactions

Notification Control

Dropdown notification bell control with:
  • Real-time notification updates
  • Smart viewport positioning
  • Mark as read functionality
  • Infinite scroll
Best for: Navigation bars, headers, notification systems

​
Styling Options

Each component comes in two styling variants:

​
Inline Styles

  • All styles as style={{}} objects in JSX
  • No external dependencies
  • Works everywhere
  • Easy to find and change colors
  • Theme support via conditional logic

​
Tailwind CSS

  • Utility classes for styling
  • Requires Tailwind CSS 3.3 or later installed (on React Native and Expo, NativeWind 4)
  • Dark mode via dark: prefix
  • More concise code
  • Easy to integrate with design systems
Choose your variant during init — you can switch by re-running add commands.

​
What Gets Installed

When you add a comment component, about 40 TypeScript/TSX files are copied into your project (40 for threaded comments; 42 for social comments, or 43 for the inline styles variant of social comments on React Native and Expo):
Every file is:
  • ✅ Visible in your project
  • ✅ Editable
  • ✅ TypeScript with full type annotations
  • ✅ Self-documenting with inline comments

​
Required Dependencies

Components depend on Sublay’s core libraries for data fetching, real-time updates, authentication, and more. The files in a component’s shared/ folder add a few third-party packages. For React (Web): For React Native / Expo: The CLI checks for these and offers to install them automatically.

​
Getting Started

CLI Setup

Install the CLI and configure your project

Quick Start

Get comments working in under 5 minutes

Customization

Learn how to customize colors, layout, and functionality

Component Types

Compare available components and choose the right one

​
Philosophy

The Sublay CLI follows these principles:
  1. Minimal Props — Components work with a single prop that identifies the entity. No complex configuration required.
  2. Sensible Defaults — Beautiful, accessible styling out of the box.
  3. Edit, Don’t Configure — Customize by editing source code, not passing config objects.
  4. Progressive Disclosure — Ignore implementation details until you need to customize.
  5. Self-Documenting Code — Clear file names, thorough comments, and color palettes documented in headers.

​
Open Source

All components are open source under the Apache 2.0 license. You can fork, modify, contribute, and use them in commercial projects freely.