Bezier React

Bezier React is a React components library that implements Bezier design system.

Installation

npm

npm i @channel.io/bezier-react

yarn

yarn add @channel.io/bezier-react

pnpm

pnpm install @channel.io/bezier-react

Usage

1. CSS import

In order to use bezier-react's styles, you need to import CSS. If you're using the module bundler, you can import CSS directly from within your JavaScript file.

import '@channel.io/bezier-react/styles.css'

Or if you're not using the module bundler, you can add the CSS directly to your HTML. We recommend referring to your styles file and copy-pasting it. As bezier-react updates, your styles should update with it.

<link
  rel="stylesheet"
  href="styles.css"
/>

2. Wrap AppProvider

Wrap AppProvider at the root of your application. If necessary, you can change the theme by specifying the themeName property.

import React from 'react'
import { createRoot } from 'react-dom/client'
import { AppProvider, Text } from '@channel.io/bezier-react'

const container = document.getElementById('root') as HTMLElement
const root = createRoot(container)

root.render(
  <AppProvider themeName="dark">
    <Text as="h1">Hello World</Text>
  </AppProvider>
)

3. Font import

Import font from CDN of Channel Corp. Or you can import it from Google Fonts.

<link
  rel="preconnect"
  href="https://cf.channel.io"
/>
<link
  rel="stylesheet"
  href="https://cf.channel.io/asset/font/Inter/inter.css"
/>

Contributing

See contribution guide.

Maintainers

This package is mainly contributed by Channel Corp. Although feel free to contribution, or raise concerns!