Cirrus Bone Component


4.0.0-beta.13 years ago3 years agoMinified + gzip package size for @lightspeed/cirrus-bone in KB



Used to build the skeleton preview of a component while loading data.


  1. Since we use peer dependencies to minimize library duplication, ensure you have the following dependencies loaded within your project
yarn add @lightspeed/cirrus-tokens emotion@9 react-emotion@9 styled-system@3 polished@2
  1. Install the component library
yarn add @lightspeed/cirrus-bone
  1. Hook the <ThemeProvider> and the theme in your app.
// 1. Import the theme provider from emotion-theming
//    This is needed to forward all our tokens to the components
import { ThemeProvider } from 'emotion-theming';

// 2. Import the base theme from cirrus-tokens
//    There's nothing magical about this file. it's literally
//    a plain old javascript object with keys and values that
//    map to the tokens/design-system
import cirrusTheme from '@lightspeed/cirrus-tokens/theme/default';

/* Within your root app component */
class App extends React.Component {
  render() {
    return (
        3. Wrap the children with ThemeProvider and pass in
        the cirrus theme into the theme prop.
      <ThemeProvider theme={cirrusTheme}>
        {/* Whatever children */ }
  1. Import Bone and use right away!

React Component


Prop Type Description
width string custom CSS width
height string custom CSS height
animated boolean whether the bone is animated (default: true)
bg string Override the base background color of the bone


import React from 'react';
import Bone from '@lightspeed/cirrus-bone';

const MyComponent = () => (
    <Bone width="1rem" height="1rem" />

export default MyComponent;

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.