npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@tiller-ds/menu

v1.15.0

Published

Menu module of Tiller Design System

Downloads

502

Readme

Tiller cover image

Tiller Design System

A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels.

Tiller Design System is open-source UI library which offers a set of visual, functional components and patterns that accelerate design and development. Components are endlessly customizable, accessible, and can integrate into any application with primarily focus on back-office applications. Tiller design system is based on Tailwind CSS, Formik and ReachUI. Besides these, Tiller is made with the help of Nx, Yarn 2 and Storybook.

| Package Name | Version | |----------------------------------------------------------------------------------|------------------------------------------------------------------| | @tiller-ds/menu | | | @tiller-ds/cra-template | |

✨ Features

  • 📦 A set of high-quality React components out of the box
  • 🛡 Written in TypeScript with predictable static types
  • 🌐 Internationalization support
  • 🎨 Powerful theme customization in every detail
  • 🗃️ Storybook (Docs, Controls, Playroom)
  • 📌 Rich Text Editor
  • 📌 Login Pattern

🎨 Tiller Design System - Figma UI Kit

Tiller DS UI kit in Figma is a collection of Tiller components that allow you to easily create user interfaces for your Figma projects. It includes common components like buttons, input fields, and menus, as well as more specialized components, like Formik components or Login Pattern.

📚 Tiller Docs & Storybook

For more information about Tiller Design System, please refer to:

  • Storybook
    • Usage documentation for each component
    • Prop documentation for each component
    • Factories for a number of components to easily visualize and create components
    • Code preview for each story
  • GitHub
  • npm

🚀 Getting Started

Installation with Create React App

  1. Install node.js
  2. Install yarn
  3. Create project with
    yarn create react-app app-name --template @tiller-ds/cra-template
  4. Run yarn start command to start your project

Installation with Vite

  1. Install node.js
  2. Install yarn
  3. Create project with
    npx degit croz-ltd/tiller-starter-vite
  4. Then run these commands to start your project
    cd %PROJECT_NAME%
    yarn install
    yarn run dev

Installation with custom project setup

If you use your own starter, basic steps needed for Tiller to work are next:

  1. Dependency to @tiller-ds/theme and other wanted modules for your app
  2. tailwind.config.js with this minimal config:
module.exports = {
  presets: [require('@tiller-ds/theme').preset]
};
  1. Import of tiller styles in your main css file:
@import "@tiller-ds/theme/styles/tiller.css";

Usage

Install packages you’re interested in using, for example, a @tiller-ds/core:

npm i @tiller-ds/core
import { Button } from "@tiller-ds/core";

<Button>Hello world!</Button>

Styles

Tiller DS is bundled with a default theme that you can customize to match the look and feel of your project.

Customizations on theme level are implemented using design tokens which we call Tiller tokens. For guides on Tiller tokens, head on over to our Storybook - Theming and Customization.

Tiller Design System is divided into modules.

Available modules / packages:

  • @tiller-ds/alert
  • @tiller-ds/core
  • @tiller-ds/data-display
  • @tiller-ds/date
  • @tiller-ds/dev
  • @tiller-ds/form-elements
  • @tiller-ds/form-elements-advanced
  • @tiller-ds/formik-elements
  • @tiller-ds/icons
  • @tiller-ds/intl
  • @tiller-ds/menu
  • @tiller-ds/patterns
  • @tiller-ds/selectors
  • @tiller-ds/theme
  • @tiller-ds/upload
  • @tiller-ds/util

For more information about each component, check out our Storybook.

Versions

Every monday, a new version of the tiller packages will be published. Whether is minor or major will depend on the tasks completed the week before. If there is no new version on monday, it means there hasn't been enough changes to update the version.

Version ranges

We stick to the semantic versioning, meaning that every breaking change is published as a new major version of the Tiller packages.

Frequently asked questions

What are the major benefits of the Tiller DS?

  • Better developer experience Short onboarding process, easier setup, detailed documentation, high-quality React components.
  • Endlessly customizable Every detail of Tiller DS is customizable to match your brand. Style with Tiller Tokens or override components with your own.
  • Functional components Formik components wrapped in a Field Formik component, as well as implementation of Fetch.

Where should I file bugs and requests?

Bugs and feature requests for Tiller DS

You can also use the above link to report a bug or a feature request for previous version of Tiller Components.

As we continue to work on the new Tiller we will move UI-related issues in the tiller repository over here to work on them. We will continue to maintain major bug and security fixes for all existing UI packages and versions. New development for UI components will happen in this repository.

🙌 Contributing

One of the goals of the Tiller Design System is to make building applications as easy as possible, while maintaining high quality UI components. The best way to achieve this goal is through a collective effort. We would appreciate contributions from the community, regardless of their size. 😍

If you're interested, definitely check our Contributing Guide.

📝 License

Licensed under the Apache 2.0 License.