Getting Started

React UI kit.

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

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'),
);

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"
    />
  );
};