RuskelUI v3.0

🧩 Table of Contents (Not up to date!)

🕵️ About RuskelUI
⭐️ Star Us
⬇ Installation
🛠 Getting Started
⚡️ Quick Start
🧰 Components
📃 License

About RuskelUI

RuskeUI is a TailwindCSS-based system for rapid UI development in NextJS/React.

I want to play about and create my own UI library.

Check out RuskelUI via Storybook or try out the RuskelUI Playground in StackBlitz.

Star Us!

If this project helps/has helped you build your Web3 projects faster, star us - every little star helps!

Getting Started

To get started with RuskelUI, you need to TailwindCSS installed in your existing project, if not, install the foll

Installation

Run the following to install RuskelUI's Tailwind config file - the "-p" tag is optional and creates a PostCSS file:

npx ruskelui -p

Run the following to install the RuskelUI package:

npm i ruskelui

yarn add ruskelui

Quick Start

Components

Accordion

The Accordion element displays information from a user in the form of an image if available, and displaying the initials of the user if the user's image is not available.

Props

Property	Description	Type	Default
data	Array that takes objects with `title` and `content` as keys	`AccordionData[]`
fullWidth	Make the accordion full available width or not	boolean	false
color	label	`color`

Code Example

import { RuiAccordion } from 'ruskelui'

const App = () => {
    let _data = [
        {label: "What is the #1 crypto?", content:"The one and only, XRP"}
    ];

    return (
        <RuiAccordion data={_data} color="azure" fullWidth >
    )
}

Avatar

The Avatar element displays information from a user in the form of an image if available, and displaying the initials of the user if the user's image is not available.

Props

Property	Description	Type	Default
size	abac	`size`	6
src	abac	string
alt	abac	string
badgeColor	abac	`color`	undefined
variant	abac	`variant`	base

Code Example

import { RuiAvatar } from 'ruskelui'

const App = () => {
    return  (
        <RuiAvatar size={16} src="https://imageUrl">
    )
}

Breadcrumbs

The Breadcrumbs element.

Props

Property	Description	Type	Default
color	elem-name	`color`	ruby
route	floating-label	string
fullWidth	label	boolean
divider	placeholder	ReactNode
children	placeholder	ReactNode
variant	placeholder	`variant`

Code Example

import { RuiBreadcrumbs } from 'ruskelui'

const App = () => {
    return (
        <RuiBreadcrumbs fullWidth divider={"-"}>
            <RuiBreadcrumbs.Item route='/'>Home</RuiBreadcrumbs.Item>
            <RuiBreadcrumbs.Item route='/blog' variant='current'>Blog</RuiBreadcrumbs.Item>
        </RuiBreadcrumbs>
    )
}

Button

The Button element.

Props

Property	Description	Type	Default
children	elem-name	ReactNode	string
svg	floating-label	ReactNode	string
startColor	label	`color`	string
endColor	placeholder	`color`	string
color	placeholder	`color`	string
size	placeholder	`size`	string
direction	placeholder	`direction`	string
isDisabled	placeholder	boolean	string
variant	placeholder	`variant`	string

Code Example

import { RuiButton } from 'ruskelui'

const App = () => {
    return (
        <RuiButton color="amethyst" size={"small"}>Connect Wallet</RuiButton>
    )
}

Checkbox

The Checkbox element displays checked elements.

Props

Property	Description	Type	Default
children	color	ReactNode
color	label-after	`color`	ruby
variant	label-before	`variant`
strikeThrough	name	abac	false
defaultChecked	name	boolean	false

Code Example

import { RuiCheckbox } from 'ruskelui'

const App = () => {
    return (
        <RuiCheckbox />
    )
}

Dropdown

The Dropdown element displays options to select elements.

Props

Property	Description	Type	Default
pointer	Ref object for further DOM manipulation	LegacyRef	null
position	Align the dropdown's position with flex values `start`, `center` and `end`	`position`
label	A label to differentiate drops	string
variant	A way to differentiate drops with `main` and `secondary`	`variant`
navToDrop	Target navigation (must be label of a drop)	string
color	Apply hover color to `RuiDropdown.Item`	`color`	ruby
children		ReactNode
rightIcon		ReactNode
rightIcon		ReactNode

Code Example

import { RuiDropdown } from 'ruskelui'

const App = () => {
    const [open, setOpen] = useState(false)
    return (
        <RuiDropdown position='start' {...args}>
            <button onClick={() => setOpen(!open)}>Click Here</button>
            {open &&
                <RuiDropdown.Portal>
                    <RuiDropdown.Menu label='main' variant='main'>
                        <RuiDropdown.Item color="amethyst">Dashboard</RuiDropdown.Item>
                        <RuiDropdown.Item leftIcon={iconUser} rightIcon={iconChev} color="amethyst" navToDrop='accountSettings'>Account Settings</RuiDropdown.Item>
                        <RuiDropdown.Item color="azure">Support</RuiDropdown.Item>
                        <RuiDropdown.Item color="scarlet">Log Out</RuiDropdown.Item>
                    </RuiDropdown.Menu>
                    <RuiDropdown.Menu label='accountSettings' variant='secondary'>
                        <RuiDropdown.Item color="amethyst" navToDrop='main'>Main Menu</RuiDropdown.Item>
                        <RuiDropdown.Item color="azure">Edit Profile</RuiDropdown.Item>
                        <RuiDropdown.Item color="teal">Edit 2FA settings</RuiDropdown.Item>
                        <RuiDropdown.Item color="amethyst">Edit Party settings</RuiDropdown.Item>
                        <RuiDropdown.Item color="scarlet">Log Out</RuiDropdown.Item>
                    </RuiDropdown.Menu>
                </RuiDropdown.Portal>}
        </RuiDropdown>
    )
}

Input

The Input element allows data input.

Props

Property	Description	Type	Default
elemName	elem-name	abac	string
floatingLabel	floating-label	abac	string
label	label	abac	string
placeholder	placeholder	abac	string

Code Example

import { RuiInput } from 'ruskelui'

const App = () => {
    return (
        <RuiInput color >
    )
    
}

KBD

The KBD element.

Props

Property	Description	Type	Default
color	color	Sets the color of the inner element inside the loader	string

Code Example

import { RuiKBD } from 'ruskelui'

const App = () => {
    return (
        <RuiKBD color="teal">enter</RuiKBD>
    )
    
}

Loader

The Loader element.

Props

Property	Description	Type	Default
color	Sets the color of the inner element inside the loader	string	peridot

Code Example

import { RuiLoader } from 'ruskelui'

const App = () => {
    return (
        <RuiLoader color="peridot"/>
    )
}

Modal

The Modal element.

Props

Property	Description	Type	Default
pointer	Name that's attached to ID HTML attribute	`LegacyRef<HTMLDialogElement>`
size	Change the width of the modal	`size`	md

Code Example

import { RuiModal } from 'ruskelui'

const App = () => {
    const reffer = useRef<LegacyRef<HTMLDialogElement> | undefined>(null)
    // @ts-ignore
    const openModal = () => reffer.current.show()
    // @ts-ignore
    const closeModal = () => reffer.current.close()
    return (
        <>
            <button onClick={() => openModal()}>open Modal</button>
            <RuiModal pointer={reffer} {...args}>
                <h1>Hi this is a modal!</h1>
                <p>Giving you the room to customise the functionality around this modal, since it's extending the native Dialog element 👾</p>
                <button onClick={() => closeModal()}>close Modal</button>
            </RuiModal>
        </>
    )
}

Pill

The Pill element displays information or status about a process.

Props

*We recommend to use 12 by 12 (pixels) SVG icon to ensure that it fits within the sizing of the pill. If using Tailwind, set the width and height by using "w-3 h-3" in the class/className attribute.

Property	Description	Type	Default
label	label	Useful for displaying statuses	string
iconBefore	icon-before	Default version - sets the icon to appear before the label	boolean
iconAfter	icon-after	Sets the icon to appear after the label	boolean
color	color	Sets the global color of the pill	ruby

Code Example

import { RuiPill } from 'ruskelui';

const App = () => {
    return (
        <RuiPill color={"ruby"} label="Processing" />
    )
}

Progress

The ProgressBar element visually shows the % of the meter filled.

Props

Property	Description	Type	Default
color	color	Sets BG color as RuskelUI's neonic colours or Tailwind's native colours - only for single colour styling	colorType
name	name	Name that's attached to Title & ID of element	string
isGradient	isGradient	Enables for dual gradients	boolean
startColour	startColour	Starting colour of dual gradient	colorType
endColour	endColour	Ending colour of dual gradient	colorType
percentage	percentage	Sets the percentage value for the progress bar and changes how much is filled	number

Code Example

import { RuiProgress } from 'ruskelui'

const App = () => {
    return (
        <RuiProgress variant={"bar"} percentage={53} color={"teal"}>
        <RuiProgress variant={"donut"} percentage={53} color={"indigo"}>
    )
}

Radio

The Radio element.

Props

Property	Description	Type	Default
elemName	elem-name	abac	string
floatingLabel	floating-label	abac	string
label	label	abac	string
placeholder	placeholder	abac	string

Code Example

import { RuiRadio } from 'ruskelui'

const App = () => {
    return (
        <RuiRadio variant={"base"} color="sunstone" label={'Option One'}>
        <RuiRadio variant={"base"} color="sunstone" label={'Option Two'}>
        <RuiRadio variant={"base"} color="sunstone" label={'Option Three'}>
        <RuiRadio variant={"base"} color="sunstone" label={'Option Four'}>
    )
}

Select

The Select element.

Props

Property	Description	Type	Default
elemName	elem-name	abac	string
floatingLabel	floating-label	abac	string
label	label	abac	string
placeholder	placeholder	abac	string

Code Example

import { RuiSelect } from 'ruskelui'

const App = () => {
    return (
        <RuiSelect>
            <RuiSelect.Item color='amethyst' value='Polygon'/>
            <RuiSelect.Item color='green' value='Holo'/>
            <RuiSelect.Item color='blue' value='Fantom'/>
            <RuiSelect.Item color='pink' value='Kadena'/>
            <RuiSelect.Item color='red' value='Tron'/>
            <RuiSelect.Item color='amber' value='Bitcoin'/>
            <RuiSelect.Item color='yellow' value='USDC'/>
        </RuiSelect>
    )
}

Toast

The Toast element.

Props

Property	Description	Type	Default
color	color	Sets the colour from RuskelUI's neonic colours or Tailwind's native colours	colorType
title	title	Sets the title of the toast component	string
content	content	Sets the content of the toast to convey information	ReactNode

Toggle

The Toggle element.

Props

Property	Description	Type	Default
color	color	Sets BG color as RuskelUI's neonic colours or Tailwind's native colours	string
name	name	Sets the accesibility name	string

Code Example

import { RuiToggle } from 'ruskelui'

const App = () => {
    return (
        <RuiToggle color="azure">
    )
}

Tooltip

The Tooltip element.

Props

Property	Description	Type	Default
children	children		ReactNode
name	name	Provides a name for the tooltip	string
message	message	Sets the message to display when tooltip is shown	string
position	position	Sets the position from which the tooltip should be shown	posType

Code Example

import { RuiTooltip } from 'ruskelui';

const App = () => {
    let _message = "Fire reaction"
    return (
        <RuiTooltip message={_message} direction={"top"}>
            <button>🔥</button>
        </RuiTooltip>
    )
}

License

This project is under the MIT License - view the LICENSE file for more details.

ruskelui

RuskelUI v3.0

🧩 Table of Contents (Not up to date!)

About RuskelUI

Star Us!

Getting Started

Installation

Quick Start

Components

Accordion

Avatar

Breadcrumbs

Button

Checkbox

Dropdown

Input

KBD

Loader

Modal

Pill

Progress

Radio

Select

Toast

Toggle

Tooltip

License

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

ruskelui

RuskelUI v3.0

🧩 Table of Contents (Not up to date!)

About RuskelUI

Star Us!

Getting Started

Installation

Quick Start

Components

Accordion

Avatar

Breadcrumbs

Button

Checkbox

Dropdown

Input

KBD

Loader

Modal

Pill

Progress

Radio

Select

Toast

Toggle

Tooltip

License

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads