Build faster with CSPR.design

CSPR.suite UI components library for React applications

GitHub Storybook

Get started in 5 minutes

Install from NPM to access ready-to-use components that bring the beloved Casper Blockchain community UI to your dApp. Save time on design and implementation with consistent look tailored for Web3.

account.tsx

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>
);

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.

Storybook

Explore build tools for Casper developers

Whether you need access to on-chain data or wallet integration, we’ve got you covered

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.

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.

Join Casper developer community

Ask questions and receive answers from the ecosystem team and other fellow builders

Join Telegram community