Skip to content
Cojeev UI

Shape

Data display

A shared catalogue of 36 SVG silhouettes, with 12 original contours that morph smoothly between shapes.

React · copy into your project · light and dark themes

Try it

Loading preview…

Take it with you

Copy the example, API and usage notes for your editor or AI assistant.

Add to your project

Terminal
npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/shape.json

The command includes the component’s shared dependencies. Your project keeps editable source files.

Include the complete example

This example also composes button, typography. Install its parts together:

Terminal
npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/button.json https://luv-jeri.github.io/cojeev-ui/r/shape.json https://luv-jeri.github.io/cojeev-ui/r/typography.json

Using shape

  • Use Shape with a name from shapeNames for a static mask. Size it through className or style and set its fill with the --c custom property.

  • Use ShapeMorph with a name from signatureShapeNames for an animated contour. Change name to morph from the visible shape; choose fill or outline and set color through ordinary SVG styles.

  • Use the shared silhouettes for card accents, empty states and dividers. Motion Off, reduced motion and offscreen rendering settle to a static shape.

API

Compose the exported parts below. The prop types are read from the React source during the registry build.

Native element or underlying primitive props are inherited where declared, including accessible labels, event handlers and refs.

ShapeProps

PropTypeRequired
namestringNo
asReact.ElementTypeNo

ShapeMorphProps

PropTypeRequired
nameSignatureShapeNameNo
variant"fill" | "outline"No
label

Omit for a decorative shape; supply when the graphic carries meaning.

stringNo

Accessibility

  • Shapes are decorative by default. Give ShapeMorph a label only when the graphic conveys meaning; keep descriptive text beside decorative accents.

States and appearance

rest

For conditional content, keep a MotionPresence boundary around keyed MotionSurface children. The shared entrance and exit states work with native primitives and respect your motion preference.

Try pointer and keyboard interaction, and switch the appearance control in the navigation to compare light and dark mode. Motion respects reduced motion preferences.