0
luv-jeri/cojeev-ui
AccordionaccordionOrganizes related sections into expandable panels so readers can open the details they need.
Accordion Galleryaccordion-galleryA selected image panel opens to reveal its label, story and action.
Action dockaction-dockA reusable action dock composed from Cojeev base components.
Activity feedactivity-feedAn ordered, date-grouped history with a quiet connecting margin, readable actors and timestamps, and updates that keep your place.
Motion AdjusteradjusterProvides live controls for the shared motion settings and editable body profiles used across the library.
Agent chatagent-chatA composable agent conversation with a bounded thread, draft composer, attachments, progress, explicit permissions and choice prompts.
Agent stateagent-stateA sculpted, living status field that changes contour and color as an agent thinks, works, asks for input, or finishes.
AlertalertAn authored note, attached-action banner or folded dispatch that makes the message and its next step clear.
Alert Dialogalert-dialogPauses a workflow for a focused confirmation before a consequential action proceeds.
Ambient backgroundambient-backgroundAdds a quiet animated composition around content, with decorative shapes kept behind a readable surface.
Animated iconanimated-iconReplayable micro-interactions for the full Cojeev icon library, with semantic motion families and optional visual treatments.
Animated numberanimated-numberA smooth, interruptible number transition for totals, metrics and small moments of progress.
AppearanceappearanceChoose from six coordinated palettes and adjust reading contrast across the application.
Area chartarea-chartLayered area charts with shared series colors, responsive bounds and a keyboard data inspector.
Article Headingsarticle-headingsSemantic article headings resolve through a brief, grapheme-safe noise frontier.
Aspect Ratioaspect-ratioKeeps a media container at a chosen width-to-height ratio as its available width changes.
Assembly partassembly-partA persistent native component moving between a floating organism and its measured layout.
AttachmentattachmentPresents a file name, type, metadata, and nearby actions as a compact attachment row.
AvataravatarPortraits, identity rows and participant groups that keep the person recognizable—with artwork, initials and independent shape choices.
BadgebadgeStamp a review state, attach a filing tag or count a collection. Three compact treatments with one clear meaning in text.
Bar chartbar-chartCompare series with grouped, stacked or horizontal bars and a shared interactive tooltip.
Bento Builderbento-builderAn editable Bento canvas with complete partitions, content swapping, snapped neighbor resizing, history and usable layout export.
Bento Gridbento-gridA complete canvas of rounded cards or organically interlocking pieces. Compose a layout, then install just the lightweight renderer.
BreadcrumbbreadcrumbFind your place with a complete trail, a pocket-sized ancestor menu or a connected directory path.
BubblebubbleGroups conversational content and timestamps into visually distinct message bubbles.
ButtonbuttonTriggers an action with native button behavior and an optional busy indicator.
Button Groupbutton-groupPlaces related actions together and can track one selected button value.
Buy Me Coffeebuy-me-coffeeA support poster reveals an inviting cup illustration and a real caller destination.
CalendarcalendarChoose one appointment day, a continuous date range, or separate days in an accessible month grid.
CardcardGroups related content, metadata, and actions into a distinct surface.
Caret Swapcaret-swapA colored caret block consumes a phrase before typing its replacement in whole graphemes.
CarouselcarouselBrowse a peeking shelf, a full reading spread or a miniature index of ideas, with native scrolling and a shared organic scrollbar.
ChartchartCompose an understandable chart from a frame, labelled series, inspectable plot and accessible values.
Dynamic chart tooltipchart-tooltipCompare a point, read its known subtotal or rank its series. Values update in place and keep their series colours.
CheckboxcheckboxCaptures an independent checked, unchecked, or indeterminate choice.
Click Sparkclick-sparkA finite spray of accent marks responds to a real activation.
Code blockcode-blockDisplays a code snippet with an optional caption, language label, wrapping, and copy feedback.
CollapsiblecollapsibleShows or hides one optional section without leaving the surrounding layout.
ComboboxcomboboxFilters a list of options through text input and stores one selected value.
CommandcommandBuilds a searchable command list that users can navigate and activate from the keyboard.
Compact dashboardcompact-dashboardHistorical compatibility alias for WorkSidePanel; use the dedicated panel composition in new work.
Context Menucontext-menuReveals contextual actions for a target through a context-menu interaction.
Contour fieldcontour-fieldOriginal topographic lines on the inherited paper surface, with a bounded GPU renderer.
Contours backgroundcontours-backgroundNested organic contour lines with generous space between islands.
Conversation panelconversation-panelA reusable conversation panel composed from Cojeev base components.
Data Tabledata-tableDisplays records with client-side filtering, sortable columns, and paginated rows.
Date Pickerdate-pickerChoose one day, a range, or multiple dates from a labelled field and calendar popover.
Depth backgrounddepth-backgroundLayered pollen, contours and orbital shapes with perspective, native-scroll depth and pointer response.
DialogdialogA decision slip, focused editor or illustrated exhibit. Give one task your attention without losing your place.
DirectiondirectionSets a text direction for a subtree and shares it with direction-aware primitives.
Dither Dissolvedither-dissolveCaller scenes exchange beneath a deterministic ordered dither cover.
Dither sculpturedither-sculptureDepth-tested sculptural forms printed as ordered dots, halftone, error diffusion or stipple.
DockdockA compact workspace launcher with a magnifying glass bar, raised shelf and labelled vertical rail.
Dots backgrounddots-backgroundAn evenly spaced field of fine points for quiet, familiar structure.
DrawerdrawerPresents dialog content in a drawer surface while keeping the current page underneath.
Dropdown Menudropdown-menuOpens a compact menu of actions or stateful choices from a visible trigger.
DropzonedropzoneCollects local files through drag and drop or a native file picker and reports the selection.
Elastic Meshelastic-meshA triangulated printed sheet stretches toward the pointer and springs home.
EmptyemptyExplains an empty collection or unavailable result and creates space for a useful next step.
Falling Textfalling-textMeasured word rectangles fall, collide and settle inside a bounded stage.
FieldfieldConnects a form control with its label, description, and validation message.
Float layerfloat-layerAn entrance, scroll depth and gentle idle movement for a real component or a group of elements.
Flow sculptureflow-sculptureA rendered form responds to pointer strokes through a fluid distortion field.
Focus sessionfocus-sessionA local focus timer composed from Cojeev cards, progress, badges and native controls.
Folds backgroundfolds-backgroundQuiet faceted planes inspired by folded paper, without busy linework.
Ghost Cursorghost-cursorA translucent ink impression follows a local pointer with soft inertia.
Glass sculptureglass-sculptureTranslucent geometry bends an original patterned studio through a softly lit glass surface.
Glyph sculptureglyph-sculptureA real 3D surface drawn with glyphs, optional contour marks and your own local geometry.
Grain Dissolvegrain-dissolveCaller scenes dissolve through a grainy pigment field with a soft focus exchange.
Grid backgroundgrid-backgroundHairline rules that give canvases and working surfaces a gentle rhythm.
Guided pointerguided-pointerAn illustrated pointer moves between story waypoints, with a small arrival or hold cue.
Hero buttonhero-buttonTwelve tactile calls to action: living ink, paper, keys, tickets and small moments of motion around one native button.
Hover Cardhover-cardA person, an excerpt or a small visual study—three considered previews, close to the thing you are exploring.
Icon libraryicon1,722 icon names with Cojeev micro-interactions, outline, duotone and organic treatments, built on Lucide geometry.
Image Maskingimage-maskingCaller images are framed by original Cojeev silhouettes using CSS masks or SVG clip paths.
Image Trailimage-trailDistance-triggered image impressions follow the pointer and fade away.
Infinite Spiralinfinite-spiralHelical image cards recycle through depth with explicit previous, next and pause controls.
Ink sculptureink-sculptureHatched and engraved marks follow the light and relief of a 3D form.
InputinputCollects a single-line value through a native input with optional composed affixes and clearing controls.
Input Groupinput-groupCombines a text control with adjacent prefixes, suffixes, or actions in one input surface.
Input OTPinput-otpPresents a single code input as a sequence of visible character slots.
Invite cardinvite-cardAn event invitation with participant avatars and a reversible local RSVP, composed from Cojeev primitives.
ItemitemA notebook ledger, an illustrated collection or an actionable detail. Three readable arrangements for the things you want to keep together.
Item adornmentitem-adornmentColoured organic shapes for list items, with deterministic automatic selection and custom icon or no-icon options.
KbdkbdFormats a key or key combination as a recognizable keyboard instruction.
LabellabelProvides a native form label plus compact stat-label primitives for named values.
Line chartline-chartTrack changes using linear, smooth or step lines with accessible point inspection.
Linear Modallinear-modalFollow a card, image and title into a full detail, then back. Card, Centered and browsable Gallery preserve the reference's shared-layout journey.
Living linkliving-linkA native link with a drawn ink contour, directional underline reveals, or an organic pigment wash.
Magic Ringsmagic-ringsOpen concentric rings expand in Cojeev colors and respond to pointer position.
MarkermarkerSeparates or annotates a sequence with a short event, status, or time label.
MarqueemarqueeA measured moving list with optional perspective and a rhythm that follows scrolling.
MenubarmenubarGroups application commands into a horizontal row of keyboard-navigable menus.
MessagemessageStructures a conversational or activity entry with a main content area and supporting description.
Message Scrollermessage-scrollerKeeps a conversation near its latest content while allowing readers to scroll back without being pulled down.
Meta Ballsmeta-ballsMoving scalar-field bodies merge and separate through liquid contours.
Milestone pathmilestone-pathFollow caller-owned progress as a connected Journey, a scrollable Sequence or a compact checkpoint Review.
Motion Drawermotion-drawerA reference-faithful edge drawer, floating quick panel, layered workspace and bottom action tray.
Multi-selectmulti-selectSearchable multiple choices with removable selections, form values and clear validation.
Native Selectnative-selectUses the browser’s native select control to choose from a compact list of options.
Navigation Menunavigation-menuOrganizes destination links and optional expandable navigation panels.
Number inputnumber-inputA number field with readable formatting, a native editing caret and expressive stepping.
Option Wheeloption-wheelA paper dial, aligned reel or compact readout for choosing one direction with pointer, wheel or keyboard.
Orbit Imagesorbit-imagesAn orbit of supplied images frames stationary content.
Organism assemblyorganism-assemblyAn interactive studio that gathers floating shapes into six reusable compositions.
Organism compositionorganism-compositionSix useful compositions made from persistent Cojeev base components, with organic assembly and native controls.
PaginationpaginationLets users move between numbered pages and see their current position.
Particle sculptureparticle-sculptureA cloud sampled from a real surface yields to the pointer and springs back into form.
Particle Textparticle-textParticles sampled from real glyph pixels gather into a readable phrase and repel the local pointer.
Pattern backgroundpattern-backgroundEight distinct, lightweight backgrounds behind content, with a plain option and adjustable spacing, color and strength.
Pebbles backgroundpebbles-backgroundSparse, softly irregular pebble outlines distributed across the surface.
Pie chartpie-chartShow proportions using themed pie and donut layouts, with readable totals and segment inspection.
Pigment fieldpigment-fieldAn original GPU pigment wash using the current Cojeev palette.
Pixel Swappixel-swapA staggered tile mask exchanges two compositions without duplicating their interactive content.
PopoverpopoverPlaces a dismissible panel next to a trigger for a small contextual task or set of controls.
Portal Fieldportal-fieldAn organically warped luminous halo with a soft chromatic fringe behind real content.
PresencepresenceMotionPresence keeps keyed children mounted for their exits. MotionSurface adds coordinated lifecycle states to an existing primitive.
Component previewpreviewPairs a live component example with a code view and a copy action.
Profile cardprofile-cardA reusable profile card composed from Cojeev base components.
ProgressprogressOne measured amount, explained as an inline task, a small report or connected milestones—with independent organic track geometry.
QuestionnairequestionnaireA little guided brief: open questions, a focused journey or a two-column worksheet with living choice marks and honest completion progress.
Radar chartradar-chartCompare several dimensions with a shared radar scale and contextual series highlighting.
Radial chartradial-chartShow progress against a shared maximum using full rings or semicircles.
Radio groupradio-groupLets users select one option from a labeled set of mutually exclusive choices.
Reading trailreading-trailKeep your place with a connected spine, an expandable bookmark or a descriptive chapter overview—all following actual reading progress.
ResizableresizableDivides a region into panels whose relative sizes can be adjusted with a separator.
Ripple Distortionripple-distortionPointer impulses send expanding waves through a textured print.
Scroll Areascroll-areaContains overflowing content in a bounded viewport with styled scrollbars.
Scroll Expandscroll-expandA framed composition opens as native scroll or controlled progress advances.
Scroll organismscroll-organismA softly stretching companion driven by native document scrolling.
Scroll Revealscroll-revealNative scroll progress resolves word opacity and blur while leveling the phrase.
Sculpture orbitsculpture-orbitA shared sculpture viewer with pointer rotation, touch-friendly navigation and complete keyboard controls.
SelectselectOpens a list of options from a trigger and stores one selected value.
Semantic bloomsemantic-bloomA living wordmark whose particles wander, connect and gather into a liquid organism. Adapted from ThreeUI with Cojeev colors and motion controls.
SeparatorseparatorDivides adjacent content with a horizontal or vertical rule.
Shape studioshapeOne shape studio: twelve compatible living contours, layered artwork and the complete original mask inventory. Compose it here, then take the SVG or React code.
Shape artworkshape-artworkAn original SVG silhouette with a cast shadow and a rotated rear outline. The same vector layers power its live preview and standalone SVG export.
Shape sceneshape-sceneA tactile 3D composition made from Cojeev shapes, with a static fallback and motion preferences built in.
SheetsheetOpens a side surface for focused secondary content while the current page remains in place.
SidebarsidebarA paper folio, a readable compact index and a motion drawer. Three calm ways to keep the same workspace within reach.
SkeletonskeletonGive unavailable content a useful outline: a reading page, a person or a board of ideas, with three quiet-safe paint effects.
SlidersliderAdjusts one or more numeric values by moving labeled thumbs along a track.
LoadingspinnerThree indeterminate signals: a morphing Bloom, gathering Orbit or handing-off Relay. The original small seed stays the default.
Sprouts backgroundsprouts-backgroundSmall paired leaves and seed-like marks with plenty of open space.
StepperstepperMove a real draft through connected stages, a descriptive checkpoint ledger or a focused current-step workspace.
StrandsstrandsA bundle of colored ribbons moves through a bounded sine field.
Sunwash backgroundsunwash-backgroundBroad, soft pools of color that leave the content in focus.
SwapyswapyCards swap positions through a drag handle or keyboard controls and retain their order in React state.
Swarm Cursorswarm-cursorA local flock of colored seeds follows the pointer and scatters on activation.
SwitchswitchTurns a named binary setting on or off.
TablestableScan a compact ledger, explore detailed records or compare them side by side. One Tables guide for native parts and the composed DataTable.
TabstabsSwitches between related content panels while keeping the available views visible.
Target Cursortarget-cursorLocal corner brackets follow real controls on hover and keyboard focus.
Text revealtext-revealReadable word, grapheme, phrase or measured-line arrivals with soft focus, fold and organic scale choices.
Text ribbontext-ribbonA measured phrase follows six original SVG paths, with direct manipulation and gentle changes of pace.
TextareatextareaCollects multiline text and offers composer and character-count parts for longer input.
Theme toggletheme-toggleA controlled light/dark switch with a morphing sun and moon and a smooth organic page reveal.
ToasttoastReports a brief outcome in a notification area without moving the user away from the current task.
ToggletoggleA small action with a lasting state: a toolbar tool, a paper bookmark or a descriptive preference. Native targets stay put while the painted surface responds.
Toggle Grouptoggle-groupGroups pressable choices that can allow one or several selected values.
TooltiptooltipPrecise ink callouts, useful keyboard hints and small paper annotations. Short explanations that appear where attention already is.
TreetreeA controlled branch ledger for supplied hierarchical data, with separate disclosure, selection and trailing actions.
TypographytypographyProvides text roles for headings, body copy, metadata, values, and identifiers.
Typography Vortextypography-vortexNested rotating glyph rings with a local dissolution lens and a finite suction pulse.
Variable Proximityvariable-proximityPointer distance changes the real variable-font weight of individual graphemes.
Warp Textwarp-textRendered text deforms through a slowly changing noise displacement.
Wave Wipewave-wipeAn organic wave rises across caller content to reveal the next scene.
Weave backgroundweave-backgroundInterlaced thread-like strokes with visible over-and-under crossings.
Word relayword-relayExchanges phrases, words or letters inside a stable wrapping footprint, with interruptible motion and explicit navigation.
Word Streamword-streamPhrases build word by word, drift left and run out before the final phrase holds.
Work side panelwork-side-panelA reusable work side panel composed from Cojeev base components.
Writing caretwriting-caretA quiet writing mark with a short, deliberate blink sequence.
Zoom Wordszoom-wordsAn enlarged camera follows measured centers along a growing word line.