Basics

React components with high performance, quality aesthetics, and robust accessibility.

It's Saturday evening and you just had a brilliant idea. A special idea, deserving of special care. You jump straight to code, eager to make immediate progress. You start building the interface, scratching your head. Uhh, what makes a good color palette? What should my buttons look like? Where was that code for custom focus states?

Basics is the designer for your ideas. Components with high performance, quality aesthetics, and robust accessibility. Strong opinions, consistently implemented.

Ship your first iteration with confidence. By Sunday.

• Full type-safety
• Static stylesheets
• Robust accessibility

Install the package from npm:

npm install basics

Wrap the root of your application with the Provider component from the library.
This will set up theming and allow you to configure various global props.

pages/_app.tsx
import { Provider } from 'basics';

export default function App({ Component, pageProps }) {
  return (
    <Provider>
      <Component {...pageProps} />
    </Provider>
  );
}

Include global styles by importing base.css from the library. This will load fonts, set up tokens, and apply global styles. You can optionally include a CSS reset by importing reset.css.

pages/_app.tsx
import { Provider } from 'basics';
import 'basics/base.css';
import 'basics/reset.css';

export default function App({ Component, pageProps }) {
  return (
    <Provider>
      <Component {...pageProps} />
    </Provider>
  );
}