@ikas

Light-first neutral theme tokens: surfaces, six-color palette, status colors, radius and elevation. Install first.

Shared spring and easing tokens so all animations in the app move the same way.

Status tint classes (info, success, warning, danger, neutral) for surfaces, text, icons and actions.

The cn() helper that merges Tailwind class names; used by every component.

Stacked sections that expand one at a time or together, as a list or cards.

Modal that asks to confirm or cancel an action, with a status-tinted icon.

Plain inline callout in default or destructive style; use Banner for status messages.

Round user or store image with fallback initials, badge, and stacked groups.

Small label for statuses (info, success, warning, danger) or counts, with optional dot.

Joins buttons, inputs or selects into one connected horizontal or vertical group.

Button in solid, soft, outline, ghost and link variants, any palette color, loading state.

Month grid for picking a day, range or several days; Turkish, Monday first.

Raised surface with header, title, description, action, content and footer slots.

Recharts container, tooltip and legend wired to theme colors; base for the ikas charts.

Checkbox for on/off choices in forms and table row selection.

Searchable select with single or multiple choice, chips and groups; built on Base UI.

Modal window for focused tasks and confirmations, with header, footer and close button.

Panel that slides in from an edge and drags closed; suits mobile actions.

Menu of actions opened from a button, with groups, checkboxes, radios and submenus.

Form structure: label, description, error and grouping for any input control.

Input or textarea with attached addons: icons, text, prefixes and buttons.

Single-line text input styled with the theme's inset field surface.

Shows keyboard keys and shortcuts, alone or grouped.

Accessible text label for form controls.

Floating panel anchored to a trigger for small forms, pickers or extra details.

Thin horizontal bar showing how far a task has progressed.

Multi-step form, one question at a time: choices, free text, skip, validation, progress.

Set of radio buttons for picking exactly one option.

Dropdown for picking one value from a list, with groups and separators.

Thin horizontal or vertical line that divides content.

Panel that slides in from a screen edge for side tasks and details.

Pulsing placeholder block shown while content loads.

Toaster for short confirmations: status types, surface or soft variant, optional countdown bar.

Animated loading indicator for buttons and pending sections.

Toggle switch for settings that turn on or off immediately.

Basic table building blocks: header, body, rows, cells, footer and caption.

Tab list for switching between views of the same screen, in pill or line style.

Multi-line text input that grows with its content.

Short hint shown on hover or keyboard focus of an element.

iOS-style picker wheel you drag, flick, scroll or step; groups side by side.

Icon toolbar whose labels appear on hover or focus; saves room in dense headers.

Self-drawing check icon, plus a copy-to-clipboard button that confirms with it.

Number that rolls up or down when its value changes.

Area or line chart over time, with stacking, legend, tooltip and estimated points.

Persistent message in info, success, warning or danger, with optional actions and dismiss.

Vertical or horizontal bar chart, grouped or stacked, with hover trace and in-progress bars.

Ranked list of labels with proportional bars and values, e.g. top products.

Dashboard chart frame with title, headline value, change and a time range switch.

Shared chart parts: colors, fills, legend, tooltip, loading and reveal used by ikas charts.

Animates content open and closed between zero and full height.

Two-click inline confirm for destructive actions that do not need a dialog.

Outline button that opens a calendar and shows the picked date as dd.MM.yyyy.

Date range picker with presets, two months, and Apply and Clear buttons.

Day, month and year wheels in one frame, with min and max dates.

Label and value pairs for detail pages, side by side or stacked.

Donut chart for part-to-whole data, with the total in the center and a legend.

Explains an empty or failed view and offers the next step or a retry.

Search icon that expands into a text input and stays open while filled.

First-run setup steps for the app home; the active step opens with its actions.

Column presets (main-aside, half, third) and numbered SettingsGroup sections for settings screens.

Usage against a limit as a bar or ring, with warning and danger states.

Number input with minus and plus buttons; click the value to type it.

Screen wrapper with width presets and a PageHeader with back link, badges and actions.

Table for lists of records with selection, bulk actions, loading, empty, error and pagination.

Installs, updates and removes the app's storefront script, one row per storefront.

Pick one of two to five options, as view tabs or a radio choice.

One setting row: title, description and its control aligned right.

Tiny trend line without axes for stat cards and table cells.

KPI card: label, value and change against the previous period.

Feature section with an on/off switch that reveals its settings when on.

Bar with save and discard that appears while a form has unsaved changes.

ikas-ui.md design rules for AI coding agents; reference it from AGENTS.md or CLAUDE.md.