Free and open-source React illustration components built for modern applications and websites. These illustrations are built using React Aria and styled with Tailwind CSS.
Installation
You can add this illustrations component using our CLI or manually:
npx untitledui@latest add illustrations
Illustration examples
Below are examples and variations of this illustration component:
FAQs
Please refer to our frequently asked questions page for more.
The Illustration component supports four values for the required type prop: "box", "cloud", "documents" and "credit-card".
Illustrations come in "sm", "md" and "lg" sizes. Each size is a separately drawn SVG, not a scaled copy. The default is "lg".
Pass your own icon as children. By default, "box" and "documents" show UploadCloud02, "cloud" shows SearchLg, and "credit-card" shows AlertCircle. Use childrenClassName to restyle the round badge that holds the icon.
Pass children={null}. The badge only renders when children has a value, and the default icon only applies when children is left undefined.
Use className for the wrapper div and svgClassName for the SVG inside it. Other HTML attributes you pass are forwarded to the wrapper div.
On its own, Illustration renders a plain div and SVG with no role or label. If the illustration conveys meaning, add role="img" and an aria-label. If it's purely decorative, add aria-hidden. When you use it through EmptyState.Illustration on the empty states page, role="img" is added for you.