Design system

UI Kit

Name: UI Kit
Brand: SummonIQ
Price: 129.00 USD
Availability: InStock

Production-grade UI primitives kit: themed buttons, dialog primitives, form controls, overlays, and application blocks — all tokenized, accessible, and ready to compose.

Next.js 16React 19TypeScript 5Tailwind v4Radix DialogRadix SlotRadix PopoverRadix SelectRadix TabsFramer Motiontw-animate-csslucide-reactSonner

UI Kit demo

live render

Component library

Primitives documented as production app patterns.

Inputs, Select, Textarea, Checkbox, Radio, Drawer, Dialog, Toast, Reports, and Blocks.

documented

Forms

Overlay

Reports

Work emailops@summoniq.com

CountryUnited States

ValidationReady to submit

Work email

ops@summoniq.com

Size variants

Palette coverage

10 colors

teal

ink

brass

orchid

mint

Drawer + dialog family

6 variants

Report block

sorted

AccountStageARR

AcmeActive$84k

NorthstarReview$47k

Product blocks

Form

Toast

Card

buttons · forms · overlays · reports · blocks

new

component families

palettes

documented examples

60+

button variants

button sizes

Tailwind utilities

100%

What it is

A drop-in UI primitives kit for shipping production product surfaces fast. Twelve component families, ten swappable palettes, sixty-plus documented examples, and a single tokenized design system that you copy into your app instead of pulling in as a heavyweight dependency.

Component families

Buttons — one primitive, ten palettes (brand, teal, cyan, sky, emerald, violet, fuchsia, rose, amber, slate), five variants (solid, outline, soft, ghost, link), six sizes, icon-only states, button groups, split buttons, and floating action surfaces.
Dialog primitives — Modal (center-docked with zoom+slide-from-bottom spring), Drawer (edges in from any side with momentum easing), SlidePanel (right-gutter focused panel), Bottom Sheet, Fullscreen Takeover, Alert, and a multi-step Wizard shell.
Form controls — Inputs with validation, error states, masks, and auto-formatting; selects with searchable + multi-select; textareas with autosize; radio groups; checkboxes; toggle switches; ranges; segmented controls; and a tokenized field/label/help-text pattern.
Feedback — Toasts (Sonner-driven), inline alerts, banner systems, status badges, and skeleton loaders.
Data display — Tables with sort/select/pagination, list rows, definition lists, key-value blocks, and stat cards.
Navigation — Tabs (line + segmented), breadcrumbs, command palettes, popover menus, dropdown menus, and contextual popovers.
Layouts — Shell containers, split panels, sticky toolbars, and responsive grids.
Disclosures — Accordion, collapsible, and expandable card patterns.
Application blocks — Settings, empty states, activity, review, dashboards, filters, onboarding, profile, resources, messages, and commerce blocks — each one wired with state, motion, and tokens so you can drop a real surface, not a starter sketch.
Report controls — Search, filters, sorting, column visibility, row selection, export, refresh, view modes, and pagination running on a mock pipeline dataset.

Theming

Ten palettes share one token contract. Every palette is fully expressed in declared Tailwind utilities — no style={}, no [#hex], no runtime CSS — so Tailwind's JIT keeps your bundle small. Light and dark are token-paired and ship side by side.

Motion

Dialogs use spring-tuned transitions through tw-animate-css + Radix data-state attributes. Drawer momentum, modal zoom-and-slide, bottom-sheet rubber-banding, and overlay fade are all handled with declarative classes — no JS motion library required.

Accessibility

Built on Radix primitives: focus trap, restore-on-close, scroll-locking, keyboard nav, and aria-labeling come built in. Every button, input, and overlay ships with proper roles and focus ring tokens.

What you get

Full TypeScript source for every component family.
A single cn helper, token map, and palette contract — no hidden config.
Documented examples for every variant, size, and state.
Application-block compositions you can paste into a real app.
Light and dark themes paired at the token level.

Highlights

Tokenized button system

Ten palettes, five variants, six sizes, icon-only states, leading/trailing icon slots, button groups, split buttons, loading spinners, and floating action surfaces — all driven by typed props and static Tailwind classes.

Overlay primitives

Modal, drawer, inset drawer, bottom sheet, fullscreen takeover, alert, multi-step wizard, and Sonner-powered toasts — each with focus trap, scroll lock, keyboard nav, and spring-tuned motion.

Documented form controls

Inputs with validation, error states, masks, and auto-formatting; selects (searchable + multi); textareas with autosize; radio groups; checkboxes; toggle switches; ranges; and segmented controls.

Application blocks

Composed surfaces for settings, empty states, activity, review, dashboards, filters, onboarding, profile, resources, messages, and commerce — ready to paste into a real product.

Report controls

A working pipeline-style report with search, filters, multi-sort, column visibility, row selection, export, refresh, view modes, and pagination — wired to mock data so you can wire your API in minutes.

Graceful motion states

Animated checkboxes, radios, textareas, tabs, command palettes, popovers, drawers, and notification surfaces — all driven by declarative Tailwind classes and data-state attributes.

Accessibility by default

Built on Radix primitives: focus trap, restore-on-close, scroll-locking, keyboard nav, screen-reader labeling, and visible focus rings on every interactive surface.

Tables and data display

Sortable, selectable tables with pagination, list rows, definition lists, key-value blocks, and stat cards — all share the same token contract.

Command palette + popovers

Command-K palette with grouped actions and search, plus dropdown menus, contextual popovers, and hover cards built on Radix.

Light + dark themes

Every component ships with a paired light/dark token map. Switch themes with a single class on `<html>` — no JS theme provider required.

Tree-shake friendly

No runtime CSS, no `style={}`, no `[#hex]` arbitrary values. Tailwind's JIT keeps the production bundle lean.

Typed component props

Discriminated unions for palette/variant/size mean misconfigured buttons fail at compile time instead of in production.

Tech stack & dependencies

What the app is built on and what you'll need to run it.

Other

React19required
Component runtime, hooks for overlay state, and Radix slot composition
Tailwind CSSv4required
Token contract, palette system, declarative animation classes, and zero-runtime styling
Radix UIrequired
Accessible dialogs, selects, popovers, tabs, switches, checkboxes, radios, and dropdown menus
Radix Slotrequired
`asChild` polymorphic composition for buttons, links, and form controls
Framer Motionrequired
Tabs, component entrances, overlay motion, and control-state animation
tw-animate-cssrequired
Tailwind animation utilities for dialog spring transitions and overlay states
lucide-reactrequired
Drop-in icon set used across buttons, form controls, and application blocks
Sonneroptional
Toast notification examples and production toast surface
clsxrequired
Conditional class composition used by the `cn` helper that the kit ships with
tailwind-mergerequired
Resolves conflicting Tailwind utilities so palette overrides win predictably

Full breakdown

Button primitive

Ten palettes × five variants × six sizes, plus icon-only, leading/trailing icons, button groups, split buttons, loading states, and FABs

Dialog primitives

Modal, Drawer, SlidePanel, Bottom Sheet, Fullscreen Takeover, Alert, and Wizard — each with focus trap, scroll lock, and motion

Form control suite

Inputs, selects, textareas, radio groups, checkboxes, switches, ranges, segmented controls — all with validation + error states

Tabs and segmented controls

Line tabs, segmented tabs, vertical tabs, and animated underline — driven by Radix Tabs with token-paired styling

Command palette

Command-K menu with grouped actions, keyboard navigation, search filtering, and recent items

Popovers and menus

Dropdown menus, contextual popovers, hover cards, and tooltip primitives

Feedback surfaces

Sonner-powered toast system, inline alerts, banner notifications, status badges, and skeleton loaders

Tables and data display

Sortable + selectable tables, pagination, list rows, definition lists, key-value blocks, and stat cards

Application blocks

Settings, empty states, activity, review, dashboards, filters, onboarding, profile, resources, messages, and commerce — ready to paste

Report controls

Chatterworks-style pipeline report with search, filters, multi-sort, column visibility, export, view modes, and pagination

Palette token contract

Ten palettes (brand, teal, cyan, sky, emerald, violet, fuchsia, rose, amber, slate) expressed in static Tailwind classes

Light + dark theme tokens

Paired backgrounds, borders, text, focus rings, and hover states — switch with a single class on `<html>`

Motion presets

Spring-tuned modal zoom-slide, drawer momentum, bottom-sheet rubber band, popover fade, and overlay scrim — all in `tw-animate-css`

TypeScript prop contracts

Discriminated unions for palette/variant/size, typed Radix slot forwarding, and `cn` helper for class merging

Documented demo page

Single Next.js demo route that exhibits every component family, every variant, and every state — the same surface you saw in the public demo

How it works

Drop the kit into your app

Copy the `components/ui` and `lib` folders into your Next.js or React project. Install the dependency set, register the Tailwind preset, and the palette tokens become available globally.

Pick a palette and variant

Every primitive accepts typed `palette`, `variant`, and `size` props. Misconfigured combinations fail at compile time instead of shipping a broken style.

Compose application blocks

Use the block sections (settings, activity, commerce, messages, onboarding, profile) as starting points for real surfaces — not isolated demos.

Wire feedback and overlays

Mount the Sonner toaster once, then trigger toasts from anywhere. Use Modal / Drawer / SlidePanel for any layered surface — they share focus + scroll behavior.

Theme with a single class

Toggle `dark` on `<html>` to switch the entire kit. Every component reads from the same token contract, so light and dark stay paired automatically.

Code preview

components/ui/button.tsx

import { Slot } from "@radix-ui/react-slot";
import { cn } from "@/lib/cn";
import type { ButtonHTMLAttributes, ReactNode } from "react";

type Palette =
  | "brand" | "teal" | "cyan" | "sky" | "emerald"
  | "violet" | "fuchsia" | "rose" | "amber" | "slate";

type Variant = "solid" | "outline" | "soft" | "ghost" | "link";
type Size = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";

type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
  palette?: Palette;
  variant?: Variant;
  size?: Size;
  asChild?: boolean;
  leadingIcon?: ReactNode;
  trailingIcon?: ReactNode;
  loading?: boolean;
};

const SIZE_CLASSES: Record<Size, string> = {
  xs: "h-7 gap-1 rounded-full px-2.5 text-xs",
  sm: "h-8 gap-1.5 rounded-full px-3 text-sm",
  md: "h-9 gap-2 rounded-full px-4 text-sm",
  lg: "h-10 gap-2 rounded-full px-5 text-sm",
  xl: "h-12 gap-2.5 rounded-full px-6 text-base",
  "2xl": "h-14 gap-3 rounded-full px-8 text-lg",
};

const VARIANT_CLASSES: Record<Palette, Record<Variant, string>> = {
  brand: {
    solid: "bg-brand-500 text-white hover:bg-brand-400 focus-visible:ring-brand-300",
    outline: "border border-brand-500 text-brand-300 hover:bg-brand-500/10",
    soft: "bg-brand-500/10 text-brand-200 hover:bg-brand-500/20",
    ghost: "text-brand-300 hover:bg-brand-500/10",
    link: "text-brand-300 underline-offset-4 hover:underline",
  },
  // …the other nine palettes share the same shape.
} as Record<Palette, Record<Variant, string>>;

export function Button({
  palette = "brand",
  variant = "solid",
  size = "md",
  asChild = false,
  className,
  leadingIcon,
  trailingIcon,
  loading,
  children,
  ...props
}: ButtonProps) {
  const Comp = asChild ? Slot : "button";
  return (
    <Comp
      className={cn(
        "inline-flex items-center justify-center font-semibold transition",
        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
        "disabled:cursor-not-allowed disabled:opacity-50",
        SIZE_CLASSES[size],
        VARIANT_CLASSES[palette][variant],
        className,
      )}
      data-loading={loading || undefined}
      {...props}
    >
      {leadingIcon}
      {children}
      {trailingIcon}
    </Comp>
  );
}

FAQ

No. It started as a button and dialog kit, but the current demo includes form controls, feedback, data display, navigation, layouts, disclosures, application patterns, blocks, and report controls.

Need this customized?

We can adapt this for your stack, brand, or unique requirements. Most customizations ship in under a week.