Patterns
Domain compositions built only from the published packages, for you to copy into your app and change. The source is MIT, not Apache-2.0, so a copy you edit owes no change notice.
A pattern is app code: a commerce card, a storefront strip or a dashboard page, composed from
@nizivo/react, @nizivo/charts and @nizivo/icons through their public entries, with at most one
small stylesheet of its own. It is not a package and has no API to keep stable. Copy the files, then
rename, restyle or rewire them; nothing in the packages depends on them.
Where they live
Each pattern is a folder of patterns/src/ in the repository: <name>.example.tsx, and
<name>.css when it needs layout the components do not give. Both are under the
MIT licence. The examples on these
pages render those files from the built packages, as your app would.
- Imports. Only public entries:
@nizivo/react/<subpath>,@nizivo/chartsor@nizivo/charts/<part>,@nizivo/icons(and its brand glyphs,@nizivo/icons/brands/<name>), and React. The docs build fails on anything else. - Stylesheets. Every rule is in
@layer nz.patterns, the layer the packages leave empty for app pattern CSS, so a pattern's rules beat the components' without specificity games and never tie with them. Classes arenzp-<pattern>[-<part>], never a package'snz-*. They read the tokens and keep the packages' CSS rules (logical properties, no!important). There is no custom media: a copied stylesheet must work without a build step that knows--nz-sm. - Images. The examples draw a neutral block where a product photo goes, so this site loads no
remote image. In your app, put an
Imagethere.
The same files are copy-paste registry items with versioned URLs:
shadcn add writes one into your app with its stylesheet and adds the packages it imports.
The patterns
| Pattern | From Figma | Ships client JS under React Server Components |
|---|---|---|
| Order summary | 05 Commerce, Order Summary (754:897) | Never |
| Product card | 05 Commerce, Product Card (7275:13989) | Never |
| Variant picker | 05 Commerce, Variant Option (7275:14018) | ChipGroup, in a Field |
| Product table | 05 Commerce, Product Row (7275:14040) | TableSelection, Menu (and its IconButton's Tooltip) |
| Order table | 05 Commerce, Order Row (7275:14091) | Never |
| Discount card | 05 Commerce, Discount Card (7275:14130) | Never |
| Payment method | 05 Commerce, Payment Method (7275:14174) | ChoiceCard, in a Field |
| Shipment tracker | 05 Commerce, Shipment Tracker (7275:14195) | Never |
| Plan card | 05 Commerce, Plan Card (7275:14284) | SegmentedControl, in the row of plans |
| Customer card | 05 Commerce, Customer Card (754:530) | Never |
| Collection circles | 10 Instagram Storefront, Collection Circle (7275:19802) | Never |
| Shoppable post | 10 Instagram Storefront, Shoppable Post (7275:19815) and Post Badge (772:4419) | Never |
| Product tag | 10 Instagram Storefront, Product Tag (7275:19846) | Popover |
| Tagged product | 10 Instagram Storefront, Tagged Product (7275:19862) | IconButton's Tooltip |
| Storefront bar | 10 Instagram Storefront, Storefront Bar (7275:19889) | IconButton's Tooltip |
| Products page | 08 Overview Dashboard, Pattern 1 · Products (7275:15757) | SearchField, Select, TableSelection |
| Product detail page | 08 Overview Dashboard, Pattern 2 · Product detail (7275:15860) | Input, Textarea, ChipGroup, Switch, Checkbox |
| Orders page | 08 Overview Dashboard, Pattern 3 · Orders + drawer (7275:15971) | SearchField, Drawer |
| Customers page | 08 Overview Dashboard, Pattern 4 · Customers (7275:16097) | Never |
| Discounts page | 08 Overview Dashboard, Pattern 5 · Discounts (7275:16204) | Never |
| Analytics page | 08 Overview Dashboard, Pattern 6 · Analytics (7275:16296) | SegmentedControl, the charts' interaction island |
| Plan and billing page | 08 Overview Dashboard, Pattern 7 · Settings · Plan & billing (7275:16412) | Switch |
| Onboarding page | 08 Overview Dashboard, Pattern 8 · Onboarding (7275:16478) | Never |
ChartTooltip
The tooltip card of a chart point, rendered from pre-formatted strings, so it works on the server, inside the ChartInteraction island and inside a third-party renderer alike.
Order summary
An order's lines and totals on a Card, the totals a description list with the amounts in tabular figures. A server composition; it ships no JavaScript.