sheengemologic ui
Validated public inventory

Component laboratory

Scan every component in place, then open its playground for controls, variants, anatomy, and accessibility guidance.
Showing 182 of 182

Application

24 components
AccountMenusheen-patterns
An app-owned account identity and action menu that aligns to its topbar or sidebar placement.Open playground
AdminAppsheen-patterns
The Sheen application baseline with placement-safe chrome, scoped services, retained content, and responsive details.Open playground
AdminTopbarsheen-patterns
A compact, named application control region with deterministic start, center, and end zones.Open playground
AppShellsheen-patterns
A viewport-constrained application grid with persistent chrome and a native content pane.Open playground
AuthLayoutsheen-patterns
A deterministic authentication page frame with focused and responsive brand-split presentations.Open playground
BrandSplitAuthLayoutsheen-patterns
A branded two-pane authentication starter that collapses to the focused card without replacing content.Open playground
DataTablePagesheen-patterns
Composes page header, app actions, saved-view controls, table-owned query and selection chrome, and explicit regional states.Open playground
DetailsPanelsheen-patterns
One retained detail-content owner with docked, accessible-resizable, and modal Sheet presentations.Open playground
ErrorStatesheen-patterns
A regional error presentation with app-owned retry and safe rejection feedback.Open playground
FocusedAuthLayoutsheen-patterns
A centered authentication card for concise OAuth, OIDC, SSO, or credential flows.Open playground
SettingsLayoutsheen-patterns
A sectioned settings workspace with stable in-page navigation, app-owned dirty data, and one persistent asynchronous save bar.Open playground
StatusBarsheen-patterns
App-owned connection and background task status with localized counts and persistent actions.Open playground
Toolbarsheen-patterns
Measured whole-group actions with scoped overflow and independent filter controls.Open playground

Content

4 components
CodeBlocksheen-code
Renders accessible source with an optional file header, copy and wrap actions, line emphasis, and serializable Shiki tokens.Open playground
DiffViewersheen-code
Shows a searchable, copyable unified line diff with bounded computation and virtualized large-content DOM.Open playground
JSONViewersheen-code
Validates and deterministically formats JSON into a searchable, copyable, virtualized line view.Open playground
LogViewersheen-code
Renders structured logs as a searchable, copyable, virtualized line stream with non-color level labels.Open playground

Data

14 components
AreaChartsheen-charts
Renders bounded SVG area series with honest NaN gaps and optional positive/negative stacking.Open playground
BarChartsheen-charts
Renders bounded grouped or stacked categorical bars in vertical or horizontal responsive SVG layouts.Open playground
ChartDataTablesheen-charts
Provides a bounded, localized native-table alternative and narrative summary for a chart.Open playground
DataTablesheen-table
Virtualized continuous or paginated data with phone cards, selection, layouts, groups, and trees.Open playground
FilterBarsheen-table
Edits the accepted serializable filter AST through removable condition chips and typed draft popovers.Open playground
LineChartsheen-charts
Renders a responsive token-themed SVG line chart for bounded time or numeric data with explicit gaps.Open playground
QueryBuildersheen-table
Builds nested, typed, serializable table filters with complete keyboard alternatives to structural editing.Open playground
Statsheen-charts
Presents one tabular metric with an optional text-labeled directional trend.Open playground
StatGroupsheen-charts
Groups related tabular metrics under one accessible label.Open playground
TimeSeriessheen-charts
Progressively enhances a deterministic time-series fallback with a responsive themed uPlot canvas and native data alternative.Open playground

Data display

15 components
ActivityTimelinesheen
A stable chronological list with complete, current, upcoming, and error states encoded by text and shape.Open playground
EmptyStatesheen
A named region distinguishing an empty dataset from a query with no matches.Open playground
Tablesheen
Native table semantics and token styling for bounded, non-virtualized tables.Open playground
Tagsheen
A labeled chip with optional native-button removal; collection state remains app-owned.Open playground

Date and time

8 components
Calendarsheen-date
An always-visible locale-aware calendar with Ark-backed grid keyboard interaction.Open playground
DatePickersheen-date
A typed date input with a responsive calendar mounted in the nearest theme portal.Open playground
DateRangePickersheen-date
A two-ended date picker that keeps its incomplete range draft while accepted state refreshes.Open playground
DateTimePickersheen-date
A date, wall-time, and IANA-zone editor that resolves instants without hiding DST ambiguity.Open playground
TimeFieldsheen-date
A locale-ordered segmented wall-clock editor with a timezone-free ISO projection.Open playground
TimePickersheen-date
A contextual list of Sheen wall-clock values with deterministic interval generation.Open playground

Feedback

3 components
Alertsheen
An urgent, persistent message that does not move focus or dismiss itself.Open playground
Calloutsheen
Static contextual information, not an urgent live-region announcement.Open playground

Forms

19 components
Checkboxsheen
A labeled native checkbox with controlled, uncontrolled, and mixed presentation.Open playground
Fieldsheen
A visible label, description, and validation message associated with one native labelable control.Open playground
FileDropzonesheen
A native-picker-first file intake surface with drag parity, validation, and app-owned upload state.Open playground
RangeSlidersheen
A two-thumb slider with an ordered tuple contract, minimum separation, and distinct accessible thumb names.Open playground
Selectsheen
A single choice with a scope-aware listbox and native form participation.Open playground
Slidersheen
A single-value accessible slider with scoped locale formatting and native range input semantics.Open playground
Switchsheen
A labeled binary setting with native form participation and switch semantics.Open playground
TagInputsheen
An ordered free-form tag editor with native multi-value submission and stale-safe async validation.Open playground

Icons

44 components
Iconsheen-icons
A statically analyzable semantic icon marker replaced by the Sheen Vite integration.Open playground

Layout

8 components
Gridsheen
One to twelve equal-width columns with role-based row and column gaps.Open playground
ScrollAreasheen
A named, keyboard-accessible native scrolling viewport that retains content and scroll ownership.Open playground

Loading

2 components
Spinnersheen
A compact loading status with localized text and an optional decorative presentation.Open playground

Navigation

14 components
Paginationsheen
Requests pages while announcing only controlled, accepted results.Open playground
Steppersheen
A responsive workflow progress list with native link, action, and status steps.Open playground
Tabssheen
Named tab panels with stable identities, retained drafts, and scoped keyboard navigation.Open playground
Treesheen
A hierarchical treeview with explicit selection, retained expansion state, roving focus, and typeahead.Open playground

Overlays

13 components
Sheetsheen
Provides the Drawer contract under the common Sheet name for task and detail panels.Open playground

Patterns

1 components
SplitLayoutsheen-patterns
Composes two labeled, persisted resizable panes that retain one content owner while stacking in a narrow container.Open playground

Primitives

4 components

Surfaces

3 components
Cardsheen
A bordered raised surface, without a shadow unless explicitly requested.Open playground
Separatorsheen
A structural divider with native separator semantics and an explicit decorative mode.Open playground

Theming

2 components
ThemeScopesheen
Overrides theme axes locally, with inherited messages and a contextual overlay target.Open playground

Typography

4 components
Codesheen
Inline code, rendered as code with the mono type role. Syntax highlighting belongs to CodeBlock.Open playground
Kbdsheen
Semantic keyboard-input notation. Shortcut registration and platform formatting are separate concerns.Open playground
Textsheen
Inline text with semantic type roles, accessible muted color, and optional tabular figures.Open playground