Corner Markers
The defining motif. 4 L-shaped brackets at the corners of the nearest position:relative ancestor.
Default
Larger
Inset 6px
Accent
Add to your project
One command adds this component to your project.
1
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/andromeda-corner-markersProps
Every prop this component accepts. Any other prop is forwarded to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | - | px square the bracket lives inside; defaults to tokens.marker.size |
| offset | number | - | px inset from the corner; defaults to tokens.marker.offset |
| borderWidth | number | - | px stroke thickness; defaults to tokens.marker.borderWidth |
| color | string | - | any CSS color; defaults to tokens.color.border.bright |
| radius | number | - | px corner curve; defaults to the --andromeda-radius-frame token |
| className | string | - | Additional CSS classes applied to the root element. |
AI Canvas