ZikZuk UI components
Stripe-inspired React components for dashboards that handle money: setup flows, record pages, meters, sparklines and the quiet details between them. Tailwind CSS v4 and Base UI underneath.
Providers
Connect an SMS provider
In progress
Credentials
Paste the API key from the provider's panel.
Stripe has a component for that. So do we.
Each one stands in for its Stripe Apps counterpart, with the same name where it can, so a familiar pattern is always the first thing to reach for.
- Stripe TaskListTaskListSteps toward one outcome, with Stripe's four statuses.
- Stripe OnboardingViewOnboardingViewTasks on the left, the selected task on the right.
- Stripe FocusViewFocusViewOne task in a panel from the right, with a sticky footer.
- Stripe OverviewPage + PageModuleOverviewPageA feature's landing page in one or two columns.
- Stripe DetailPageDetailLayoutA record's page: a sticky summary pane and a working pane.
- Stripe FullPageView headerPageHeaderA page's title, description and its one primary action.
- Stripe PageModule / AccordionSectionA heading, a count, text-link actions and a hairline.
- Stripe TabsPaneTabsLine tabs with a sliding underline and actions at the row's end.
- Stripe MeterChartMeterA stacked bar with a legend: usage against a limit, or a whole in parts.
- Stripe SparklineSparklineA tiny trend line with no axes and no chart library.
- Stripe CodeCodeBlockPayloads and keys in mono, with Copy and Show/Hide.
- Stripe ListListHairline rows: title left, value right, the row opens its page.
- Stripe Spinner (instead of)SkeletonLoading shapes that match the page, then content that rises in.
- Stripe Spinner (instead of)ShimmeringText“Saving…” with a light band running through it.
- Stripe BadgeStatusPillA state as a badge: light fill, dark ink, always a word.
- Stripe BannerBannerA message about the page, with what to do next.
- Stripe ToastToastOne short line at the bottom: it worked, or it didn't.
- Stripe ButtonGroupButtonGroupTwo or three joined peers: actions, or a segmented choice.
- Stripe DateFieldDateFieldOne date, from the kit's calendar — never the native picker.
- Stripe FormFieldGroupFormFieldGroupFields that are one answer, under one legend.
- Stripe CurrencyFieldCurrencyInputA money field: ₹ on the baseline, groups on blur.
- Stripe SearchFieldSearchInputA boxed list search, the height of the filter buttons.
- Stripe DateRangePickerDateRangeFilterDate presets and a custom range for a list.
- Stripe ChipActiveFiltersThe filters in force, as removable chips.
- Stripe ButtonButtonTeal primary, outline, ghost, link and destructive.
Small pieces, real behaviour
Every tile is the component itself. Press things.
- Top-ups
- 45
SMS this month6,500 of 10,000 · 65%
Drag past 70% and 90%.
ApprovedIn reviewNeeds actionRejectedDisabled
OwnerAdminNew+9.4%SMS
Turn on wallets first
A wallet needs the wallet feature on this account.
••••••••••••a1b2Three lines to start
Install the package, import its stylesheet after Tailwind, wrap the app in KitProvider.