Quick Start

This guide assumes you’ve completed Installation. You should have the Stratum files in src/ and your app wrapping with ThemeProvider.

Add a Button

import { Button } from '@/components';

export default function MyScreen() {
  return (
    <Button variant="primary" onPress={() => console.log('pressed')}>
      Get Started
    </Button>
  );
}

Switch themes in the ThemeProvider and the button updates automatically — shape, color, shadow, and all.

Add a form field

import { useState } from 'react';
import { FormField, Button } from '@/components';

export default function LoginForm() {
  const [email, setEmail] = useState('');
  const [emailError, setEmailError] = useState('');

  function handleSubmit() {
    if (!email.includes('@')) {
      setEmailError('Enter a valid email address');
      return;
    }
    // proceed
  }

  return (
    <>
      <FormField
        label="Email"
        value={email}
        onChangeText={setEmail}
        placeholder="you@example.com"
        keyboardType="email-address"
        autoCapitalize="none"
        errorMessage={emailError}
        isRequired
      />
      <Button variant="primary" onPress={handleSubmit}>Continue</Button>
    </>
  );
}

Add a settings screen

import { useState } from 'react';
import { SettingsLayout, SettingsGroup } from '@/components';
import { Bell } from 'phosphor-react-native';

export default function SettingsScreen() {
  const [push, setPush] = useState(true);
  const [email, setEmail] = useState(false);

  return (
    <SettingsLayout title="Settings" onBack={() => {}}>
      <SettingsGroup
        title="Notifications"
        rows={[
          {
            label: 'Push alerts',
            leftIcon: Bell,
            rightAccessory: 'switch',
            checked: push,
            onToggle: setPush,
          },
          {
            label: 'Email digest',
            leftIcon: Bell,
            rightAccessory: 'switch',
            checked: email,
            onToggle: setEmail,
          },
        ]}
      />
    </SettingsLayout>
  );
}

Switch themes

import { useThemeToggle } from '@/hooks/useThemeToggle';
import { Button } from '@/components';

function ThemeSwitcher() {
  const { setTheme, toggleColorScheme } = useThemeToggle();

  return (
    <>
      <Button onPress={() => setTheme('slate')}>Slate</Button>
      <Button onPress={() => setTheme('obsidian')}>Obsidian</Button>
      <Button onPress={() => setTheme('quartz')}>Quartz</Button>
      <Button onPress={toggleColorScheme}>Toggle dark mode</Button>
    </>
  );
}

Next steps

• Browse Atoms to see all foundational components
• Read Tokens / Colors to understand the color system
• See Patterns for how components compose