Skip to content

knocklabs/telegraph

Repository files navigation

Telegraph by Knock

Telegraph

The design system at Knock

Installation Instructions

npm install @telegraph/tokens

Add stylesheets

Pick one:

Via CSS (preferred):

@import "@telegraph/tokens"; (option: default.css, dark.css, light.css)

Via Javascript:

import "@telegraph/tokens/default.css"; (options: default.css, dark.css, light.css)

Scope styles:

<body className="tgph">

Note: If you only want to use telegraph in a certain part of your app, you would wrap that part in an element with the tgph class.

Packages

Core Packages

Name Version
@telegraph/appearance npm version
@telegraph/button npm version
@telegraph/combobox npm version
@telegraph/icon npm version
@telegraph/input npm version
@telegraph/layout npm version
@telegraph/menu npm version
@telegraph/modal npm version
@telegraph/popover npm version
@telegraph/radio npm version
@telegraph/segmented-control npm version
@telegraph/tag npm version
@telegraph/tokens npm version
@telegraph/tooltip npm version
@telegraph/typography npm version

Internal Packages

Name Version
@telegraph/compose-refs npm version
@telegraph/helpers npm version
@telegraph/postcss-config npm version
@telegraph/prettier-config npm version
@telegraph/style-engine npm version
@telegraph/vite-config npm version

Upcoming Packages

Name Status
@telegraph/color-picker Planned
@telegraph/data-list Planned
@telegraph/dialog Planned
@telegraph/divider Planned
@telegraph/form-control Planned
@telegraph/link Planned
@telegraph/spinner Planned
@telegraph/tab Planned
@telegraph/textarea Planned
@telegraph/toast Planned
@telegraph/toggle Planned