NOTTO
DOCUMENTATION

NOTTO

COMPONENTS

UNIVERSAL UI COMPONENT LIBRARY

BUILT_ON_SHADCN_PRIMITIVES.EXE

PROJECT_OVERVIEW

Notto is a comprehensive Next.js component library built on shadcn/ui, designed for building any type of application interface with clean, technical aesthetics.

GOALS

  • Universal Design: Components that work for any application domain
  • Highly Composable: Building blocks that combine for complex interfaces
  • Customizable Theming: Easy to adapt to different brand requirements
  • Maximum Reusability: Layered architecture for optimal component reuse

COMPONENT_ARCHITECTURE

CORE

Building Blocks

  • Section (Layout)
  • Link (Navigation)
  • Logo (Branding)
LAYOUT

Page Structure

  • Header & Footer
  • Navigation
  • Content Areas
UI

Interface Elements

  • Buttons & Forms
  • Cards & Modals
  • Typography

ROUTING_ARCHITECTURE

Multi-Layer Component System

Notto implements a sophisticated 4-layer architecture that maximizes reusability while maintaining clean separation of concerns. Each layer builds upon the previous, creating a flexible system that scales from simple elements to complex applications.

ARCHITECTURAL_LAYERS
LAYER_4
PAGE_COMPONENTS

/app/[route]/components/ → Page-specific UI elements

LAYER_3
BRAND_COMPONENTS

/app/components/ → Notto-branded, reusable components

LAYER_2
BUSINESS_COMPONENTS

/components/ → Supabase & business logic integrations

LAYER_1
PRIMITIVE_COMPONENTS

/components/ui/ → shadcn/ui unstyled primitives

LAYER_PURPOSES
  • Layer 1 (Primitives): Raw shadcn/ui components with no styling - provides accessibility, behavior, and structure foundation
  • Layer 2 (Business): Supabase integrations and business logic - handles data fetching, authentication, and external service connections
  • Layer 3 (Brand): Notto-styled components for maximum reusability - applies consistent branding, typography, and visual design system
  • Layer 4 (Page): Page-specific compositions - combines lower layers into unique page-level functionality
HIDDEN_COMPLEXITY

The genius of this architecture is that complexity is progressively hiddenas you move up layers. Each layer abstracts away implementation details:

  • Users see: Simple, branded components (Button, Heading, Card)
  • Hidden: Radix UI accessibility implementation, CSS-in-JS styling, complex state management, responsive breakpoints
  • Benefit: Developer writes `<Button style="dark">CLICK</Button>` and gets full accessibility, dark mode, hover states, and consistent branding
COMPONENT_FLOW_EXAMPLE
// Layer 4: Page Component
import { LoginFormSection } from '@/app/auth/login/components/login-form-section'

// Layer 3: Brand Component  
import { BrandedButton } from '@/app/components/ui/button'

// Layer 2: Business Component
import { LoginForm } from '@/external/supabase/components/auth/login-form'

// Layer 1: Primitive Component
import { Button } from '@/external/shadcn/components/button'

// Flow: Page → Brand → Business → Primitive
// Each layer adds value without exposing lower-layer complexity
ROUTING_BENEFITS
  • Separation of Concerns: Each layer has a single, clear responsibility
  • Maximum Reusability: Brand components work across any page or feature
  • Easy Maintenance: Changes propagate automatically through the hierarchy
  • Clean Abstractions: Developers work at the appropriate level of detail
  • Scalable Growth: New features compose existing components rather than rebuilding

QUICK_START

INSTALLATION

# Clone the repository
git clone <your-repo-url>
cd notto

# Install dependencies
pnpm install

# Start development server
pnpm dev

BASIC_USAGE

import { Section } from '@/app/components/core/section'
import { Button } from '@/app/components/ui/button'
import { Heading } from '@/app/components/ui/heading'

export default function HomePage() {
  return (
    <Section container spacing="lg">
      <Heading level={1}>Welcome</Heading>
      <Button size="lg" style="dark">
        Get Started
      </Button>
    </Section>
  )
}