# Build on Casper

<h2 align="center">Build faster with CSPR.design</h2>

<p align="center">CSPR.suite UI components library for React applications</p>

<p align="center"><a href="https://github.com/make-software/cspr-design" class="button secondary" data-icon="github">GitHub</a> <a href="https://storybook.cspr.design/" class="button secondary" data-icon="book">Storybook</a></p>

<p align="center"></p>

<p align="center"></p>

<p align="center"></p>

<p align="center"></p>

{% columns %}
{% column %}

### Get started in 5 minutes

Install from [NPM](https://www.npmjs.com/package/@make-software/cspr-design) to access ready-to-use components that bring the beloved [Casper Blockchain](https://www.casper.network/) community UI to your dApp. Save time on design and implementation with consistent look tailored for Web3.&#x20;
{% endcolumn %}

{% column %}
{% code title="account.tsx" overflow="wrap" %}

```javascript
import { 
  CSPR,
  BodyText,
  FlexColumn, 
} from '@make-software/cspr-design';

const balance = () => (
  <FlexColumn itemsSpacing={20}>
    <BodyText size={2}>Account balance:</BodyText>
    <CSPR 
      motes="50000000000000" 
      precisionCase={PrecisionCase.full} 
    />
  </FlexColumn>
);
```

{% endcode %}
{% endcolumn %}
{% endcolumns %}

{% columns %}
{% column %}

<figure><img src="https://1826105571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff6Bw8eqi6216u5n1qsqP%2Fuploads%2F3W1cFLWg32p1Z50wDfU7%2FScreenshot%202025-08-15%20at%2013.36.24.png?alt=media&#x26;token=9a48abec-b280-4e54-9e3c-0ebb50cb6081" alt="CSPR.design Color Palette"><figcaption></figcaption></figure>

{% endcolumn %}

{% column %}

### Check examples in the storybook

Explore live previews of every component, complete with usage guidelines and props. See how each UI element behaves in real-world scenarios. No guesswork, just plug and play.

<a href="https://storybook.cspr.design/" class="button secondary" data-icon="book">Storybook</a>
{% endcolumn %}
{% endcolumns %}

<h2 align="center">Explore build tools for Casper developers</h2>

<p align="center">Whether you need access to on-chain data or wallet integration, we’ve got you covered</p>

<p align="center"></p>

{% columns %}
{% column %}

### <img src="https://1826105571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff6Bw8eqi6216u5n1qsqP%2Fuploads%2Fc4XXW38y4GPMI8sUeVAz%2FCSPRcloud-Original-On-White.png?alt=media&#x26;token=02f821e9-631f-4b5c-a6b0-8cc2924a34c9" alt="" data-size="line">

[**CSPR.cloud**](https://cspr.build/cspr-cloud) is an enterprise-grade middleware platform aimed to super-charge developers and to be the primary way for dApps to interact with the Casper Network. It provides access to indexed and enriched blockchain data, real-time streaming subscriptions, and access to reliable and maintained Casper Node.

{% endcolumn %}

{% column %}

### <img src="https://1826105571-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff6Bw8eqi6216u5n1qsqP%2Fuploads%2FeBVxDUK5ktEv7RI77tVZ%2FCSPRclick-Original-On-White.png?alt=media&#x26;token=b10be26d-15b9-4e9d-b7eb-c44ecf19284b" alt="" data-size="line">

[**CSPR.click**](https://cspr.build/cspr-click) is a Web3 authentication layer that covers the end-user interaction with the blockchain. It provides integration with all the wallets in the Casper Ecosystem and greets users with a well-known Single-Sign-On like experience.

{% endcolumn %}
{% endcolumns %}

<h2 align="center">Join Casper developer community</h2>

<p align="center">Ask questions and receive answers from the ecosystem team and other fellow builders</p>

<p align="center"><a href="https://t.me/CSPRDevelopers" class="button secondary" data-icon="telegram">Join Telegram community</a></p>