@binarycapsule/ui-capsules NPM

UI-Capsules - React UI Kit 👷‍♂💊🚧 wip️

🚨 Breakable toy - Do not use in real projects 🚨

This library is a breakable toy. New versions will often contain breaking changes, even for non-major releases.

React UI kit.

The Components demo (wip) can be visited here.

Install

UI-Capsules is available at npm. To add it to your app run:

npm i @binarycapsule/ui-capsules

The following peer dependencies should also be installed:

npm i react@17 react-dom@17 styled-components@6

Setup

Wrap your application with UiCaps:

import React from 'react';
import ReactDOM from 'react-dom';
import { UiCaps } from '@binarycapsule/ui-capsules';
import { App } from './App.tsx';

ReactDOM.render(
  <React.StrictMode>
    <UiCaps>
      <App />
    </UiCaps>
  </React.StrictMode>,
  document.getElementById('root'),
);

Usage

Please refer to the Components demo to get further instructions on how to use each component.

Dark Theme

To toggle dark theme, use the useUiCapsContext hook:

import React from 'react';
import { IconButton, useUiCapsContext } from '@binarycapsule/ui-capsules';

const App = () => {
  const { isDarkTheme, setTheme } = useUiCapsContext();

  return (
    <IconButton
      icon={isDarkTheme ? 'moon' : 'sun'}
      variant="ghostGray"
      onClick={() => setTheme(isDarkTheme ? 'light' : 'dark')}
      aria-label="Change theme"
    />
  );
};