New Phone Models

    TypeScript icon, indicating that this package has built-in type declarations

    2.4.24 • Public • Published


    NPM Package

    User Interface widgets and utilities for Solid (solid-ui)

    These are HTML5 widgets which connect to a solid store. Building blocks for solid-based apps. Vanilla JS. Includes large widgets like chat, table, matrix, form fields, and small widgets.

    See Solid-Ui Storybook for SolidUI widgets. See Solid-UI API for SolidUI functions. See Forms introduction for UI vocabulary implementation.

    Table of content:

    • Getting started(#getting-started)
    • Further documentation(#further-ocumentation)

    Getting started

    Contributions of bug fixes and new functionality, documentation, and tests are always appreciated.

    In npm-based projects

    When including solid-ui in an npm-based project, you can use it with:

      import { ns, rdf,  acl, aclControl, create, dom, icons, log, matrix, media,
      messageArea, infiniteMessageArea, pad, preferences, style, table, tabs, utils, widgets, versionInfo
    } from 'solid-ui'

    Directly in a webpage

    Clone this repo, and in the repo root run:

    • npm install
    • npm run build

    This will generate a dist/ folder containing, among other artifacts, dist/main.js. Now run npx serve and go to http://localhost:3000/Documentation/ with your browser to see some examples.

    While viewing one of those examples, you can open the web console in your browser and for instance try how you can create a button:

    const solidLogo = ''
    const myButton = UI.widgets.button(document, solidLogo, 'test', () => window.alert('clicked!'))

    Or a chat widget:

    const chatChannel = ''
    const chat = UI.infiniteMessageArea(document, store, UI.rdf.namedNode(chatChannel))

    Development new components

    When developing a component in solid-ui you can test it in isolation using storybook

    npm run build
    npm run storybook

    If there is no story for the component yet, add a new one to ./src/stories.

    When you want to test the component within a solid-pane, you can use the development mode of solid-panes.

    Further documentation


    npm i solid-ui

    DownloadsWeekly Downloads






    Unpacked Size

    9.2 MB

    Total Files


    Last publish


    • codenamedmitri
    • rubenverborgh
    • michielbdejong
    • megoth
    • timbl
    • jaxoncreed
    • melvincarvalho
    • vincenttunru
    • bourgeoa
    • inrupt_ci