Krizaka UI
Krizaka UI
Composants

Fondations

Vous venez ici pour ce dont tout écran est fait : le thème, l'aide aux classes, le mouvement, le routeur et les primitives de base — bouton, badge, carte, pastille, squelette.

Règle du responsable
Modifié seulement avec deux produits consommateurs en tête, et stable d'abord.
Budget de taille
115.0 kB gzip pour tout le domaine ; il ne fait que baisser.

Entrées

24 entrées, dont 17 utilisées par des produits et sites en production.

  • BadgeA short status or label: a tone, two sizes, an optional dot that can pulse.126 fichiers l'importent
  • ButtonThe action: six looks, three sizes, two shapes (an 8 px radius, the pill) — and the whole life of an action built in: a wait traced by the loader glyph, its progress, a success or a failure drawn and announced.258 fichiers l'importent
  • CardThe composed chassis of every card: a media with overlays, a body with a title, a description, stats and a footer.95 fichiers l'importent
  • cnJoins class names and resolves Tailwind conflicts: the last class wins.49 fichiers l'importent
  • KbdA key or a keyboard shortcut, set as keys: one Kbd per key.8 fichiers l'importent
  • SeparatorA line between groups of content, horizontal or vertical, decorative by default.2 fichiers l'importent
  • SkeletonA placeholder the shape of what is loading — lines, circles, blocks, or the real component turned into its own skeleton (SkeletonShape) — crossed by one reflection of the brand light.6 fichiers l'importent
  • Skip linkThe first tab stop of a page: a link that skips the navigation and lands on the content — hidden until it is focused.5 fichiers l'importent
  • SlotSlot merges its props and classes into its only child — the engine of asChild — and VisuallyHidden names things for screen readers only.
  • SpinnerThe Krizaka spinner: light traced around a hexagon, its node breathing — indeterminate, or growing to a value; still and legible under reduced motion.4 fichiers l'importent
  • ThemeDark, light or the system's: ThemeProvider, ThemeScript against the flash, and ThemeToggle.62 fichiers l'importent
  • ChipBêtaA selectable pill: alone a toggle, in a group a single or multiple choice, or a removable tag. Also the tags of a workspace: TagChip, with a colour marker from the closed palette.21 fichiers l'importent
  • Chip linkBêtaA chip that is a link — a filter that is an address — with the look of Chip, the current one marked, and chipVariants to style anything else; server-safe.11 fichiers l'importent
  • Chip rowBêtaA row of chip links that scrolls sideways with scroll-snap on a phone (the edge fades) and wraps from md: an audience picker, a page's filters.
  • Copy buttonBêtaA button that copies a value, says “Copied” in a live region, and falls back to a selected field when the clipboard is unavailable.1 fichiers l'importent
  • Floating action buttonBêtaThe screen's one main action, floating above the content in the accent, clear of the safe area and the tab bar.
  • IsoBêtaThe isometric kit: luminous objects built from the Krizaka vocabulary (hexagons, cut corners, the node) on a perspective grid — a hero driven by data (IsoHub) or composed from primitives.
  • LoaderBêtaA wait from start to end: nothing for the first instants, then the Krizaka glyph with its words, a percentage and an ETA, held long enough to read, ending on a check or a cross that is drawn and announced — and LoadingRegion, which hands a region over to a skeleton of its shape.5 fichiers l'importent
  • MascotsBêtaThe Krizaka flock: nine figures (falcon, owl, duck, flamingo, pigeon, lovebird, crane, magpie — and the beaver) in five moods, drawn in the product's brand colours — and the phoenix, the comeback.42 fichiers l'importent
  • RecipesBêtaThe variants of a component written once, as classes of the Krizaka tokens: the web wears them with tv(recipe), React Native reads the same classes into styles on the theme's roles with nativeRecipe(recipe).resolve(props, theme). Button, Badge, Chip and Card are built this way, so the two platforms cannot name different tokens.
  • Route stateBêtaThe URL is the state: useRouteState keeps a selection (a tab, a type, a filter) in a search parameter, and Tabs, Chip.Group and ChoiceGrid bind to it with routeKey.4 fichiers l'importent
  • SitesBêtaThe Krizaka family as data: every site (the company, the products, the open-source projects, GitHub) with its address, kind, status, mark and repository, and the family's words in English and French — read by the bar's family switcher and the common footer.18 fichiers l'importent
  • Text styleBêtaThe look of one text role chosen by a person — font, size, weight, spacing, alignment, case, italic and tone — as a plain value the app stores, a live preview, and the same value drawn safely by StyledText.
  • TxtBêtaText in the platform's type scale, coloured by a role of the current theme.

Sur cette page