Liswood & Tache — React components

Published npm package of shared React UI components and layouts for Liswood & Tache projects.

Package: @liswood-tache/react-components

Install

npm install @liswood-tache/react-components

Peer dependency: React 19 (included as a dependency of this package; align versions with your app).

Quick start

Import the bundled CSS before using components. Without it, styles and icons will not render correctly.

import '@liswood-tache/react-components/dist/index.css';
import {
  Button,
  Icon,
  Input,
  Loader,
  AuthLayout,
  Header,
  Footer,
  Main,
  SidePane,
  MainLayout,
  PopupLayout,
  Navigation,
  NavigationItem,
} from '@liswood-tache/react-components';

function App() {
  return (
    <Button view="primary">
      <Icon name="fa-solid fa-pencil" />
      Edit
    </Button>
  );
}

Exported components

| Export | Description | Docs | |--------|-------------|------| | Button | Action button with variants and loading state | Storybook | | Icon | Font Awesome icon wrapper | doc/icons.md | | Input | Text input with label, icon, and error state | Storybook | | Loader | Animated loading spinner | Storybook | | AuthLayout | Centered auth / login page shell | doc/layouts.md | | Header | Top navigation bar with mobile menu | doc/layouts.md | | Footer | Page footer region | doc/layouts.md | | Main | Main content area | doc/layouts.md | | SidePane | Sidebar / filters column | doc/layouts.md | | MainLayout | Full app shell composing Header, SidePane, Main, Footer | doc/layouts.md | | PopupLayout | Centered modal shell with backdrop and close control | doc/layouts.md | | Navigation | Header navigation with dropdowns (desktop) and slide-in submenus (mobile) | doc/layouts.md | | NavigationItem | Single nav link; nest children for one dropdown level | doc/layouts.md |

Exported TypeScript types: ButtonProps, IIconProps, IInputProps, PopupLayoutProps, NavigationItemProps.

See doc/layouts.md for layout composition patterns.

Button

<Button view="primary">Save</Button>
<Button view="stroked-inverted">Cancel</Button>
<Button isLoading>Save</Button>

With icon — pass icon and label as sibling children (8px gap applied automatically):

<Button view="primary-inverted">
  <Icon name="fa-solid fa-shopping-cart" />
  Winkelmandje
</Button>

| Prop | Type | Default | Description | |------|------|---------|-------------| | view | primary | primary-inverted | secondary | transparent | stroked | stroked-inverted | primary | Visual style | | buttonText | string | number | — | Alternative to children for label text | | isLoading | boolean | — | Shows loader and disables the button | | children | ReactNode | — | Button content (text, icons, etc.) |

Extends native button attributes (disabled, onClick, type, etc.).

Icon

<Icon name="fa-solid fa-pencil" />
<Icon name="fa-solid fa-circle-check" color="success" />

See doc/icons.md for Font Awesome setup, class names, and limitations.

| Prop | Type | Default | Description | |------|------|---------|-------------| | name | string | required | Font Awesome classes, space-separated (e.g. fa-solid fa-pencil) | | color | success | warning | error | info | — | Semantic color from theme | | position | right-center | — | Positions icon to the right of a sibling (e.g. in inputs) |

Loader

<Loader />
<Loader inline color="inherit" />
<Loader contain />

| Prop | Type | Default | Description | |------|------|---------|-------------| | inline | boolean | false | Inline layout with horizontal margin | | contain | boolean | false | Fills parent container | | color | primary | inherit | primary | Stroke color (inherit uses currentColor) |

Input

<Input label="Email" name="email" placeholder="[email protected]" />
<Input label="Search" iconProps={{ name: 'fa-solid fa-magnifying-glass' }} />
<Input label="Password" error="Required field" />

| Prop | Type | Default | Description | |------|------|---------|-------------| | label | string | — | Visible label above the field | | iconProps | IIconProps | — | Icon shown inside the field | | iconAction | () => void | — | When set, icon is wrapped in a clickable button | | error | string | — | Error message below the field | | classes | { wrapper?, fieldWrapper?, input?, icon?, label? } | — | Extra class names for sub-elements | | children | ReactNode | — | Additional content inside the field wrapper |

Extends native input attributes (name, type, required, disabled, etc.).

AuthLayout

<AuthLayout
  logoSource="/logo.svg"
  headerItems={<h1>Sign in</h1>}
  mainItems={<LoginForm />}
/>

See doc/layouts.md for layout composition patterns.

| Prop | Type | Default | Description | |------|------|---------|-------------| | logoSource | string | — | Logo image URL | | headerItems | ReactNode | — | Content in the header bar | | mainItems | ReactNode | — | Main centered content area |

Navigation

Composition-based header navigation. Use inside Header (or any container). Top-level items render as links; nest NavigationItem children for a single dropdown level.

<Header logoSource={logo}>
  <Navigation>
    <NavigationItem label="Assortiment" href="/assortiment">
      <NavigationItem label="Hout" href="/assortiment/hout" />
      <NavigationItem label="Platen" href="/assortiment/platen" />
    </NavigationItem>
    <NavigationItem label="Contact" href="/contact" />
  </Navigation>
</Header>

| Behavior | Desktop (≥1200px) | Mobile (<1200px) | |----------|-------------------|------------------| | Items without children | Link | Link | | Items with children | Hover opens dropdown | Tap slides to submenu panel with back button |

Navigation

| Prop | Type | Default | Description | |------|------|---------|-------------| | children | ReactNode | — | Top-level NavigationItem elements | | className | string | — | Extra class on the root <nav> | | aria-label | string | "Main navigation" | Accessible name for the nav landmark |

NavigationItem

| Prop | Type | Default | Description | |------|------|---------|-------------| | label | string | required | Visible link text | | href | string | # | Link destination (optional for parent items opened on mobile) | | active | boolean | — | Shows an underline on desktop; also supported via aria-current="page" | | children | ReactNode | — | Nested NavigationItem elements (one level only) |

Extends native <a> attributes (target, rel, onClick, etc.).

See doc/layouts.md for Header integration and doc/theming.md for --navigation-* CSS variables.

Theming

Global design tokens and component CSS variables. See doc/theming.md for the full token reference.

Quick override on :root after importing library CSS:

:root {
  --primary-color: #1a5f2a;
}

Per-component overrides (example — header on a dark wrapper):

.app-header {
  --header-background-color: #1a5f2a;
  --header-foreground-color: #ffffff;
}

Storybook

Browse live examples and variants:

npm run storybook

Opens at http://localhost:6006. Stories are colocated with components under src/.

Development

See doc/development.md for local setup, build, and publishing.

Documentation index

| File | Contents | |------|----------| | doc/development.md | Setup, Storybook, build, publish | | doc/icons.md | Font Awesome icons — usage, limits, troubleshooting | | doc/layouts.md | Layout components and composition | | doc/theming.md | CSS variables and theming | | .cursor/rules/ | Cursor AI coding conventions for this repo |

License

Font Awesome Free is bundled with this package. See Font Awesome license (icons: CC BY 4.0, fonts: SIL OFL 1.1, code: MIT).