Sticky Note
StickyNote displays reminders and annotations on a colorful paper-like surface.
Source
LLM docs
Package
Examples
2
Properties
36
Playground
Basics
Use preset colors for a small collection of reminders. Each note can also carry a title and footer.
Loading demo…
import { Block, StickyNote } from '@plocks/ui';
export function Demo() {
return (
<Block direction="row" wrap="wrap" gap={24} p="lg">
<StickyNote title="Today" footer="Tuesday · 9:30 AM" color="yellow" rotation={-2}>
Review the sketches and share feedback with the team.
</StickyNote>
<StickyNote title="Idea" color="blue" rotation={2}>
Keep the interface simple enough to understand at a glance.
</StickyNote>
<StickyNote title="Remember" color="pink" rotation={-1}>
Bring the latest prototype to the design review.
</StickyNote>
</Block>
);
}Interactive note
Add
onPress to use a note as a button. The component supplies button semantics and a pressed state.Loading demo…
import React, { useState } from 'react';
import { StickyNote } from '@plocks/ui';
export function Demo() {
const [done, setDone] = useState(false);
return (
<StickyNote
title={done ? 'Done!' : 'To do'}
color={done ? 'green' : 'purple'}
accessibilityLabel={done ? 'Mark note as to do' : 'Mark note as done'}
onPress={() => setDone(value => !value)}
>
{done ? 'Tap to reopen this task.' : 'Tap this note when the task is complete.'}
</StickyNote>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources