Skip to main content

Build consistent UIs with Conty Design System

A Storybook-first React design system with semantic tokens, reusable components, and cross-platform support for building beautiful, accessible interfaces.

Get StartedExplore Components

Quick Start

Get up and running with the Conty Design System in minutes.

1

Install the package

Install the design system package in your React project using your preferred package manager.
npm install @conty/design-system
2

Import styles

Add the design system styles to your application’s root layout or entry point.
import "@conty/design-system/styles.css"
3

Use components

Start using components in your application.
import { Button, Badge, Card } from "@conty/design-system"

export function Example() {
  return (
    <Card>
      <h2>Welcome</h2>
      <p>Start building with Conty Design System</p>
      <Button>Get Started</Button>
      <Badge>New</Badge>
    </Card>
  )
}

Explore by topic

Learn about the key concepts and features of the design system.

Design Tokens

Explore semantic tokens for colors, spacing, typography, and theming with cross-platform support.

Components

Browse the component library with detailed API documentation and usage examples.

Integration Guide

Learn how to integrate the design system into your existing projects.

Contributing

Contribute to the design system with our Storybook-first development workflow.

Key features

Everything you need to build consistent, accessible user interfaces.

Semantic Tokens

Cross-platform design tokens with semantic naming for colors, spacing, and typography.

Storybook-First

All components developed and documented in Storybook for consistent quality.

Type-Safe Variants

Built with class-variance-authority for type-safe component variants and props.

Dark Mode Support

Built-in light and dark theme support with CSS custom properties.

Radix UI Powered

Components built on Radix UI primitives for accessibility and composability.

Incremental Migration

Adopt gradually with a proven migration strategy for existing projects.

Ready to get started?

Follow our quickstart guide to add the Conty Design System to your project and start building consistent interfaces.

Get Started Now

Build docs developers (and LLMs) love

Get started for freeTalk to us