@sigx/lynx-daisyui

DaisyUI-flavored component library and styles for sigx-lynx. Ships a Tailwind preset, a stylesheet, and the matching JSX components (Button, Input, Modal, Tabs, …) so you can build Lynx UIs with the same idiom you'd use in @sigx/daisyui on web.

Status — initial release. APIs may shift as the Lynx styling story evolves.

📚 Documentation

Full component catalog, theming, navigation chrome and live examples → sigx.dev/lynx/modules/daisyui/overview

Install

pnpm add @sigx/lynx-daisyui

A taste

import { Button, Input, Card } from '@sigx/lynx-daisyui';

export function LoginCard() {
    return (
        <Card>
            <Input placeholder="Email" />
            <Input type="password" placeholder="Password" />
            <Button color="primary">Sign in</Button>
        </Card>
    );
}

Pull in the stylesheet from your app entry, or the Tailwind preset if you use Tailwind:

import '@sigx/lynx-daisyui/styles';
// or, for Tailwind:
import { daisyuiPreset } from '@sigx/lynx-daisyui/preset';

What's interesting

• Two-way binding form controls via the sigx model getter syntax — no onChange plumbing. Select and Radio.Item additionally accept a plain callback (onChange / onSelect) for controlled, non-model usage; model stays the canonical state path and is written before the callback runs, so both can be used together:

  <Select options={fruits} model={() => state.fruit} onChange={(v) => track('fruit', v)} />
  <Radio.Item value="pro" label="Pro" onSelect={(v) => setPlan(v)} />

• Theme switching with <ThemeProvider> / useTheme(), a headless themeController singleton, per-screen themes, and scoped sub-overrides. Content themes nest freely; OS chrome (status/nav bars) follows the global theme. A theme set while the app is still mounting (a per-screen theme on a screen that a cold deep link opens) reaches the root provider once it has mounted (#1193).

• Navigation chrome that pairs with @sigx/lynx-navigation: <NavTabBar />, <NavHeader />, <NavDrawer />, all built on the navigation package's public hooks. (<Tabs> and <SwiperIndicator> need no peer and stay on the root entry.)

• Markdown integration bridges into @sigx/lynx-markdown for themed rendering, editing and toolbar.

• Emoji skin for @sigx/lynx-emoji: emojiClasses and a themed <EmojiPickerSheet> (which also needs @sigx/lynx-sheet).

These three bridges need optional peers, so each lives on its own subpath. Install the peer, then import from the subpath. The root @sigx/lynx-daisyui entry never pulls them in:

import { NavHeader, NavTabBar, NavDrawer } from '@sigx/lynx-daisyui/navigation'; // + @sigx/lynx-navigation
import { markdownComponents, EditorToolbar } from '@sigx/lynx-daisyui/markdown';  // + @sigx/lynx-markdown
import { EmojiPickerSheet, emojiClasses } from '@sigx/lynx-daisyui/emoji';        // + @sigx/lynx-emoji, @sigx/lynx-sheet

Full theming model, component props, and the navigation/markdown bridges are documented on the docs site.

License

MIT