Get Started

@deity/falcon-ui is a library of composable, themable, design-system-driven UI components for React.

Features

• over 30 UI components that are great basis for any component based design system

• super small - ~17KB gzipped, ~55KB minified - including all dependencies (emotion 10)

• tree shaking friendly - it really works even with webpack code splitting

• build-in design constraints theme that improves maintability and consistency of UI immensely

• phenomenal UI authoring experience: responsive, theme-based style props, no selector hell, proper style scoping, performant dynamic styling (object styles notation)

• great TypeScript support - type definitions, source maps, code completion for responsive, them-based style props

• single element pattern best practices accordance making components as consistent as native HTML elements

• automatic & transparent critical styles, code splitting and server side rendering support (thanks to emotion 10)

Installation

xxxxxxxxxx

  yarn add @deity/falcon-ui

  # or npm i @deity/falcon-ui

Usage

Wrap the root of your application with the ThemeProvider component, which adds the design constraints theme to the context for use in @deity/falcon-ui components. ThemeProvider component accepts a theme prop for setting a custom theme.

xxxxxxxxxx

import { ThemeProvider, Button } from '@deity/falcon-ui';

​

const App = (

  <ThemeProvider>

    <Button p="md" bg="secondary">Hello!</Button>

  </ThemeProvider>

);

Playground

Try it out on Codesandbox