Skip to content

Simple UI component library or styling rule set created by Sharishth using HTML, CSS and Javscript.

License

Notifications You must be signed in to change notification settings

Sharishth/starterui

Repository files navigation

StarterUI

Straightforward UI component library and styling rule set using HTML, CSS, and JavaScript. The components are designed for reusability, and the script is imported only once, eliminating the need to create separate duplicate functions for reused components. However, for components that don't require a script, developers can use them without importing.

Preview Components

Website

Note: layout.css should be ignored and is only there for formatting documentation of showcase. Accessibilty scores are low due to layout of preview page. Landing page on the otherhand has score of 100.

Chrome Lighthouse score

Next target

  1. Experimental Typography Rules
  2. Javascript for tick and search svg.

Components Till now (22-02-2024)

Action

  1. Button and variants
  2. Dropdown
  3. Checkbox

Input Boxes

  1. Text type input
  2. Date type input

Table

  1. Default
  2. Theme variants

Accordion

  1. Default Accordion

Badges/Tags

  1. Count
  2. info
  3. warning
  4. error
  5. success

Card

  1. Text Card
  2. Quote and review Card
  3. Card with avatar
  4. Card with Image and description

Carousel

  1. For Image
  2. For Any div content
  3. For Any div content with default or user defined interval.

Bread Crumb

  1. Default
  2. Custom direction sign

Navbar

  1. Simple Default
  2. Window Size Responsive
  3. Responsive Nav with Logo
  4. Sticky Navbar

Navbar

  1. Simple Default
  2. Window Size Responsive
  3. Responsive Nav with Logo

Timeline

  1. Default List based
  2. Custom styling

Tabs

  1. Default

Range

  1. Default

Code

  1. Default

Mock Browser

  1. Desktop
  2. Mobile

Pagination

  1. Default
  2. Styled with custom dropdown

Input Radio

  1. Default
  2. Colored

Toggle

  1. Default

Dividers (with and without text)

  1. Horizontal
  2. Vertical

Drawer

  1. Default

Flex templates

  1. Flex - Justify Center Align Center row
  2. Flex - Justify Center Align Center Column
  3. Hero Section Simple
  4. Hero Section two row
  5. Hero Section two col

Grid templates

  1. 2 column grid
  2. 3 Coulmn grid
  3. Horizontal Column Span
  4. Vertical Row Span
  5. Centering inside a grid item
  6. Justify self Start, Center and End
  7. Align self Start, Center and End
  8. Footer template Simple

About

Simple UI component library or styling rule set created by Sharishth using HTML, CSS and Javscript.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published