ASK UI

Setup

1. In a project already set up with shadcn, add the registry namespace:
   pnpm dlx shadcn@latest registry add @ask-ui=https://ui.ask.mir-ai.it/r/{name}.json Copy
2. Replace the index.css generated by the shadcn CLI with this repo's src/global.css for ASK theming.
3. Add components with the command on each card below.

Components 26

• Alert Dialog

  alert-dialog.json

  A modal alert dialog for confirming important or destructive actions.

  pnpm dlx shadcn@latest add @ask-ui/alert-dialog Copy

  npm

  @base-ui/react

  uses

  utilsbutton

• Avatar

  avatar.json

  An avatar with image, fallback and badge parts, plus grouped stacking with an overflow count.

  pnpm dlx shadcn@latest add @ask-ui/avatar Copy

  npm

  @base-ui/react

  uses

  utils

• Badge

  badge.json

  A small status badge with color variants and two sizes.

  pnpm dlx shadcn@latest add @ask-ui/badge Copy

  npm

  @base-ui/reactclass-variance-authority

  uses

  utils

• Button

  button.json

  A simple button component.

  pnpm dlx shadcn@latest add @ask-ui/button Copy

  npm

  @base-ui/reactclass-variance-authority

  uses

  utils

• Button Group

  button-group.json

  Groups related buttons into a connected horizontal or vertical segment, with optional text and separators.

  pnpm dlx shadcn@latest add @ask-ui/button-group Copy

  npm

  @base-ui/reactclass-variance-authority

  uses

  utilsseparator

• Card

  card.json

  A content container with header, title, description, action, content and footer parts.

  pnpm dlx shadcn@latest add @ask-ui/card Copy

  uses

  utils

• Checkbox

  checkbox.json

  An accessible checkbox control.

  pnpm dlx shadcn@latest add @ask-ui/checkbox Copy

  npm

  @base-ui/reactlucide-react

  uses

  utils

• Combobox

  combobox.json

  A searchable, filterable picker with optional multi-select chips.

  pnpm dlx shadcn@latest add @ask-ui/combobox Copy

  npm

  @base-ui/reactlucide-react

  uses

  utilsbuttoninput-group

• Dialog

  dialog.json

  A modal dialog with header, footer, title, description and close parts.

  pnpm dlx shadcn@latest add @ask-ui/dialog Copy

  npm

  @base-ui/reactlucide-react

  uses

  utilsbutton

• Field

  field.json

  Composable form field primitives: label, description, error, fieldset, and grouping.

  pnpm dlx shadcn@latest add @ask-ui/field Copy

  npm

  class-variance-authority

  uses

  utilslabelseparator

• Input

  input.json

  A styled text input.

  pnpm dlx shadcn@latest add @ask-ui/input Copy

  npm

  @base-ui/reactlucide-react

  uses

  utils

• Input Group

  input-group.json

  Groups an input or textarea with addons (icons, text, buttons) sharing one bordered container.

  pnpm dlx shadcn@latest add @ask-ui/input-group Copy

  npm

  class-variance-authority

  uses

  utilsbuttoninputtextarea

• Item

  item.json

  A flexible list-row primitive: media, title/description, and actions.

  pnpm dlx shadcn@latest add @ask-ui/item Copy

  npm

  @base-ui/reactclass-variance-authority

  uses

  utilsseparator

• Label

  label.json

  An accessible label component for form controls.

  pnpm dlx shadcn@latest add @ask-ui/label Copy

  uses

  utils

• List

  list.json

  A styled list with ordered and unordered variants.

  pnpm dlx shadcn@latest add @ask-ui/list Copy

  npm

  class-variance-authority

  uses

  utils

• Progress

  progress.json

  A progress bar component with color and size variants and an optional shimmer animation.

  pnpm dlx shadcn@latest add @ask-ui/progress Copy

  npm

  @base-ui/react

  uses

  utils

• Select

  select.json

  A select component for picking a value from a dropdown list of options.

  pnpm dlx shadcn@latest add @ask-ui/select Copy

  npm

  @base-ui/reactlucide-react

  uses

  utils

• Separator

  separator.json

  A simple styled separator to visually or semantically separate content.

  pnpm dlx shadcn@latest add @ask-ui/separator Copy

  npm

  @base-ui/react

  uses

  utils

• Skeleton

  skeleton.json

  A skeleton placeholder component with shape variants.

  pnpm dlx shadcn@latest add @ask-ui/skeleton Copy

  npm

  class-variance-authority

  uses

  utils

• Table

  table.json

  A responsive table primitive with header, body, footer, row and caption parts.

  pnpm dlx shadcn@latest add @ask-ui/table Copy

  uses

  utils

• Tabs

  tabs.json

  A tabbed interface with default, primary, and line variants.

  pnpm dlx shadcn@latest add @ask-ui/tabs Copy

  npm

  @base-ui/reactclass-variance-authority

  uses

  utils

• Textarea

  textarea.json

  A styled multi-line text input.

  pnpm dlx shadcn@latest add @ask-ui/textarea Copy

  uses

  utils

• Toast

  toast.json

  A toast notification system with a drop-in Toaster outlet and an imperative toast manager.

  pnpm dlx shadcn@latest add @ask-ui/toast Copy

  npm

  @base-ui/reactlucide-react

  uses

  utilsbutton

• Toggle

  toggle.json

  A two-state pressable button with default and primary variants.

  pnpm dlx shadcn@latest add @ask-ui/toggle Copy

  npm

  @base-ui/reactclass-variance-authority

  uses

  utils

• Tooltip

  tooltip.json

  A light-themed tooltip popup shown on hover or focus.

  pnpm dlx shadcn@latest add @ask-ui/tooltip Copy

  npm

  @base-ui/react

  uses

  utils

• Typography

  typography.json

  A single text component that renders headings, paragraphs and other text variants with matching styles.

  pnpm dlx shadcn@latest add @ask-ui/typography Copy

  npm

  class-variance-authority

  uses

  utils

Libraries 1

• Utils

  utils.json

  A simple utilities file.

  pnpm dlx shadcn@latest add @ask-ui/utils Copy

  npm

  clsxtailwind-merge