# antuikit / Result

> Result with the `success`, `error`, `info` and `warning` icons drawn from your icon pack, illustrations for `403`, `404`, `500` and a dozen more statuses, in the kit's line style or in Ant Design's colors.

Docs: https://antuikit.com/docs/components/result

## Install

npx antuikit@latest init
npx antuikit@latest add result

## Import

import { Result } from "@/components/ui/result";

## Demos

- [Success](https://ui.antuikit.com/embed/result/success.md): Set `status` to `success` to confirm a finished operation, with a filled check from your icon pack above the title.
- [Error](https://ui.antuikit.com/embed/result/error.md): Set `status` to `error` for a failed operation, and list what went wrong in `children`, which renders below the actions.
- [Info](https://ui.antuikit.com/embed/result/info.md): Set `status` to `info`, the default, for a neutral outcome like a sent email, with a single button in `extra`.
- [Warning](https://ui.antuikit.com/embed/result/warning.md): Set `status` to `warning` for a state that needs attention soon, like a subscription that is about to expire.
- [404](https://ui.antuikit.com/embed/result/404.md): Set `status` to `404` to show the built-in illustration for a page that does not exist, with a way back home.
- [403](https://ui.antuikit.com/embed/result/403.md): Set `status` to `403` for the built-in illustration shown to people who are not allowed to see a page.
- [500](https://ui.antuikit.com/embed/result/500.md): Set `status` to `500` for the built-in server error illustration, with a way back home in `extra`.
- [401](https://ui.antuikit.com/embed/result/401.md): Set `status` to `401` for a page that needs the visitor to sign in first, with a sign-in button in `extra`.
- [429](https://ui.antuikit.com/embed/result/429.md): Set `status` to `429` when a visitor sends too many requests and has to wait before trying again.
- [503](https://ui.antuikit.com/embed/result/503.md): Set `status` to `503` for planned maintenance, while the service is down for a short time.
- [Offline](https://ui.antuikit.com/embed/result/offline.md): Set `status` to `offline` when the browser has lost its connection, with a button to retry.
- [Outlined](https://ui.antuikit.com/embed/result/outlined.md): Set `appearance` to `outlined` to draw the illustration in lines only, in grays from the text color.
- [Filled](https://ui.antuikit.com/embed/result/filled.md): Set `appearance` to `filled` to draw the lines over a light tint.
- [Primary accent](https://ui.antuikit.com/embed/result/primary.md): Set `accent` to `primary` to draw the outlined illustration in the theme's primary shades.
- [Primary filled](https://ui.antuikit.com/embed/result/primary-filled.md): Combine `accent="primary"` with `appearance="filled"` to tint the shapes in the primary color too.
- [Playground](https://ui.antuikit.com/embed/result/playground.md): Pick a `status` and switch `appearance` and `accent` to see every illustration in each style.
- [Illustrations](https://ui.antuikit.com/embed/result/illustrations.md): Every illustration the kit ships, one per status, each exported on its own to use outside a Result.
- [Payment success](https://ui.antuikit.com/embed/result/payment-success.md): A checkout confirmation with an order summary card below the buttons for the invoice and the dashboard.
- [Access denied](https://ui.antuikit.com/embed/result/access-denied.md): An access-denied page with the 403 illustration, a request-access button and a card showing what was blocked.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/result`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Result` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.