RuskelUI
🧩 Table of Contents (Not up to date!)
About RuskelUI
RuskeUI is a TailwindCSS-based design system for rapid Web3 development in NextJS/React.
I wanted to create my own UI vault that would be the official UI set of primitives for all of the Web3 related initiatives that I'm working on and plan to work on.
It follows what I deem as Neonic Nerophism, which combines three UI trends together - neonic colours, dark mode and glassmorphism, hence the name. The goal for this project is to rapidly create aesthetically beautiful interfaces, getting you from concept to production very quickly in the ReactJs ecosystem.
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 -pRun the following to install the RuskelUI package:
npm i ruskeluiOR
yarn add ruskeluiQuick 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 |
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 |
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 |
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 |
Card
The Card element displays information.
Props
| Property | Description | Type | Default |
|---|---|---|---|
| elemName | elem-name | abac | string |
| floatingLabel | floating-label | abac | string |
| label | label | abac | string |
| placeholder | placeholder | abac | string |
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 |
Dropdown
The Dropdown element displays options to select elements.
Props
| Property | Description | Type | Default |
|---|---|---|---|
| isSub | label | boolean | string |
| children | label | ReactNode | string |
| leftIcon | label | ReactNode | string |
| rightIcon | label | ReactNode | string |
| menu | label | string | string |
| idx | label | string | string |
| route | label | string | string |
| color | label | color |
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 |
Loader
The Loader element.
Props
| Property | Description | Type | Default |
|---|---|---|---|
| color | color | Sets the color of the inner element inside the loader | string |
| name | name | Name that's attached to ID HTML attribute | string |
Modal
The Modal element.
Props
| Property | Description | Type | Default |
|---|---|---|---|
| elemName | elem-name | abac | string |
| floatingLabel | floating-label | abac | string |
| label | label | abac | string |
| placeholder | placeholder | abac | string |
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 | string |
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 |
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 |
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 |
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 |
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 |
License
This project is under the MIT License - view the LICENSE file for more details.
