NOTTO
UI_COMPONENTS

INTERFACE

ELEMENTS

INTERACTIVE_COMPONENTS

BUILT_ON_SHADCN_PRIMITIVES.EXE

BUTTON

Interactive Button Component

STYLE_VARIANTS
SIZE_VARIANTS
VARIANT_COMBINATIONS

HEADING

Semantic Heading System

HEADING_HIERARCHY

LEVEL_1_MAIN_TITLE

Level 2 Subtitle

Level 3 Caption

Level 4 Section

Level 5 Small
Level 6 Micro
ACCENT_VARIANT

DEFAULT

SAMPLE_HEADING

ACCENT

SAMPLE_HEADING

FORM_COMPONENTS

Input, Label & Validation

BASIC_FORM

ALERT

Status Messages & Notifications

METRIC

Statistics Display

LIVE_METRICS
47
COMPONENTS
100%
ACCESSIBILITY
2.1s
LOAD_TIME

VISUAL_ELEMENTS

Badges & Separators

BADGES
DEFAULTOUTLINESYSTEMSECONDARY
SEPARATORS

TOOLTIP

Contextual Help

TEXT_&_LISTS

Typography & Content Components

TEXT_VARIANTS

SMALL_TEXT_FOR_LABELS

Body text variant for readable content and descriptions.

SEMANTIC_LISTS

BULLET_LIST

  • Universal Design
  • Component Library
  • Technical Stack

NUMBERED_LIST

  1. Initialize System
  2. Load Components
  3. Deploy Application

CODE_DISPLAY

Formatted Code Examples

LIVE_EXAMPLE
import { List, ListItem } from '@/app/components/ui/list'
import { Text } from '@/app/components/ui/text'
import { CodeBlock } from '@/app/components/ui/code-block'

function DocumentationExample() {
  return (
    <div>
      <Text variant="body">Component showcase:</Text>
      
      <List spacing="md">
        <ListItem>Semantic HTML structure</ListItem>
        <ListItem>Consistent typography</ListItem>
        <ListItem>Dark theme code blocks</ListItem>
      </List>
    </div>
  )
}

COMPONENT_COMPOSITION

Building Complex Interfaces

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

export default function Dashboard() {
  return (
    <Section container spacing="xl">
      <Heading level={1}>SYSTEM_DASHBOARD</Heading>
      
      <Section direction="horizontal" spacing="lg">
        <Card>
          <Section spacing="lg">
            <Heading level={3}>STATISTICS</Heading>
            
            <Section direction="horizontal" spacing="md">
              <Metric value="47" label="COMPONENTS" color="amber" />
              <Metric value="100%" label="UPTIME" color="red" />
            </Section>
            
            <Button style="dark">VIEW_DETAILS</Button>
          </Section>
        </Card>
      </Section>
    </Section>
  )
}

DIALOG

Modal Dialog Component

INTERACTIVE_MODAL
CODE_EXAMPLE
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/app/components/ui/dialog'
import { Button } from '@/app/components/ui/button'

function ConfigDialog() {
  return (
    <Dialog>
      <Button style="dark">OPEN_DIALOG</Button>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>SYSTEM_CONFIGURATION</DialogTitle>
        </DialogHeader>
        <div>
          {/* Dialog content */}
        </div>
      </DialogContent>
    </Dialog>
  )
}

CAROUSEL

Content Carousel Component

RESPONSIVE_CAROUSEL

SLIDE_001

Universal UI component showcase featuring responsive design.

01
COMPONENT

SLIDE_002

Interactive carousel with navigation controls and smooth transitions.

02
COMPONENT

SLIDE_003

Built on shadcn/ui primitives with Notto design system.

03
COMPONENT
CODE_EXAMPLE
import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from '@/app/components/ui/carousel'

function ComponentCarousel() {
  return (
    <Carousel className="max-w-2xl">
      <CarouselContent>
        <CarouselItem>
          <Card>
            <div>Slide content</div>
          </Card>
        </CarouselItem>
        <CarouselItem>
          <Card>
            <div>Slide content</div>
          </Card>
        </CarouselItem>
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  )
}