@channel.io/bezier-react NPM

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!

design react channel

@channel.io/bezier-tokens @radix-ui/react-checkbox @radix-ui/react-dialog @radix-ui/react-radio-group @radix-ui/react-separator @radix-ui/react-slider @radix-ui/react-slot @radix-ui/react-switch @radix-ui/react-tabs @radix-ui/react-toolbar @radix-ui/react-tooltip @radix-ui/react-visually-hidden classnames react-textarea-autosize ssr-window uuid

@everything-registry/sub-chunk-165 @infinitebrahmanuniverse/nolb-_chan

14 days ago

28 days ago

1 month ago

1 month ago

1 month ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

9 months ago

6 months ago

10 months ago

6 months ago

9 months ago

9 months ago

9 months ago

8 months ago

9 months ago

8 months ago

8 months ago

7 months ago

7 months ago

10 months ago

7 months ago

10 months ago

6 months ago

7 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

Bezier React

Installation

npm

yarn

pnpm

Usage

1. CSS import

2. Wrap AppProvider

3. Font import

Contributing

Maintainers

2. Wrap `AppProvider`