Your first component | Neural Native

One theme for your application

Place neu-theme once around the application content in src/app/app.ts. It provides the shared colors and design tokens to the screens and controls inside it, including those in child components. You do not need a wrapper around each button, input or component.

The system scheme follows the device appearance. Use light or dark to choose a fixed appearance. If your application already has a root neu-theme, keep it and add your screens inside it.

1. Create the screen component

Create src/app/welcome.component.ts. Import the button here, where you use it. This component has no neu-theme: it receives the theme from the application root.

src/app/welcome.component.ts

import { Component, signal } from '@angular/core';
import { Text, View } from '@ng-native/components';
import { NeuButtonComponent } from '@neural-ui/native/button';

@Component({
  selector: 'app-welcome',
  imports: [Text, View, NeuButtonComponent],
  template: `
    <view class="content">
      <neu-button label="Continue" (pressed)="continued.set(true)" />
      <text class="feedback">{{ continued() ? 'Ready to continue.' : 'Welcome!' }}</text>
    </view>
  `,
  styles: `
    .content { padding: 24px; gap: 16px; }
    .feedback { color: var(--neu-text); }
  `,
})
export class WelcomeComponent {
  readonly continued = signal(false);
}

2. Mount the screen inside the root theme

Use this complete example in src/app/app.ts. App imports the theme and WelcomeComponent; the button stays imported in WelcomeComponent. Keep the generated src/main.ts entry point.

src/app/app.ts

import { Component } from '@angular/core';
import { SafeAreaProvider, SafeAreaView } from '@ng-native/components';
import { NeuThemeComponent } from '@neural-ui/native/theme';
import { WelcomeComponent } from './welcome.component';

@Component({
  selector: 'app-root',
  imports: [SafeAreaProvider, SafeAreaView, NeuThemeComponent, WelcomeComponent],
  template: `
    <safe-area-provider>
      <neu-theme scheme="system">
        <safe-area-view class="screen">
          <app-welcome />
        </safe-area-view>
      </neu-theme>
    </safe-area-provider>
  `,
  styles: `
    :host, .screen { flex: 1; }
  `,
})
export class App {}

Other screens can share this same root theme. Add another neu-theme only when you deliberately want a section to have its own appearance or token overrides.

Keep state in your application

Press Continue to update the signal and show the confirmation. The pressed output requests an action; your application decides what happens next. Reuse this pattern for navigation, saving and opening a sheet.