For Usecue products
The same look for
every product.
The buttons, fields and pages of annotate.now, pos.usecue.com and cms.usecue.com, in one stylesheet. Copy a component, or start a new product from a page.
Get started
How it works
-
Run Hugo
Run hugo server in the repository. The kitchensink opens on localhost:1313 and reloads as you change it.
-
Copy a component
Every example shows its html below it. Copy it into your template and the stylesheet does the rest.
-
Start from a page
The landing page, the log in page and the password forgotten page are complete. Copy one to start a product.
Everything included
- Primary and ghost buttons
- Text fields and textareas
- Selects with separators
- Multiselect, native on mobile
- Checkboxes, radios and switches
- Six-box code input
- Sliding collapses
- Advanced actions
- Dividers and "or" lines
- Tabs, cards and tables
- Toasts and badges
- Numbers that count up
Frequently asked questions
Where does it come from?
From annotate.now, pos.usecue.com, cms.usecue.com and the interface of the Usecue CMS. The same colours, fonts and components, in one stylesheet.
Do I need a build step?
Only Hugo, to put the pages together. The stylesheet and the scripts are plain files, without a framework or a bundler.
Does the multiselect work on a phone?
Yes. On a touch screen it uses the multiselect of the phone, with a mouse it shows a list of checkboxes. Both send the same values.
Do the collapses need JavaScript?
No. They are details elements, so they open and close without it. The script only adds the slide and the fade, and leaves them alone when you prefer less motion.
Is there a dark mode?
No. Like the websites it comes from, it is light only.
Try it now
Start building.
Every product used to have its own stylesheet, with its own buttons that looked almost the same. Now there is one, with every component on one page.
-
3websites
-
2fonts
-
1stylesheet
-
0dependencies