All Projects → c8r → Kit

c8r / Kit

Licence: mit
Tools for developing, documenting, and testing React component libraries

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Kit

X0
Document & develop React components without breaking a sweat
Stars: ✭ 1,706 (+42.05%)
Mutual labels:  documentation, mdx, design-systems, components, jsx
Storybook
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!
Stars: ✭ 67,445 (+5515.74%)
Mutual labels:  documentation, styleguide, design-systems, components
Ok Mdx
Browser-based MDX editor
Stars: ✭ 681 (-43.3%)
Mutual labels:  cli, mdx, development, jsx
Mdx Go
⚡️ Lightning fast MDX-based dev server for progressive documentation
Stars: ✭ 340 (-71.69%)
Mutual labels:  documentation, mdx, development, design-systems
Neumorphic Ui
📚 A library of components based on the concept of neumorphism
Stars: ✭ 82 (-93.17%)
Mutual labels:  library, design-systems, components
Story2sketch
Convert Storybook into Sketch symbols 💎
Stars: ✭ 391 (-67.44%)
Mutual labels:  styleguide, design-systems, components
Kn
A collection of shell functions for Kubernetes native dabbling
Stars: ✭ 49 (-95.92%)
Mutual labels:  cli, development
Gatsby Plugin Mdx
gatsby v1 mdx plugin, for gatsby v2 see https://github.com/ChristopherBiscardi/gatsby-mdx
Stars: ✭ 50 (-95.84%)
Mutual labels:  mdx, jsx
Http Prompt
An interactive command-line HTTP and API testing client built on top of HTTPie featuring autocomplete, syntax highlighting, and more. https://twitter.com/httpie
Stars: ✭ 8,329 (+593.51%)
Mutual labels:  cli, development
Msvgc
Make React components from your plain SVG files
Stars: ✭ 64 (-94.67%)
Mutual labels:  cli, components
Mythra
Music retrieval CLI and API using rust
Stars: ✭ 37 (-96.92%)
Mutual labels:  cli, library
Wago
Automate the actions you do after saving code.
Stars: ✭ 60 (-95%)
Mutual labels:  cli, development
Snacks
The Instacart Component Library
Stars: ✭ 65 (-94.59%)
Mutual labels:  styleguide, components
Rdoc
colourised R docs in the terminal
Stars: ✭ 49 (-95.92%)
Mutual labels:  cli, documentation
Influx Prompt
An interactive command-line InfluxDB cli with auto completion.
Stars: ✭ 42 (-96.5%)
Mutual labels:  cli, development
React Display Window
A simple tool to showcase react components
Stars: ✭ 57 (-95.25%)
Mutual labels:  documentation, mdx
Webrix
Powerful building blocks for React-based web applications
Stars: ✭ 41 (-96.59%)
Mutual labels:  library, components
Design System Starter
🚀 The Australian Government Design System - Starter
Stars: ✭ 61 (-94.92%)
Mutual labels:  design-systems, components
Cross Platform Node Guide
📗 How to write cross-platform Node.js code
Stars: ✭ 1,161 (-3.33%)
Mutual labels:  cli, documentation
Egeo
EGEO is the open-source UI library used to build Stratio's UI. It includes UI Components, Utilities, Services and much more to build user interfaces quickly and with ease. The library is distributed in AoT mode.
Stars: ✭ 69 (-94.25%)
Mutual labels:  library, components

Compositor Kit

Tools for developing, documenting, and testing React component libraries

  • Zero-config development server
  • Component library mode
  • Utility components for demos and development
  • Reuse component examples for development, documentation, and testing
  • Read more about Kit on our blog

Getting Started

Install the Kit CLI to get started with isolated component development.

npm i -g @compositor/kit-cli

Create an examples folder for your components. This folder can be used for development, documentation, and testing purposes.

An example file should export a single default component for rendering.

// Button.js example
import React from 'react'
import { Button } from '../src'

export default props =>
  <Button>Button</Button>

Be sure to install any local dependencies, including react, and start the development server.

kit examples

The index will show a list of links to each example. Each example will have its own route where it can be viewed in isolation.

Library Mode

To view all examples in library mode with persistent navigation, use the --mode flag.

kit examples --mode library

Utility Components

If you already have an existing development setup, or want to enhance your examples, use the Kit components directly in any React setup.

npm i @compositor/kit

Library

Use the Library, Example, and Detail components to create a custom component library view.

import React from 'react'
import { Library, Example } from '@compositor/kit'
import { Button } from '../src'

export default props =>
  <Library>
    <Example name='Button'>
      <Button>Button</Button>
    </Example>
  </Library>

XRay

Use the XRay component to outline HTML elements and display a grid to help ensure your UI is visually aligned.

import React from 'react'
import { XRay } from '@compositor/kit'
import { Button } from '../src'

export default props =>
  <XRay>
    <Button>Button</Button>
  </XRay>

Cartesian

Use the Cartesian component to render the cartesian product of props.

import React from 'react'
import { Cartesian } from '@compositor/kit'
import Button from '../src/Button'

export default props => (
  <Cartesian
    component={Button}
    m={4}
    fontSize={[1, 2, 3]}
    bg={['blue', 'pink', 'tomato', 'purple']}
    children={['Hello, world!', 'Beep']}
  />
)

Responsive

Use the Responsive component to render components in multiple iframes at different viewport sizes.

import React from 'react'
import { Responsive } from '@compositor/kit'
import PageHeader from '../src/PageHeader'

const example = (
  <Responsive>
    <PageHeader />
  </Responsive>
)

Other Components

See the Kit components package for more components.

Kit Init

Use the kit init command to create a new project based on a growing set of templates.

Utilities

  • kit-snapshot: run Jest snapshot tests for example components

Related

Contributing

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request

Made by Compositor | MIT License

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].