DEVVY UI — Build once. Style freely.

A place for your idea.

Compose a surface from simple parts.

Usage

import { Card, CardHeader, CardTitle, CardContent } from "@devvy-ui/react";

<Card>
  <CardHeader><CardTitle>Project</CardTitle></CardHeader>
  <CardContent>Your next idea.</CardContent>
</Card>

API reference

Native HTML attributes, className, style and a forwarded ref are supported. Component-specific props:

Prop	Type	Default	Description
children	ReactNode	—	Compose CardHeader, CardTitle, CardDescription, CardContent and CardFooter.
className	string	—	Extend the surface with ordinary CSS.

Source ownership

Add the audited implementation directly into your repository with the CLI:

node /path/to/devvy-ui/packages/cli/src/cli.mjs add card

Make the source yours.

Start from the canonical implementation used by the package and registry. Change the code, keep the MIT notice, and build the behavior your project needs.

Card.tsxREACT / TSX

import { forwardRef, type HTMLAttributes } from 'react';
import { cx } from '../lib/cx';

type DivProps = HTMLAttributes<HTMLDivElement>;

export const Card = forwardRef<HTMLDivElement, DivProps>(function Card(
  { className, ...props },
  ref,
) {
  return <div ref={ref} className={cx('dvy-card', className)} {...props} />;
});
export const CardHeader = forwardRef<HTMLDivElement, DivProps>(function CardHeader(
  { className, ...props },
  ref,
) {
  return <div ref={ref} className={cx('dvy-card-header', className)} {...props} />;
});
export const CardContent = forwardRef<HTMLDivElement, DivProps>(function CardContent(
  { className, ...props },
  ref,
) {
  return <div ref={ref} className={cx('dvy-card-content', className)} {...props} />;
});
export const CardFooter = forwardRef<HTMLDivElement, DivProps>(function CardFooter(
  { className, ...props },
  ref,
) {
  return <div ref={ref} className={cx('dvy-card-footer', className)} {...props} />;
});
export const CardTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
  function CardTitle({ className, children, ...props }, ref) {
    return (
      <h3 ref={ref} className={cx('dvy-card-title', className)} {...props}>
        {children}
      </h3>
    );
  },
);
export const CardDescription = forwardRef<
  HTMLParagraphElement,
  HTMLAttributes<HTMLParagraphElement>
>(function CardDescription({ className, ...props }, ref) {
  return <p ref={ref} className={cx('dvy-card-description', className)} {...props} />;
});

Edit your own copy. Downloaded source uses your changes; the component preview above uses the shipped version. Run the source installer first to include shared helpers.

Card

Interactive preview

A place for your idea.

Usage

API reference

Accessibility & behavior

Platform Behavior & Guidelines

Source ownership

Make the source yours.