Headless UI Components Library

✨️

Delightful developer experience is the fertile ground for great UI

That's the philosophy behind the Webframe ecosystem, and the core principle of Webframe UI. This library consists of:

Headless UI Components - the building blocks of user interfaces
Headless Form Inputs - for designing forms to collect user input
Headless UI Views - to address common use cases in app development
Theme Styles - the customisable look & feel of UI (or use your own theme).
Utilities - helper functions to extend component behaviors.

Why Webframe UI?

1. Feature Comparison

	Webframe UI	Material UI	Bootstrap	Semantic UI
Smart Defaults	👍	👍	👌🏼	👎🏾
Customisation	👍	👎🏾	👌🏼	👌🏼
Tailwind CSS	👍	👎🏾	👎🏾	👎🏾
Feature Rich	coming...	👍	👌🏼	👍
Icons	30,000+ (Any Icon)	2,100+	2,000+	FontAwesome
Custom Theme	✓
GUI Editor	✓

2. Scalable & Maintainable

☘️

Webframe UI is accessible by nature, and modular by nurture

Which means that apps built using Webframe will meet WCAG (opens in a new tab) standards and are maintainable.

As your project grows in size and complexity, it will be easy to add new features without accumulating technical debt.

This is because Webframe UI has been fine-tuned for dozens of entreprise level apps since 2015. It follows the best coding practices and programming principles to the T.

3. Rapid App Development

Webframe UI allows you to boost development speed by a factor of 5 or more. This is because it has Webframe Editor - a drag & drop GUI editor, like Figma, for rapid app development (releasing soon...).

Webframe Editor makes it possible to build complex UIs without years of programming experience. The developer user experience is a lot more intuitive than writing the source code by hand.

Note: Webframe Editor can support any UI library, but Webframe UI is supported by default.

Getting Started

Installation

In your project directory, run the following command to install dependencies:

pnpm add @webframer/ui react react-dom

Setup

Webframe UI is distributed as ESM module. If your project's package.json does not declare type module, include @webframer/ui package to be transpiled by a parser, such as Babel.js.

Example setup with Next.js (from version 13):

next.config.js

module.exports = {
  transpilePackages: ['@webframer/ui'],
}

Look & Feel

Webframe UI is headless by default. This means that, out of the box, UI components come without CSS styles. You can design custom UI Themes from a clean slate, without having to override CSS.

Alternatively, Webframe UI has a default theme that you can use. Here is an example of including Webframe Styles in a Next.js project:

pages/_app.js

// To be processed by Tailwind CLI
import '@webframer/ui/global.css'

Webframe UI uses Tailwind CLI to process global.css. Please follow Tailwind Setup (opens in a new tab) instructions, and make sure to include the package for parsing CSS:

tailwind.config.js

module.exports = {
  content: [
    '!./node_modules/@webframer/ui/node_modules',
    './node_modules/@webframer/ui/**/*.{html,js,jsx,ts,tsx}',
    // ...other project files to include for Tailwind CLI
  ],
}

Note: if you do not use Tailwind CSS, and simply want to include default Webframe Styles, import the demo.css file instead. It is a pre-bundled file meant for quick demonstration purpose only, because it only contains CSS styles used by Webframe Documentation site.

pages/_app.js

// NOTE: not recommended for production!
import '@webframer/ui/demo.css'

Usage

Since Webframe UI only comes in ESM flavour, you can import components without bloated bundle sizes. Your project's bundler should be able to tree-shake unused code automatically.

Example

import { Button, View } from '@webframer/ui'
 
export function MyComponent () {
  return (
    <View>
      <Button>Click Me</Button>
    </View>
  )
}

GUI Editor

Webframe UI is the built-in components library inside Webframe Editor, where you can design, develop and deploy web applications rapidly using a drag & drop GUI (Graphical User Interface).

This is the most efficient, intuitive and robust way to build apps with Webframe.

Introduction Components