Skip to content
Sulmu UI

A first screen

With the package installed and the stylesheet imported, components are plain React imports. This login card uses the layout primitive Stack for the spacing, Field for labels and Button for the action.

Log in

Welcome back to Tourism Suite.

Forgot password?
import { Button, Card, CardHeader, Checkbox, Field, Input, Stack } from '@beyul/sulmu-ui'


export default function Example() {
  return (
    <Card elevated style={{ maxWidth: 400 }}>
      <CardHeader title="Log in" description="Welcome back to Tourism Suite." />
      <Stack>
        <Field label="Email" ids={{ control: 'email' }}>
          <Input type="email" placeholder="name@example.com" />
        </Field>
        <Field label="Password" labelAction={<a href="#forgot">Forgot password?</a>}>
          <Input type="password" placeholder="Enter password" />
        </Field>
        <Checkbox>Remember me</Checkbox>
        <Button fullWidth>Log In</Button>
      </Stack>
    </Card>
  )
}

What to notice

Section titled “What to notice”
  • No provider. There is no theme provider or context to wrap the app in.
  • Props follow Figma. variant, size, tone and the rest have the same names and values as the variant properties of the component in the Sulmu UI Figma library.
  • Spacing is a scale. Stack puts 16px between its children by default; gap={4} means step 4 of the spacing scale, where one step is 4px.
  • Field owns the label wiring. Field connects the label, the control and the messages. ids={{ control: 'email' }} sets the id of the input when you need a known one.
  • className and style work everywhere. They go to the root element of the component.

Next

Section titled “Next”