Skip to main content

Component Showcase

Explore all the stunning visual components available for building beautiful documentation with Compose.

Gradient Text​

Use GradientText to make text stand out with beautiful gradients.

<GradientText>Beautiful Gradient Text</GradientText>
<GradientText variant="secondary">Secondary Gradient</GradientText>
<GradientText variant="accent">Accent Gradient</GradientText>

Variants: primary, secondary, accent, success

Badges​

PrimarySecondarySuccessWarningDangerInfoOutlineGlass

Sizes:

SmallMediumLarge
<Badge variant="primary">Primary Badge</Badge>
<Badge variant="success" size="large">Large Success</Badge>

Callout Boxes​

Information

This is an informational callout box. Use it to highlight important information.

Pro Tip

Tips help users understand best practices and recommendations.

Warning

Warnings alert users to potential issues or important considerations.

Danger

Danger callouts highlight critical information that could lead to errors.

Success

Success callouts celebrate achievements or confirm correct actions.

<CalloutBox type="info" title="Custom Title">
  Your content here
</CalloutBox>

Feature Cards​

Read First

Code written to be understood first, not just executed.

Diamond-Native

Built specifically for ERC-2535 Diamonds with on-chain composability.

Composable

Combine facets instead of inheriting contracts for maximum flexibility.

<FeatureCard
  icon={<Icon name="target" size={32} />}
  title="Feature Title"
  description="Feature description goes here"
  gradient="gradientBlue"
  link="/docs/path"
/>

Metric Cards​

12%
0+
Users
25%
0K
Downloads
99.9%
Uptime
0/7
Support
<MetricCard
  value="1000+"
  label="Users"
  icon={<Icon name="users" size={24} />}
  trend={{direction: 'up', value: '12%'}}
/>

Glass Cards​

Beautiful Glass Effect

Glass cards use backdrop-filter blur for a modern, frosted glass appearance.

<GlassCard hover={true}>
  Your content here
</GlassCard>

Code Showcase​

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.24;

import {LibERC20} from "compose/LibERC20.sol";

contract ERC20Facet {
  function transfer(address to, uint256 amount) external returns (bool) {
      LibERC20.transfer(msg.sender, to, amount);
      return true;
  }
}

Timeline​

🚀
Q1 2024

Project Launch

Initial release with core facets and diamond infrastructure.
💎
Q2 2024

Diamond Standard

Full ERC-2535 implementation with upgradeable facets.
🌟
Q3 2024

Community Growth

Expanding library with community contributions.
🎯
Q4 2024

Production Ready

Audited, tested, and ready for production use.
<Timeline
  items={[
    {
      icon: '🚀',
      date: 'Date',
      title: 'Title',
      description: 'Description',
    },
  ]}
/>

Comparison Table​

Feature
Popular
Compose
Traditional
Other Diamonds
On-Chain Composability
Reuse deployed facets
✓✗✓
Read-First Design
Optimized for understanding
✓✗✗
Standard Library
Built-in verified facets
✓✗✗
Gas Efficiency
OptimizedStandardVariable
<ComparisonTable
  columns={[
    { name: 'Option 1', highlight: true },
    { name: 'Option 2' },
  ]}
  features={[
    {
      name: 'Feature',
      description: 'Description',
      values: [true, false],
    },
  ]}
/>

Gradient Buttons​

<GradientButton to="/docs/" variant="primary" size="large">
  Get Started
</GradientButton>

Animated Counter​

0
0.0%
$0
0K+
<AnimatedCounter 
  end={1000} 
  duration={2000}
  prefix="$"
  suffix="+"
  separator=","
  decimals={2}
/>

Usage in Documentation​

All these components are available in your MDX files. Simply import them at the top of your document:

import FeatureCard from '@site/src/components/features/FeatureCard';
import Badge from '@site/src/components/ui/Badge';
import GradientText from '@site/src/components/ui/GradientText';
// ... other imports

Then use them anywhere in your content!

Customization

All components support custom styling through className props and can be further customized by modifying their CSS modules.