Skip to main content

​
Quick Start

This guide will get you up and running with Conty Design System in under 5 minutes. We’ll create a simple dashboard card with buttons and badges.

​
Step 1: Install Conty

If you haven’t already, install Conty and its peer dependencies: 
npm install @conty/design-system react react-dom

​
Step 2: Import Styles

Import the Conty styles in your application entry point:
src/main.tsx
import '@conty/design-system/styles.css'
This single import includes all design tokens and component styles you need.

​
Step 3: Use Your First Component

Let’s start with a simple button:
src/App.tsx
import { Button } from '@conty/design-system'

export default function App() {
  return (
    <div className="p-8">
      <Button onClick={() => alert('Hello Conty!')}>Click me</Button>
    </div>
  )
}
Conty components work seamlessly with standard React props and event handlers.

​
Step 4: Explore Variants

Conty components come with built-in variants for different use cases:
src/App.tsx
import { Button } from '@conty/design-system'

export default function App() {
  return (
    <div className="flex gap-2 p-8">
      <Button variant="default">Default</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="destructive">Delete</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="link">Link</Button>
    </div>
  )
}

​
Available Button Variants

variant

default | secondary | destructive | outline | ghost | link

size

default | sm | lg | icon | icon-sm | icon-lg

​
Step 5: Build a Dashboard Card

Combine multiple components to create a rich UI:
src/Dashboard.tsx
import {
  Button,
  Badge,
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
  CardAction,
} from '@conty/design-system'

export default function Dashboard() {
  return (
    <div className="p-8">
      <Card>
        <CardHeader>
          <CardTitle>Project Status</CardTitle>
          <CardDescription>
            Track your project's progress and metrics
          </CardDescription>
          <CardAction>
            <Badge variant="default">Active</Badge>
          </CardAction>
        </CardHeader>
        
        <CardContent>
          <div className="space-y-4">
            <div className="flex items-center justify-between">
              <span className="text-sm font-medium">Completion</span>
              <span className="text-sm text-muted-foreground">78%</span>
            </div>
            <div className="flex gap-2">
              <Badge variant="secondary">12 tasks</Badge>
              <Badge variant="warning">3 pending</Badge>
              <Badge variant="destructive">1 blocked</Badge>
            </div>
          </div>
        </CardContent>
        
        <CardFooter>
          <Button variant="default" size="sm">View Details</Button>
          <Button variant="outline" size="sm">Export</Button>
        </CardFooter>
      </Card>
    </div>
  )
}
The CardAction component automatically positions itself in the top-right corner of the card header.

​
Component Props

Here are the key props for each component:

​
Button

type ButtonProps = {
  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
  size?: 'default' | 'sm' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg'
  asChild?: boolean
} & React.ComponentProps<'button'>

​
Badge

type BadgeProps = {
  variant?: 'default' | 'secondary' | 'destructive' | 'warning' | 'outline'
  asChild?: boolean
} & React.ComponentProps<'span'>

​
Card Components

type CardProps = React.ComponentProps<'div'>
type CardHeaderProps = React.ComponentProps<'div'>
type CardTitleProps = React.ComponentProps<'div'>
type CardDescriptionProps = React.ComponentProps<'div'>
type CardContentProps = React.ComponentProps<'div'>
type CardFooterProps = React.ComponentProps<'div'>
type CardActionProps = React.ComponentProps<'div'>
All component props extend standard HTML element props, so you can use className, onClick, id, etc.

​
Using asChild for Composition

The asChild prop allows you to render components as different elements while keeping their styles: 
import { Button } from '@conty/design-system'
import { Link } from 'react-router-dom'

export function Navigation() {
  return (
    <nav className="flex gap-2">
      <Button asChild>
        <Link to="/dashboard">Dashboard</Link>
      </Button>
      
      <Button asChild variant="outline">
        <a href="https://docs.conty.dev" target="_blank">
          Documentation
        </a>
      </Button>
    </nav>
  )
}
When using asChild, ensure the child component accepts and forwards className and other props.

​
Adding Custom Styles

Conty components accept className for custom styling: 
import { Button, Card } from '@conty/design-system'

export function CustomCard() {
  return (
    <Card className="max-w-md bg-gradient-to-br from-purple-50 to-blue-50">
      <Button className="w-full justify-between">
        <span>Custom Button</span>
        <span>→</span>
      </Button>
    </Card>
  )
}
Conty uses tailwind-merge internally, so your custom classes will intelligently override default styles.

​
Working with TypeScript

Conty provides full TypeScript support with IntelliSense: 
import { Button, type ButtonProps } from '@conty/design-system'
import type { ComponentProps } from 'react'

// Extract variant type
type ButtonVariant = NonNullable<ButtonProps['variant']>

// Create a wrapper component
interface ActionButtonProps extends Omit<ButtonProps, 'variant'> {
  destructive?: boolean
}

export function ActionButton({ destructive, ...props }: ActionButtonProps) {
  return (
    <Button 
      variant={destructive ? 'destructive' : 'default'}
      {...props}
    />
  )
}

​
Accessing Design Tokens

You can import and use design tokens programmatically: 
import { semanticTokens, colors, spacing } from '@conty/tokens'

// Use in JavaScript
const primaryColor = semanticTokens.color.brand.primary
// "oklch(0.6248 0.2042 257.0818)"

const mediumSpace = semanticTokens.space[4]
// "1rem"

// Use legacy aliases
const bgColor = colors.background
const padding = spacing.md

/* Or use in CSS via custom properties */
.custom-component {
  background: var(--primary);
  color: var(--primary-foreground);
  padding: var(--space-4);
  border-radius: var(--radius-md);
}

​
Next Steps

1

Explore Components

Check out the full component library in Storybook to see all available components and their variants.
2

Customize Theming

Learn how to customize colors, spacing, and other design tokens to match your brand.
3

Dark Mode

Implement dark mode using the built-in .dark class or integrate with theme providers like next-themes.
4

Build Custom Components

Use Conty’s utilities like cn() and design tokens to build your own custom components.

​
Example Projects

Here are some complete examples to help you get started:

Next.js App

Full Next.js 14 app with Conty, dark mode, and TypeScript

Vite + React

Lightweight Vite setup with Conty and React Router

Dashboard Template

Complete dashboard with navigation, charts, and forms

Marketing Site

Landing page with hero, features, and pricing sections

​
Get Help

If you run into any issues:

Build docs developers (and LLMs) love

Get started for freeTalk to us