All Components
One StoryLite surface for scanning the current Filamen UI package.
StoryLite
Marketplace · plannedManufacturing⌘K
WorkbenchThis page keeps the primitives visible together for design component setup.

Tweakit design system

Compact property rows for a narrow inspector. Drag the slider and scrub grips, edit values, or use the keyboard.

Continuous slider

Smooth fill · 0–66 px

Stepped slider

Stops appear while dragging · 5 px steps

Inline switch

Direct Off and On selection

OffOn

Inline select

Three options use segments; longer lists open a select popover

covercontainauto

Inline text input

Right-aligned text · Long values scroll while editing

Inline textarea

Multiline text · Resize vertically from the bottom corner

Scrubbable number

Drag the center grip; the dotted guide follows your cursor

deg

Grouped numbers

Link preserves axis offsets while scrubbing

px

Color picker

Click the color input to open its editor; click outside or press Escape to close

Button Variants
Every variant, size, loading, disabled, and icon shape.

variant

size

state

Component Variants
Variant props exposed by the current UI components.

badge

neutralbluegreenskypurpleredamber

note

defaultVariant sample
secondaryVariant sample
successVariant sample
warningVariant sample
errorVariant sample
violetVariant sample
cyanVariant sample
sm
default
lg

card, avatar, empty

Small card
size sm
SMDFLG
Default media
Icon media

field, select, input group

Full-width label and control layout.

Checkbox and content layout.

Checkbox and content layout.

inline-start
inline-end
block-start
block-end

tabs, meta, separator

Default list variant.
Line list variant.
Vertical orientation.
Stacked metaProduction queue
Grid metaIDR pricing

overlay, sidebar

Sidebar sidebarSidebar floatingSidebar insetoffcanvasiconnone
Foundations
Type, color, badge, avatar, icon, and metadata basics.

Merchant production queue

Facility setup

Quote execution

Shared tokens keep product surfaces compact and predictable.

Primary
Muted
Card
Destructive
ActiveWorkloadPendingBlockedReadyPreview
PFJLAM
+4
Jakarta Print HubFacility capacity syncedProduction enabled

Created at 7/1/2026, 4:00:00 PM by Parker

Last updated at 7/1/2026, 7:30:00 PM by Filamen Ops

Forms
Fields, inputs, validation, choice controls, and toggles.

Visible to merchant staff and creators.

+

Allow this Facility to receive quote requests.

Validation
Navigation
Breadcrumbs, tabs, disclosure, menus, and tooltips.
Open order queue and production state.

Facility, material, slicing, and pricing inputs are visible before quote submission.

Add address, material offerings, and production activation.
Overlays
Dialog, sheet, modal helper, command, and command menu.

Command Palette

Search for a command to run...

Data
Tables, item cards, scroll areas, and row states.
Facility production queue
OrderMaterialStatus
ORD-1042PLA MatteQueued
ORD-1043PETG ClearPrinting
ORD-1044Nylon CarbonReview
Error:Material profile needs validation.
Item Card
Catalog preview with tags, metadata, and actions.
Quote ready

Parametric enclosure shell

Planned Marketplace item

Design-only card pattern for quote and planned Marketplace previews.

2 day lead timeIDR pricing
FDMPLA0.2mm
Feedback
Notes, empty states, skeletons, toast host, and theme switcher.
ReadyQuote preparation is active for this Facility.
ReviewSlicer compute usage is close to the monthly allowance.
No Facility selected
Select a Facility to preview capacity.
Theme: system
Page Shell
Page helpers, uploader, and sidebar in one compact surface.
Sidebar
Dashboard shell primitives with inset, rail, menu, badge, input, and skeleton.
Hidden

The sidebar wrapper, inset, rail, menu, badge, input, and skeleton primitives are shown together.

Back to StoryLite