@colonydb/anthill NPM

Anthill

ColonyDB's design system.

React Components

Built for Next.js
Styled with styled-jsx
Supports the latest 2 versions of:
- Chrome
- Chrome for Android
- Safari
- Safari for iOS
- Firefox
- Edge

Installation

If not already installed, add React and Next.js to your project:

yarn add react react-dom next

Add Anthill to your project:

yarn add @colonydb/anthill

Usage

Customize your app to include the foundation/Global component at the root of every page:

// pages/_app.js

import Global from "@colonydb/anthill/foundation/Global";

const App = ({ Component, pageProps }) => (
  <>
    <Global />
    <Component {...pageProps} />
  </>
);

export default App;

Use components on any Next.js page:

// pages/index.js

import Button from "@colonydb/anthill/controls/Button";
import Main from "@colonydb/anthill/layout/Main";

const Page = () => (
  <Main restricted>
    <Button>Example Button</Button>
  </Main>
);

export default Page;

Modules

controls/Action
controls/Button
controls/ComboBox
controls/ContextualMenu
controls/HuePicker
controls/RadioButton
controls/TextInput
foundation/Global
foundation/Layer
foundation/Meta
foundation/ScrollContext
icons/ExternalIcon
icons/GanttChartIcon
icons/GanttChartItemIcon
icons/Icon
icons/MailIcon
icons/RemoveIcon
layout/Aside
layout/EditPage
layout/Main
layout/Stack
presentation/Article
presentation/Chip
presentation/Field
presentation/Heading
presentation/PrototypeBadge
presentation/Subheading
presentation/Table
presentation/Title
utils/hueToColor

Collateral

OSS Sponsorship Badge

Assets (223px × 44px):

@everything-registry/sub-chunk-189 @zalastax/nolb-_col @infinitebrahmanuniverse/nolb-_col

3 years ago

3 years ago

3 years ago

3 years ago