Skip to content
Rofin UI / PlaygroundDocumentation

Small pieces. Real possibilities.

Interactive examples of every core component. Buttons without app handlers demonstrate styling; no data is sent.

Button

Card

A place for your next idea.

Give your content a little breathing room. Build on a simple, flexible surface.

Input

We’ll only use this to contact you about your account.

Select

Textarea

Checkbox

Radio group

Choose a workspace

Switch

Range

Accordion

Does this need a framework?

No. Use plain HTML and CSS. Add small JavaScript modules only for the interactions you need.

Can I change the colors?

Yes. Override the --rf-* design tokens to make it yours.

What’s the license?

MIT. Use it in personal or commercial projects and retain the license notice.

Tabs

Your workspace, at a glance.

Keep your projects and people together.

A little progress, every day.

Your latest work appears here.

Make yourself at home.

Customize the workspace to fit your flow.

Dropdown menu

Dialog

A fresh start.

Everything you need to build something thoughtful.

Drawer

Workspace settings

Give your workspace a name that feels like you.

Tooltip

Save your current workspace settings

Toast

Badge

New release Published Draft Needs attention

Avatar

RF
AM JL +3

Alert

You’re ready to go.

Your workspace has been created. Time to make something great.

Breadcrumb

Pagination

Table

Your latest projects
ProjectStatusUpdated
Studio websitePublishedToday
Component libraryIn progressYesterday

Progress

72%

Meter

6 GB

Spinner

Loading your workspace…

Skeleton

File input

Choose one or more files. This demo lists them locally; it does not upload them.

    Navigation

    Empty state

    A clean slate.

    No projects yet. Your first idea is a good place to start.

    Layout

    A little structure.
    Room to breathe.
    Made to adapt.