basefn

A UI component library for Xote applications. Built with ReScript, designed to be lightweight and customizable.

Installation

Ensure you have the dependencies installed:

npm install xote @rescript/core

Install basefn:

npm install basefn 

Required peer dependencies:

• xote - The reactive framework
• @rescript/core - ReScript standard library

Add to your rescript.json:

{
  "dependencies": [
    // Standard ReScript library
    "@rescript/core",
    // Signals library
    "rescript-signals", 
    // UI library
    "xote"
  ],
}

Quick Start

open Xote
open Basefn

// Static values
<Button
  variant={Primary}
  label={static("Click me")}
  onClick={_ => Console.log("Clicked")}
/>

// Reactive values
let count = Signal.make(0)
<Button
  variant={Primary}
  label={reactive(count->Signal.map(n => `Clicked ${n->Int.toString} times`))}
  onClick={_ => count->Signal.update(n => n + 1)}
/>

Components

Forms: Button · Input · Textarea · Checkbox · Radio · Select · Switch · Slider

Layout: Card · Grid · Separator · AppLayout · Sidebar · Topbar

Feedback: Alert · Toast · Modal · Drawer · Spinner · Progress · Tooltip

Navigation: Tabs · Breadcrumb · Stepper · Dropdown

Data Display: Typography · Badge · Avatar · Timeline · Accordion · Kbd · Icon

Utilities: ThemeToggle · Label

Theming

Customize via CSS variables:

:root {
  --basefn-color-primary: #0066cc;
  --basefn-color-secondary: #6c757d;
  --basefn-radius: 0.375rem;
  /* See src/styles/variables.css for all variables */
}

Development

npm install        # Install dependencies
npm run build      # Build ReScript
npm run watch      # Watch mode
npm run dev        # Dev server with demo

License

MIT