---
name: "@ikas"
slug: "ikas"
description: "UI components and screen patterns for building apps on ikas."
category: "Animated components"
tags: ["animation", "blocks", "buttons", "cards", "charts", "forms", "loaders", "media", "navigation", "overlays", "tables", "theming"]
framework: "react"
license: null
author: null
website: "https://builders.ikas.com/docs/app-development/ui-kit"
github: null
registry: "https://builders.ikas.com/r/registry.json"
pro: false
pro_url: null
github_stars: null
component_count: 72
generated_at: "2026-10-13T06:38:00.276Z"
---

# @ikas

UI components and screen patterns for building apps on ikas.

## Links

- Website: https://builders.ikas.com/docs/app-development/ui-kit
- Registry JSON: https://builders.ikas.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/ikas
- This file: https://sh4dcn.vercel.app/md/ikas.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://builders.ikas.com/r/registry.json
pnpm dlx shadcn@latest add https://builders.ikas.com/r/registry.json
bunx shadcn@latest add https://builders.ikas.com/r/registry.json
# fetch the raw registry index
curl -s https://builders.ikas.com/r/registry.json
```

## Components (72)

| name | type | description | install |
| --- | --- | --- | --- |
| theme | registry:theme | Light-first neutral theme tokens: surfaces, six-color palette, status colors, radius and elevation. Install first. | `npx shadcn@latest add https://builders.ikas.com/r/theme.json` |
| motion | registry:lib | Shared spring and easing tokens so all animations in the app move the same way. | `npx shadcn@latest add https://builders.ikas.com/r/motion.json` |
| status | registry:lib | Status tint classes (info, success, warning, danger, neutral) for surfaces, text, icons and actions. | `npx shadcn@latest add https://builders.ikas.com/r/status.json` |
| utils | registry:lib | The cn() helper that merges Tailwind class names; used by every component. | `npx shadcn@latest add https://builders.ikas.com/r/utils.json` |
| accordion | registry:ui | Stacked sections that expand one at a time or together, as a list or cards. | `npx shadcn@latest add https://builders.ikas.com/r/accordion.json` |
| alert-dialog | registry:ui | Modal that asks to confirm or cancel an action, with a status-tinted icon. | `npx shadcn@latest add https://builders.ikas.com/r/alert-dialog.json` |
| alert | registry:ui | Plain inline callout in default or destructive style; use Banner for status messages. | `npx shadcn@latest add https://builders.ikas.com/r/alert.json` |
| avatar | registry:ui | Round user or store image with fallback initials, badge, and stacked groups. | `npx shadcn@latest add https://builders.ikas.com/r/avatar.json` |
| badge | registry:ui | Small label for statuses (info, success, warning, danger) or counts, with optional dot. | `npx shadcn@latest add https://builders.ikas.com/r/badge.json` |
| button-group | registry:ui | Joins buttons, inputs or selects into one connected horizontal or vertical group. | `npx shadcn@latest add https://builders.ikas.com/r/button-group.json` |
| button | registry:ui | Button in solid, soft, outline, ghost and link variants, any palette color, loading state. | `npx shadcn@latest add https://builders.ikas.com/r/button.json` |
| calendar | registry:ui | Month grid for picking a day, range or several days; Turkish, Monday first. | `npx shadcn@latest add https://builders.ikas.com/r/calendar.json` |
| card | registry:ui | Raised surface with header, title, description, action, content and footer slots. | `npx shadcn@latest add https://builders.ikas.com/r/card.json` |
| chart | registry:ui | Recharts container, tooltip and legend wired to theme colors; base for the ikas charts. | `npx shadcn@latest add https://builders.ikas.com/r/chart.json` |
| checkbox | registry:ui | Checkbox for on/off choices in forms and table row selection. | `npx shadcn@latest add https://builders.ikas.com/r/checkbox.json` |
| combobox | registry:ui | Searchable select with single or multiple choice, chips and groups; built on Base UI. | `npx shadcn@latest add https://builders.ikas.com/r/combobox.json` |
| dialog | registry:ui | Modal window for focused tasks and confirmations, with header, footer and close button. | `npx shadcn@latest add https://builders.ikas.com/r/dialog.json` |
| drawer | registry:ui | Panel that slides in from an edge and drags closed; suits mobile actions. | `npx shadcn@latest add https://builders.ikas.com/r/drawer.json` |
| dropdown-menu | registry:ui | Menu of actions opened from a button, with groups, checkboxes, radios and submenus. | `npx shadcn@latest add https://builders.ikas.com/r/dropdown-menu.json` |
| field | registry:ui | Form structure: label, description, error and grouping for any input control. | `npx shadcn@latest add https://builders.ikas.com/r/field.json` |
| input-group | registry:ui | Input or textarea with attached addons: icons, text, prefixes and buttons. | `npx shadcn@latest add https://builders.ikas.com/r/input-group.json` |
| input | registry:ui | Single-line text input styled with the theme's inset field surface. | `npx shadcn@latest add https://builders.ikas.com/r/input.json` |
| kbd | registry:ui | Shows keyboard keys and shortcuts, alone or grouped. | `npx shadcn@latest add https://builders.ikas.com/r/kbd.json` |
| label | registry:ui | Accessible text label for form controls. | `npx shadcn@latest add https://builders.ikas.com/r/label.json` |
| popover | registry:ui | Floating panel anchored to a trigger for small forms, pickers or extra details. | `npx shadcn@latest add https://builders.ikas.com/r/popover.json` |
| progress | registry:ui | Thin horizontal bar showing how far a task has progressed. | `npx shadcn@latest add https://builders.ikas.com/r/progress.json` |
| questionnaire | registry:ui | Multi-step form, one question at a time: choices, free text, skip, validation, progress. | `npx shadcn@latest add https://builders.ikas.com/r/questionnaire.json` |
| radio-group | registry:ui | Set of radio buttons for picking exactly one option. | `npx shadcn@latest add https://builders.ikas.com/r/radio-group.json` |
| select | registry:ui | Dropdown for picking one value from a list, with groups and separators. | `npx shadcn@latest add https://builders.ikas.com/r/select.json` |
| separator | registry:ui | Thin horizontal or vertical line that divides content. | `npx shadcn@latest add https://builders.ikas.com/r/separator.json` |
| sheet | registry:ui | Panel that slides in from a screen edge for side tasks and details. | `npx shadcn@latest add https://builders.ikas.com/r/sheet.json` |
| skeleton | registry:ui | Pulsing placeholder block shown while content loads. | `npx shadcn@latest add https://builders.ikas.com/r/skeleton.json` |
| sonner | registry:ui | Toaster for short confirmations: status types, surface or soft variant, optional countdown bar. | `npx shadcn@latest add https://builders.ikas.com/r/sonner.json` |
| spinner | registry:ui | Animated loading indicator for buttons and pending sections. | `npx shadcn@latest add https://builders.ikas.com/r/spinner.json` |
| switch | registry:ui | Toggle switch for settings that turn on or off immediately. | `npx shadcn@latest add https://builders.ikas.com/r/switch.json` |
| table | registry:ui | Basic table building blocks: header, body, rows, cells, footer and caption. | `npx shadcn@latest add https://builders.ikas.com/r/table.json` |
| tabs | registry:ui | Tab list for switching between views of the same screen, in pill or line style. | `npx shadcn@latest add https://builders.ikas.com/r/tabs.json` |
| textarea | registry:ui | Multi-line text input that grows with its content. | `npx shadcn@latest add https://builders.ikas.com/r/textarea.json` |
| tooltip | registry:ui | Short hint shown on hover or keyboard focus of an element. | `npx shadcn@latest add https://builders.ikas.com/r/tooltip.json` |
| wheel-picker | registry:ui | iOS-style picker wheel you drag, flick, scroll or step; groups side by side. | `npx shadcn@latest add https://builders.ikas.com/r/wheel-picker.json` |
| action-bar | registry:component | Icon toolbar whose labels appear on hover or focus; saves room in dense headers. | `npx shadcn@latest add https://builders.ikas.com/r/action-bar.json` |
| animated-check | registry:component | Self-drawing check icon, plus a copy-to-clipboard button that confirms with it. | `npx shadcn@latest add https://builders.ikas.com/r/animated-check.json` |
| animated-number | registry:component | Number that rolls up or down when its value changes. | `npx shadcn@latest add https://builders.ikas.com/r/animated-number.json` |
| area-chart | registry:component | Area or line chart over time, with stacking, legend, tooltip and estimated points. | `npx shadcn@latest add https://builders.ikas.com/r/area-chart.json` |
| banner | registry:component | Persistent message in info, success, warning or danger, with optional actions and dismiss. | `npx shadcn@latest add https://builders.ikas.com/r/banner.json` |
| bar-chart | registry:component | Vertical or horizontal bar chart, grouped or stacked, with hover trace and in-progress bars. | `npx shadcn@latest add https://builders.ikas.com/r/bar-chart.json` |
| bar-list | registry:component | Ranked list of labels with proportional bars and values, e.g. top products. | `npx shadcn@latest add https://builders.ikas.com/r/bar-list.json` |
| chart-card | registry:component | Dashboard chart frame with title, headline value, change and a time range switch. | `npx shadcn@latest add https://builders.ikas.com/r/chart-card.json` |
| chart-kit | registry:component | Shared chart parts: colors, fills, legend, tooltip, loading and reveal used by ikas charts. | `npx shadcn@latest add https://builders.ikas.com/r/chart-kit.json` |
| collapse | registry:component | Animates content open and closed between zero and full height. | `npx shadcn@latest add https://builders.ikas.com/r/collapse.json` |
| confirm-button | registry:component | Two-click inline confirm for destructive actions that do not need a dialog. | `npx shadcn@latest add https://builders.ikas.com/r/confirm-button.json` |
| date-picker | registry:component | Outline button that opens a calendar and shows the picked date as dd.MM.yyyy. | `npx shadcn@latest add https://builders.ikas.com/r/date-picker.json` |
| date-range-picker | registry:component | Date range picker with presets, two months, and Apply and Clear buttons. | `npx shadcn@latest add https://builders.ikas.com/r/date-range-picker.json` |
| date-wheel-picker | registry:component | Day, month and year wheels in one frame, with min and max dates. | `npx shadcn@latest add https://builders.ikas.com/r/date-wheel-picker.json` |
| description-list | registry:component | Label and value pairs for detail pages, side by side or stacked. | `npx shadcn@latest add https://builders.ikas.com/r/description-list.json` |
| donut-chart | registry:component | Donut chart for part-to-whole data, with the total in the center and a legend. | `npx shadcn@latest add https://builders.ikas.com/r/donut-chart.json` |
| empty-state | registry:component | Explains an empty or failed view and offers the next step or a retry. | `npx shadcn@latest add https://builders.ikas.com/r/empty-state.json` |
| expandable-search | registry:component | Search icon that expands into a text input and stays open while filled. | `npx shadcn@latest add https://builders.ikas.com/r/expandable-search.json` |
| launchpad | registry:component | First-run setup steps for the app home; the active step opens with its actions. | `npx shadcn@latest add https://builders.ikas.com/r/launchpad.json` |
| layout | registry:component | Column presets (main-aside, half, third) and numbered SettingsGroup sections for settings screens. | `npx shadcn@latest add https://builders.ikas.com/r/layout.json` |
| meter | registry:component | Usage against a limit as a bar or ring, with warning and danger states. | `npx shadcn@latest add https://builders.ikas.com/r/meter.json` |
| number-stepper | registry:component | Number input with minus and plus buttons; click the value to type it. | `npx shadcn@latest add https://builders.ikas.com/r/number-stepper.json` |
| page | registry:component | Screen wrapper with width presets and a PageHeader with back link, badges and actions. | `npx shadcn@latest add https://builders.ikas.com/r/page.json` |
| record-table | registry:component | Table for lists of records with selection, bulk actions, loading, empty, error and pagination. | `npx shadcn@latest add https://builders.ikas.com/r/record-table.json` |
| script-installer | registry:component | Installs, updates and removes the app's storefront script, one row per storefront. | `npx shadcn@latest add https://builders.ikas.com/r/script-installer.json` |
| segmented-control | registry:component | Pick one of two to five options, as view tabs or a radio choice. | `npx shadcn@latest add https://builders.ikas.com/r/segmented-control.json` |
| setting-row | registry:component | One setting row: title, description and its control aligned right. | `npx shadcn@latest add https://builders.ikas.com/r/setting-row.json` |
| sparkline | registry:component | Tiny trend line without axes for stat cards and table cells. | `npx shadcn@latest add https://builders.ikas.com/r/sparkline.json` |
| stat-card | registry:component | KPI card: label, value and change against the previous period. | `npx shadcn@latest add https://builders.ikas.com/r/stat-card.json` |
| toggle-section | registry:component | Feature section with an on/off switch that reveals its settings when on. | `npx shadcn@latest add https://builders.ikas.com/r/toggle-section.json` |
| unsaved-bar | registry:component | Bar with save and discard that appears while a form has unsaved changes. | `npx shadcn@latest add https://builders.ikas.com/r/unsaved-bar.json` |
| ui-rules | registry:file | ikas-ui.md design rules for AI coding agents; reference it from AGENTS.md or CLAUDE.md. | `npx shadcn@latest add https://builders.ikas.com/r/ui-rules.json` |

## For AI agents

```text
You are adding components from @ikas to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/ikas.md) for the component list.
2. Fetch the machine-readable index: https://builders.ikas.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: ikas).
```