chakra-ui
TypeScript-Website
Our great sponsors
chakra-ui | TypeScript-Website | |
---|---|---|
343 | 54 | |
36,354 | 2,112 | |
1.3% | 1.7% | |
9.0 | 8.9 | |
about 22 hours ago | 5 days ago | |
MDX | TypeScript | |
MIT License | Creative Commons Attribution 4.0 |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
chakra-ui
-
React Component Libraries
Official Website: https://chakra-ui.com/
-
Material UI vs. Chakra UI: Which One to Choose?
Discover Chakra UI: Chakra UI Documentation
- Tailwind Color Palette Generator
-
Minified React error #426
This error related to the ReactMarkdown component and the useDisclosure hook in the @chakra-ui/react.
-
Shoelace: A forward-thinking library of web components
We settled on Chakra (https://chakra-ui.com/). Although we also abandoned our ambitions of a Next.js migration, so... I guess it didn't really end up mattering all that much anyway.
-
33 React Libraries Every React Developer Should Have In Their Arsenal
4.chakra-ui
-
⚡Top GitHub Repositories for UI Components
🔍 Site ⭐ GitHub
-
Beyond the Basics: Exploring TailwindCSS and Linaria in Next.js - From Installation to Performance Optimization
Examples: radix-ui, chakra-ui, shadcn/ui, tailwind-ui.
-
Ask HN: Examples of best practice modern website design?
(I'm a frontend dev, but I came into the design side only later in my career, after having started as a full-stack programmer.)
I think this book is probably the single best resource I've seen on the topic: https://www.refactoringui.com/
It's a really easy-to-use format (one quick tip on each page, with clear examples).
It's from the people who made Tailwind, a CSS framework that's basically a reimagining of Bootcamp for the Javascript/component era.
Check out some of their templates: https://tailwindui.com/templates
These are lookalike "modern" designs that you can pay to use, or just draw inspiration from. Imitation == flattery and all that.
Along similar lines, check out the free Next.js templates: https://vercel.com/templates/next.js
If you want to build up from components instead, Tailwind offers a component library too: https://tailwindui.com/components
For React, I prefer the astoundingly good MUI framework (amazing components with lots of customizability, a good enough default look, and great documentation): https://mui.com/ If you end up going this route, using their Figma kit (https://mui.com/store/items/figma-react/) plus the Refactoring UI book from above should allow you to whip up a pretty standard-looking, "pretty enough" design in very little time. And then implementing it using the actual MUI lib would just take a few days.
There's also Ant Design: https://ant.design/
And Chakra UI: https://chakra-ui.com/
-----------
For more theoretical stuff (i.e., less visual but still very valuable), the UX research group Nielsen Norman still has a treasure trove of valuable advice: https://www.nngroup.com/articles/top-ten-guidelines-for-home...
You should know the basics of accessibility (beyond general usability, this alos means alt text, header levels, contrast ratios, readability, screen readers, keyboard navigation, special considerations for the hard of sight and hearing, etc.): https://www.w3.org/WAI/standards-guidelines/wcag/ or at least use an easy checklist tool like Microsoft's WCAG analyzer: https://accessibilityinsights.io/
- Ask HN: What's your favorite UI library?
TypeScript-Website
-
How to write React components in TypeScript (2022)
For new components, it does make sense to follow the style defined in the React documentation by writing components using a function definition. However, arrow functions using React.FC also remain a popular choice and are used by Vercel and the official TypeScript website
- Workspaces 2021: yarn v1 vs yarn v2 vs npm?
-
Where do you guys keep your types
Yep, this is my answer too - I use this pattern pretty often. For example, here's the main object that represents the TypeScript Playground at runtime: https://github.com/microsoft/TypeScript-website/blob/86901a0520855050b16b0c23bd6923212fdd0c9c/packages/playground/src/index.ts#L622-L623
-
A Detailed Step-By-Step Implementation of A Full-Featured RESTful API on AWS By A Reformed J2EE Engineer
In this series of articles, I intend to provide a detailed, accurate, and step-by-step explanation of how to implement a RESTful web interface using a stack of Typescript, Node.js, Dynamoose, DynamoDB, Jest, Serverless Framework, AWS, and Amazon Cognito.
-
TypeScript Linting and Code Formatter
Install TypeScript package: npm i -D typescript
-
Creating a modern JS library: Writing good code
Beyond testing your code, it's an excellent idea to write your library in TypeScript. Type errors are among the most common type of mistake in JavaScript, so using TypeScript will almost always reduce development time and may occasionally prevent you from publishing broken code if you forget to add a test. Moreover, the excellent TypeScript compiler will allow you to avoid using a bundler when publishing your package (we'll get into this more later) and will make supporting TypeScript and JavaScript users simultaneously much easier.
-
Why Do We Need Transpilation into JavaScript?
TypeScript is a JavaScript superset with optional type annotations checked during transpilation.
-
I built a full stack serverless e-commerce site with Next.js. What I learned and how it might help you
First a quick overview of the project. Kieran's Coffee Collection is a serveless e-commerce website built primarily with the React framework Next.js. The rest of the front-end stack includes the component Library ChakraUI, TypeScript and Apollo Client.
-
React Stack 2021
TypeScrpt: TypeScript is a typed superscript of JavaScript that compiles to plain Javascript, by using React and TypeScript together we get the benefit of statically typed language for the user interface and also lowering the probability of shipping and bugs to the front-end.
-
Why Typescript and Svelte are a match made in heaven
TypeScript is an extension of JavaScript. You can think of it as JavaScript with a few extra features. These features are largely focused on defining the type and shape of JavaScript objects. It requires that you be declarative about the code you're writing and have an understanding of the values your functions, variables, and objects are expecting.
What are some alternatives?
mantine - A fully featured React components library
antd - An enterprise-class UI design language and React UI library
styled-components - Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
Tailwind CSS - A utility-first CSS framework for rapid UI development.
react-star-rating-input - React.js components for entering 0—N stars (N is 5 by default), or displaying 0—N stars
Material UI - Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.
rebass - :atom_symbol: React primitive UI components built with styled-system.
grommet - a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package
primereact - The Most Complete React UI Component Library
base web - A React Component library implementing the Base design language
shadcn/ui - Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
react-draft-wysiwyg - A Wysiwyg editor build on top of ReactJS and DraftJS. https://jpuri.github.io/react-draft-wysiwyg