Themeable design system for the SEEK Group.

[![npm](https://img.shields.io/npm/v/braid-design-system.svg?style=for-the-badge)](https://www.npmjs.com/package/braid-design-system)

## Setup > This guide is currently optimised for usage with [sku](https://github.com/seek-oss/sku), since it's configured to support Braid out of the box. If your project has a custom build setup, you'll need some extra guidance from project contributors to configure your bundler. In your sku project, first install this library: ```bash $ npm install --save braid-design-system ``` At the _very top_ of your application, import the reset, required theme and the `BraidProvider` component. **WARNING: The reset styles must be imported first to avoid CSS ordering issues.** For example: ```js import 'braid-design-system/reset'; // <-- Must be first import apacTheme from 'braid-design-system/themes/apac'; import { BraidProvider, Text } from 'braid-design-system'; // ...etc. ``` Finally, render the `BraidProvider` component, providing the imported theme via the `theme` prop: ```js import 'braid-design-system/reset'; import apacTheme from 'braid-design-system/themes/apac'; import { BraidProvider, Text } from 'braid-design-system'; export default () => ( Hello World! ); ``` If you're rendering within the context of another application, you may want to opt out of the provided body styles, which set the background color and reset margin and padding: ```js Hello World! ``` If you'd like to customise the technical implementation of all `Link` and `TextLink` components from Braid, you can pass a custom component to the `linkComponent` prop on `BraidProvider`. For example, if you wanted to ensure that all relative links are [React Router](https://reacttraining.com/react-router/) links: ```tsx import React from 'react'; import { Link as ReactRouterLink } from 'react-router-dom'; import { BraidProvider, makeLinkComponent } from 'braid-design-system'; import wireframe from 'braid-design-system/themes/wireframe'; // First create the custom link implementation: const CustomLink = makeLinkComponent(({ href, ...restProps }, ref) => href[0] === '/' ? ( ) : ( ), ); // Then pass it to BraidProvider: export const App = () => ( ... ); ``` ## Local Development This project uses [pnpm](https://pnpm.io/) for development dependencies. Installing with `pnpm` is required to ensure dependencies match the current [pnpm-lock.yaml](./pnpm-lock.yaml). ```bash $ pnpm install $ pnpm start ``` Start a local Storybook server: ```bash $ pnpm storybook ``` ## Contributing Refer to [CONTRIBUTING.md](./CONTRIBUTING.md). ## Thanks [Chromatic](https://www.chromaticqa.com) for providing component screenshot testing, powered by [Storybook](https://storybook.js.org/). ## License MIT.

	Stars	Issues	Version	Updated	Created
@vanilla-extract/esbuild-plugin	9,281	64	2.3.5	3 months ago	3 years ago
braid-design-system	1,475	3	32.17.0	a month ago	6 years ago
linaria	11,210	145	6.2.0	21 days ago	7 years ago
playroom			0.37.1	a month ago	6 years ago

@vanilla-extract/esbuild-plugin vs braid-design-system vs linaria vs playroom

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past