> For the complete documentation index, see [llms.txt](https://use.cspr.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://use.cspr.design/build-on-casper.md).

# 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="/files/RDXVhGbtfUf7BHjNZgno" 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="/files/Jsowu40shOgrXWTkCzGj" 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="/files/LwWb2JyO2uVp7ffMlYbT" 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>