Solel//dev docs

Components

@solel-io/daybreak is Daybreak as React components. Solel's own apps are built with it, and an app made with it looks and behaves like part of , in light and Flare, on a desktop and on a phone.

Adding it to your project

Daybreak lives in packages/daybreak in the repository, under the Apache License 2.0, so you can use it in an app under any licence. It needs React 18 or later. It isn't published to npm, so Solel's own apps use it from source, as they do .

  1. Point @solel-io/daybreak at the source in vite.config.ts, as Contacts does:

    const here = (path: string) => fileURLToPath(new URL(path, import.meta.url));

// inside defineConfig({ … })
resolve: {
  alias: {
    '@solel-io/daybreak': here('../../packages/daybreak/src/index.ts'),
    '@solel-io/sdk': here('../../packages/sdk/src/index.ts'),
  },
},

  2. Add the same paths to tsconfig.json:

    "paths": {
  "@solel-io/daybreak": ["../../packages/daybreak/src/index.ts"],
  "@solel-io/sdk": ["../../packages/sdk/src/index.ts"]
}

  3. Load the styles once, in this order, at the top of main.tsx:

    import '../../../brand/fonts/fonts.css';
import '../../../brand/tokens/tokens.css';
import '../../../packages/daybreak/src/daybreak.css';

Adjust the paths to where your project sits next to the repository. To show brand marks, serve brand/logos/solel-marks.svg at /solel-marks.svg, or pass its address to Mark as sprite.

A settings page

import { SettingsPage, SettingsGroup, SettingsRow, Switch } from '@solel-io/daybreak';

export function Preferences({ sorted, setSorted }: { sorted: boolean; setSorted: (on: boolean) => void }) {
  return (
    <SettingsPage title="Notes" description="How your notes are kept and shown.">
      <SettingsGroup title="List">
        <SettingsRow label="Newest first" description="Show the notes you changed last at the top.">
          <Switch checked={sorted} onChange={setSorted} />
        </SettingsRow>
      </SettingsGroup>
    </SettingsPage>
  );
}

A Switch inside a SettingsRow takes the row's label for screen readers, so you write it once. A SettingsPage fills its window: one column when it's narrow, and up to four as it widens. Pages like this suit Pages in Settings.

What's in it

Group Components
Foundations Icon, Mark, AppIcon, CalendarIcon, Kbd. See Icons and tokens
Actions Button (primary, secondary, quiet, get, destructive and talk), IconButton, MenuButton, ContextMenu, Popover, Tooltip
Input TextField, SearchField, Select, Slider, Switch, Checkbox, RadioGroup and Radio, SegmentedControl, Tabs, DatePicker and Calendar, FileDrop, DropTarget, UploadRow
Feedback ProgressBar, Meter, Loader, Status, Badge, Tag, Callout, Toast and ToastRegion, Dialog, PermissionPrompt, EmptyState
Content List, ListSection, ListItem, Sidebar, Table, Card, CodeBlock, Disclosure, Stepper, PersonAvatar, AppCard, ModelCard, ModelTile, SnapshotTimeline
Settings SettingsPage, SettingsGroup, SettingsRow, ThumbnailPicker
Small screens StatusBar, AppGrid, AppGridItem, BottomBar, BottomBarItem, Sheet
Jethro JethroAvatar, JethroWindow, JethroFeeling, JethroComposer, JethroDraft, Chat, ChatMessage and the parts of a conversation

It also has the desktop's own parts, such as Window, Dock and MenuBar. Your app runs inside a window the desktop draws, so it doesn't need them. See The app frame.

Rules the components keep

  • One primary button per window, with ink text on flare.
  • Status colour always comes with a word.
  • Every component works with the keyboard and a screen reader, and icon-only buttons need a label.
  • Below 720 px wide, or on a touch screen, controls grow to 44 px.
  • A Sol's components take its name, so pass the name people gave it rather than writing "Jethro".