# 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://use.cspr.design/build-on-casper.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.